/*=== mp4再生用 ========================= */
.video-container {
    width: 100%;
    height: 100vh; /* 画面の高さいっぱい */
    overflow: hidden;
    position: relative;
}

.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像の比率を保ったまま背景いっぱいに広げる */
}

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



img {
        max-width:100%; height:auto; 
}



*{
		margin: 0;
		padding: 0;
}

html, body {
		height: 100%;
		background: white;
		overflow: hidden;
}


td {
	line-height: 180%; font-size: 14px;
}

p {
	margin: 3px 5px;
}

a {
	color: rgb(255, 255, 255); text-decoration: none;
}

a:hover {
	color: rgb(255, 255, 255); text-decoration: none; background-color: rgb(255, 204, 153);
}

h1 {
	margin: 0px; color: rgb(147, 64, 12); font-size: 11pt;
}

h2 {
	margin: 0px; color: rgb(147, 64, 12); font-size: 12pt;
}

h3 {
	margin: 0px; color: white; font-size: 11pt;
}

ul {
	padding-left: 0em; margin-left: 2em;
}

table1 {
	color: white;
}

.table2 {
	color: white; table-layout: fixed; vertical-align: top;
}

.table2 td {
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
}

.table3 {
	color: rgb(255, 255, 255); table-layout: fixed; vertical-align: top;
}

.table3 td {
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
}

.table4 td {
  padding: 5px 10px;
  text-align: left;
  vertical-align: top;
}


.ntitle {
   margin: 5px 10px 0px; color: rgb(173, 37, 222); font-size: 13px; font-weight: normal;
}

.comment {
   margin: 5px 10px 0px; color: rgb(150, 150, 150); font-size: 12px;
}

.disp-block {
  display: block; /* これでブロック要素の扱いになります */
}
.blockcenter{
  margin-left: auto;  /* 【ポイント】*/
  margin-right: auto; /* 【ポイント】*/
}



  ul.drop1{
      display           : inline-block;
      position          : fixed;
      list-style-type   : none;
      width             : 200px;
      padding           : 0px;
      margin-left       : 0px;
  }
  ul.drop1 li{
      position          : absolute;
      cursor            : pointer;
      top               : 0px;
      left              : 0px;
      box-sizing        : content-box;
      width             : 200px;
      height            : 160px;
      line-height       : 80px;
      text-align        : center;
  }
  ul.drop1 li:hover{
  }
  ul.drop1 li.category{
      position          : relative;
      z-index           : 10;
  }
  ul.drop1 li.category1{
      z-index           : 6;
  }
  ul.drop1 li.category2{
      z-index           : 5;
  }
  ul.drop1 li.category3{
      z-index           : 4;
  }
  ul.drop1 li.category4{
      z-index           : 3;
  }
  ul.drop1 li.category5{
      z-index           : 2;
  }
  ul.drop1 li.category6{
      z-index           : 1;
  }
  ul.drop1:hover li.category1{
      top               : 160px;
  }
  ul.drop1:hover li.category2{
      top               : 320px;
  }
  ul.drop1:hover li.category3{
      top               : 480px;
  }
  ul.drop1:hover li.category4{
      top               : 640px;
  }
  ul.drop1:hover li.category5{
      top               : 800px;
  }
  ul.drop1:hover li.category6{
      top               : 960px;
  }


.site-header{
      z-index:1;
      /*background: #eee;*/
      position          : fixed;
      top               : 0px;
      left              : 0px;
      width             : 100%;
      height            : 75px;
}


.site-footer{
      z-index:1;
      /*background: #72cdda;*/
      position          : fixed;
      bottom            : 0px;
      left              : 0px;
      width             : 100%;
      height            : 75px;
}





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

#container {
		width: 100%;
		height: 100%;
overflow: auto; /* コンテンツの表示を自動に設定（スクロール） */
		padding-top: 0px;
		text-align: center;
		background: white;
		box-shadow: 0 0 50px 0 rgba(0,0,0,.8);
		transition-property: all;
		transition-delay: .3s;
		transition-duration: .5s;

}

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

#siteNavi {
		position: fixed;
		top: 0;
		left: 0;
		width: 25%;
		height: 100%;
		padding: 120px 0;
		background: #cd296e;
		transition-property: all;
		transition-duration: .5s;
		transition-delay: 0s;
		transform-origin: left center;
		transform: translateX(-500px);
		opacity: 0;
}

	#siteNavi li {
		list-style-type: none;
	}

	#siteNavi li a {
		display: block;
		height: 50px;
		line-height: 50px;
		padding-left: 0px;
		font-size: 14px;
		color: #fff;
		text-decoration: none;
		transition: all .5s;
	}

	#siteNavi li a:hover {
		color: #1a1e24;
		background: #fff;
	}

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

#menuButton {
	position: fixed;
	display: block;
	top: 40px;
	left: 40px;
	display: block;
	width: 32px;
	height: 32px;
	cursor: pointer;
	z-index: 3;
}

	.line {
		position: absolute;
		left: 0;
		display: block;
		width: 32px;
		height: 4px;
		background: white;
		transition: all .5s;
	}

	.line.top {
		top: 0px;
		transform-origin:left top;
	}

	.line.middle {
		top: 10px;
		opacity: 1;
	}

	.line.bottom {
		top: 20px;
		transform-origin: left bottom;
	}

	#menuButton:hover .line {
		background: #fff;
	}

#closeButtonField {
	position: fixed;
	top: 0;
	left: 25%;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0);
	transition-property: all;
	transition-duration: .5s;
	transition-delay: 0s;
	visibility: hidden;
	opacity: 0;
}


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

#dummyCheckBox {
	display: none;
}

#dummyCheckBox:checked ~ #container {
	transition-delay: 0s;
	transform: translateX(25%);
}

#dummyCheckBox:checked ~ #siteNavi {
	transition-delay: .3s;
	transform:  translateX(0);
	opacity: 1;
	z-index: 2;
}

#dummyCheckBox:checked ~ #menuButton .line.top {
	width: 40px;
	top: -2px;
	transform: rotate(45deg);
}

#dummyCheckBox:checked ~ #menuButton .line.middle {
	opacity: 0;
}

#dummyCheckBox:checked ~ #menuButton .line.bottom {
	width: 40px;
	top: 26px;
	transform: rotate(-45deg);
}

#dummyCheckBox:checked ~ #closeButtonField {
	transition-duration: 1s;
	transition-delay: .3s;
	background: rgba(0,0,0,.5);
	visibility: visible;
	opacity: 1;
	z-index: 3;
}