@charset "Shift_JIS";

/* *******************　全体設定　******************* */
#top {
  position: relative;
  width: 100vw;
  height: 94vh;
  margin: 0;
  padding: 0;
  overflow:hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

#top img {
  vertical-align:top;
}

.bbox{
  display: none;
}

#obi {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 90px;
  top: 93.8vh;
  background: rgba(0,0,0, .85);
  background-image: url("../img/top/22135238.png");
  background-size: 120px;
  z-index:9999;
  opacity: 0;
  animation: fade-in 1s 0.1s;
  animation-fill-mode: forwards;
}

#obi img {
  height: 50px;
  margin: 0 15px;
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
  #top { height: 85vh; }
  #obi {
    height: 10vh;
    top: 84.9vh;
  }
}

@media screen and (max-width: 896px) and (orientation: landscape){
  /* スマホ横向き */
  #top { height: 95vh; }
  #obi {
    height: 50px;
    top: 94.8vh;
  }
  #obi img {
    height: 35px;
    margin: 0 15px;
  }
}

@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
  #top { height: 85vh; margin-bottom: 150px;}

  #obi {
    height: 10vh;
    top: 84.9vh;
  }
}

.dlb_link { transition: 0.2s; }
.dlb_link:hover {transform: scale(0.9, 0.9); }
.modaal-wrapper {
    height: auto;
}

/* *******************　画像設定　******************* */

.top_rogo {
  position: absolute;
  width: 35vw;
  bottom: 100px;
  animation: poyoyon 1s ease-in 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 5;
}

.top_img_01 {
  position: absolute;
  right: 0;
  bottom: 0;
  animation: SlideIn_R 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 4;
}

.top_img_02 {
  position: absolute;
  left: 0;
  bottom: 0;
  animation: SlideIn_L 1s 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 3;
}

.top_img_03 {
  position: absolute;
  right: 0;
  bottom: 90px;
  animation: SlideIn_R 1s 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 2;
}

.top_img_04 {
  position: absolute;
  left: 0;
  bottom: 90px;
  animation: SlideIn_L 1s 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 1;
}

.top_img_05{
  position: absolute;
  left: 0;
  top: 0;
  animation: SlideIn_LT 1.5s 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 0;
}

.top_img_06{
  position: absolute;
  right: 0;
  bottom: 0;
  animation: SlideIn_RB 1.5s 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 0;
}

.top_img_07{
  position: absolute;
  left: 0;
  bottom: 0;
  animation: SlideIn_LB 1.5s 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 0;
}

.top_img_08{
  position: absolute;
  right: 0;
  top: 0;
  animation: SlideIn_RT 1.5s 1s;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 0;
}

.top_img_05 img, .top_img_06 img, .top_img_07 img, .top_img_08 img{
  width: 100vw;
}


@media only screen and (min-device-width: 959px) and (max-device-width: 1280px) and (orientation: landscape) {
	/*iPadが横向きのみの記述*/
  .top_rogo {
    width: 40vw;
    bottom: 25px;
  }
  .top_img_01 img { height: 80vh; }
  .top_img_02 img { height: 85vh; }
  .top_img_03 img { height: 80vh; bottom: 0px; }
  .top_img_04 img { height: 72vh; bottom: 0px; }
}

@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */

  .top_rogo {
    position: absolute;
    width: 50vw;
    margin-bottom: 0;
    bottom: 25px;
  }

  .top_img_05 img, .top_img_07 img { width: auto; height: 90vh;}
  .top_img_06,.top_img_08 { display: none; }

  .top_img_01{ right: -25%; }
  .top_img_03{ right: -20%; }
  .top_img_02{ left: -16%; }
  .top_img_04{ left: -18%; }
}

@media screen and (max-width: 896px) and (orientation: landscape){
  /* スマホ横向き */
  .top_rogo {
    width: 35vw;
    bottom: 20px;
  }
  .top_img_01 { height: 90vh; width: auto; right: 0; }
  .top_img_02 { height: 98vh; width: 0; left: 0; }
  .top_img_03 { height: 75vh; width: auto; right: 2vw; }
  .top_img_04 { height: 70vh; width: 0; left: 1vw; }
  .top_img_01 img { height: 110vh; }
  .top_img_02 img { height: 115vh; }
  .top_img_03 img { height: 105vh; bottom: 0px; }
  .top_img_04 img { height: 100vh; bottom: 0px; }

  .top_img_06,.top_img_08 { display: inline-block; }
}


@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
  .top_img_06, .top_img_07, .top_img_08 { display: none; }

  .top_img_01{ right: -160px; }
  .top_img_02{ left: -130px; }
  .top_img_03{ right: -150px; }
  .top_img_04{ left: -110px; }

  .top_img_01 img { height: 73vh; }
  .top_img_02 img { height: 77vh; }
  .top_img_03 img { height: 71vh; bottom: 0px; }
  .top_img_04 img { height: 68vh; bottom: 0px; }

  .top_rogo {
    width: 70vw;
    bottom: 2vh;
    animation: poyoyon 1s ease-in 2s;
    animation-fill-mode: forwards;
  }
}

/* CSSアニメーションの設定 */
@keyframes SlideIn_R {
  0% { transform: translateX(50vw); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes SlideIn_RT {
  0% { transform: translate(50vw,-50vh); }
  100% { opacity: 1; transform: translate(0); }
}
@keyframes SlideIn_RB {
  0% { transform: translate(50vw,50vh); }
  100% { opacity: 1; transform: translate(0); }
}

@keyframes SlideIn_L {
  0% { transform: translateX(-50vw); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes SlideIn_LT {
  0% { transform: translate(-50vw,-50vh); }
  100% { opacity: 1; transform: translate(0); }
}
@keyframes SlideIn_LB {
  0% { transform: translate(-50vw,50vh); }
  100% { opacity: 1; transform: translate(0); }
}

@keyframes poyoyon {
  0%  { transform: scale(1.8, 1.5) translate(0, 0); opacity: 1; }
  25% { transform: scale(0.98, 0.9) translate(0, 5px); }
  30% { transform: scale(1.02, 1.0) translate(0, 8px); }
  60% { transform: scale(0.98, 1.05) translate(0, -8px); }
  70% { transform: scale(1.0, 0.9) translate(0, 5px); }
  100% { transform: scale(1.0, 1.0) translate(0, 0);opacity: 1; }
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* *******************　PCメニュー設定　******************* */

.menu {
  width: 200px;
  height: 100vh; /* メニューの縦は画面一杯に伸ばす */
  background-color: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: -200px; /* メニューが閉じているときは画面外に出す */
  transition: 0.3s;
  opacity: 0;
  visibility: hidden;
  z-index: 99999;
}

.menu a {
  text-decoration: none;
  color: #FFF;
}

.menu_img {
  height: 17px;
  margin: 15px 0;
}

.menu_rogo {
  width: 150px;
  margin-bottom: 15px;
}

.active{
  opacity: 1;
  visibility: visible;
}

.menu.open {
  left: 0; /* メニューを開くと画面内に表示される */
  transition: 0.3s;
}

.menu-list {
  margin-top: 50px;
  width: 100%;
}

.menu-list .menu-list-item {
  border-bottom: 0px solid #000;
}

.menu-list .menu-list-item a {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
  transition: 0.5s;
}

.menu-list .menu-list-item a:hover {
  opacity: 0.5;
  transition: 0.5s;
}

button.menu-toggle {
  border: none;
  outline: none;
  width: 100px;
  height: 50px;
  background-color: rgba(0,0,0,1);
  color: #FFF;
  cursor: pointer;
  /* メニューボタンの配置 */
  position: absolute;
  top: 70px;
  left: calc(200px - 50px * 0.5);
  transform: rotate(90deg);
  border-radius: 15px 15px 0 0;
}

button.menu-toggle.open { background-color: rgba(0,0,0,.5); }
button.menu-toggle:after { content : 'MENU'; font-size: 150%;}
button.menu-toggle.open:after { content : 'CLOSE';  font-size: 150%;}

/* *******************　SPドロワーメニュー設定　******************* */
.sp_menu_wrap {
  z-index: 1000000;
  width: 100%;
  position: fixed;
  display: none;
  top: 20px;
  right: 0;
}

/*ここから下がハンバーガーメニューのスタイル*/
#hamburger .btn-gNav{
  position: fixed;
  display: none;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 24px;
  z-index: 3;
  box-sizing: border-box;
  cursor: pointer;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

#hamburger .bg{
  position: fixed;
  display: none;
  top: 15px;
  right: 15px;
  width: 39px;
  height: 34px;
  border-radius: 2px;
  z-index: 5;
  background: rgba(40,40,40, .3);
}

@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
  #hamburger .btn-gNav, #hamburger .bg { display: block; }
}

#hamburger .btn-gNav span{
  position: absolute;
  width: 100%;
  height: 4px;
  background: #FFF;
  border-radius: 10px;
  -webkit-transition: all 400ms;
  transition: all 400ms;
}

#hamburger .btn-gNav span:nth-child(1) { top:0; }
#hamburger .btn-gNav span:nth-child(2) { top:10px; }
#hamburger .btn-gNav span:nth-child(3) { top:20px; }
#hamburger .btn-gNav.open span:nth-child(1){
  background: #666;
  top: 6px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
}
#hamburger .btn-gNav.open span:nth-child(2),#hamburger .btn-gNav.open span:nth-child(3){
  top: 6px;
  background :#666;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
}


#gNav {
  position: fixed;
  display: none;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0, .85);
  box-sizing: border-box;
  z-index: 2;
  padding-top: 50px;
  transition: .3s;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
  #gNav{ display: block; }
}

#gNav.open{ right: 0px; }
#gNav .gNav-menu{
  width: 100%:;
  height:100%;
  display: flex;
  flex-direction: column;
  text-align: center;
}

#gNav .gNav-menu li{
  display: block;
  padding : 10px 30px;
}