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

Theme Name: marukiseikaten-theme
Author: Tatsunosuke
Description: marukiseikaten original theme
Version: 1.0

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

/* -----------------------------------
  basic
----------------------------------- */
html{
  margin-top: 0px !important;
  font-size: 62.5%;
  height:100%;
}
body {
  font-size: 1.7rem;
  font-family: '游ゴシック体', 'Yu Gothic', YuGothic, 'Roboto', "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
  font-weight: 500;
  color:#fff;
  background: #000;
  height:100%;
}

a {
  text-decoration: none;
  color: #fff;
  transition: .3s
}

b {
  font-weight: bold;
}


/* -----------------------------------
  pc
----------------------------------- */

/* --- 全体のBOX定義 ---------------------------------------- */
.box {
  position   : relative;
  width  : 100%;
  height     : 100%;
  margin     : auto;
  overflow   : hidden;
}

/* --- 背景の指定 ------------------------------------------- */
.box .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 18s infinite;   /* 3画像 × 各6s = 18s */
}

/* --- 段差で背景画像のアニメーションを実行 ----------------- */
.box .src1{
  background-image : url("../images/topimg1.png");   /* 背景の画像を指定 */
  background-size:100% auto;
  background-repeat:no-repeat;
  background-position:center;
	  animation-delay  : 0s;
}
.box .src2 {
  background-image : url("../images/topimg2.png");   /* 背景の画像を指定 */
  background-size:100% auto;
  background-repeat:no-repeat;
  background-position:center;
  animation-delay  : 6s;
}
.box .src3 {
  background-image : url("../images/topimg3.png");   /* 背景の画像を指定 */
  background-size:100% auto;
  background-repeat:no-repeat;
  background-position:center;
  animation-delay  : 12s;
}

@keyframes bgAnime {
0% {
		opacity: 0;
	}
	
	12.5% {
		opacity: 1;
	}

	37.5% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
}

/* --- 前面の文字定義（サンプルのため変更してください） ----- */
.box .message{
  position   : absolute;
  display    : inline-block;
  bottom:0%;
  right:0%;
  z-index    : 11;
  padding: 150px 50px 30px 360px;
  background-image: url(../images/topimg-text1.png);
  background-repeat: no-repeat;
  background-position: bottom right;
}

.box .logo{
	position: absolute;
    display: inline-block;
    top: 8%;
    left: 5%;
    z-index: 11;
}

.box .instagram{
	position: absolute;
    display: inline-block;
    bottom:8%;
    right:45%;
    z-index: 11;
}

.box .menu{
    color      : #fff;
    z-index: 11;
	border-left: 1px solid #fff;
    padding: 120px 0px 30px 40px;
	letter-spacing:5px;
}

.box .menu a{
	color:#fff;
	font-size: 0.7em;
	letter-spacing:0.25em;
}

.box .menu li{
	margin: 0 0 30px;
}

.box .menu li:nth-child(5){
	margin: 0 0 0px;
}

.box .message,
.box .instagram{
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 1.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(50px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

.box .logo{
   opacity: 0.8!important;
   animation-name: fadein;
   animation-duration: 1.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fadein {
   0% {
      opacity: 0;
      transform: translateX(0);
   }
   100% {
      opacity: 0.8;
      transform: translateY(0);
   }
}

/* -----------------------------------
	tablet
----------------------------------- */
@media screen and (max-width: 1279px) {

	/* この上に記述 */
}

/* -----------------------------------
  sp
----------------------------------- */
@media screen and (max-width: 767px) {
.box{
  top:-10px;
}
.box .message{
  background-image: url(../images/topimg-text2.png);
	margin: 0 5% 5% 0;
    padding: 0;
    background-size: 50%;
    width: 100%;
}
	/* この上に記述 */
}