/*******************************************************************/
/****************************************************************************/
/******************************************************/
/********************************************************/
/***************https://coeure.co.jp/blog/homepage/homepage_180405_05****************************************/
body{
  background-color: lightyellow;
}
.header {
  height: 150px; /***高さ* 250px ***/
}

.video-container {
  position: absolute;
  top: 20px;  /***** video 上から ***OK*/
right: 11px; /*** 追加　*右から**/
  bottom: 0px; /**** 0 *****/
  min-width: 98.5%; /*** video width **** 98.5% ** ok */
  height: 200px; /********video****/
  overflow: hidden;
　border: 0;
　transform:
　translateZ(-#{$scroll-factor * 2}px)
　scale(1 + $scroll-factor * 2);
　float: right;
}

.video-container video {
　position:absolute;
  min-width: 100%;
  min-height: 90%; /*** 50% *****/
  width: auto;
  height: auto; /**auto****/
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.footer{
  height: 200px;
  background: black;
  color: #fff;
  clear: both;
}
.main-contents, .left-navi, .right-navi {
  height: 1400px;
}
.main-contents {
  background-color: white;
  color: #fff;
  float: left;
  width: 80%;
}
.left-navi {
  background-color: blue;
  color: #fff;
  width: 1%;
  float: left;
}
.right-navi {
  background-color: green;
  color: #fff;
  float: right;
  width: 20%;
}
.main{
  width: 98%;  /*****80%*******/
  float: right;
}

@media screen and (max-width: 600px){
  .main, .left-navi,.main-contents, .right-navi{
  width: 100%;
  }
}
/*************************************************/
/**************要素の重なり対策 ******************/
/*************************************************/
.logo-wrapper                 /**** main nav  ****/
 {                    
    height:  50px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    background-color: #FF5722;  /* 背景色指定 */
    position:  relative;        /* 位置指定 */
    z-index: 110;                /* 重なり順指定 */
}
.z-index_test2 {
    height:  200px;             /* 高さ指定 */
    width:  200px;              /* 幅指定 */
    background-color: #03A9F4;  /* 背景色指定 */
    position:  absolute;        /* 位置指定 */
    top: 70px;                  /* 位置指定 */
    left: 200px;                /* 位置指定 */
    z-index: 120;               /* 重なり順指定 */
}
/****************************************************************************/
/*************************************************************/
/*******************追加**************************/
/* ロゴ画像を囲むh1 */
.logo-wrapper
{
	margin: left; 20;
	padding: 20;
	line-height: 0 ;
}

/* ロゴ画像 */
.logo
{
	width: 380px ;
	height: auto ;
position: absolute;
  top: 20%;  /********* log 上から*****追加　*****/
  left: 25%;/**** 左から　****追加***/
}
}
}
/* スマホだけに適用するCSS */
@media screen and (max-width:479px)
{
	/* ロゴ画像 */
	.logo
	{
		width: 180px ;
	}
}

/********************************************/