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;
}



/*=== 生成したcss ===*/
 /*=== 画像の表示エリア ================================= */
.slide {
  position   : relative;
  overflow   : hidden;
                    /* 画像のサイズに合わせて変更ください */
  width      : 375px;
  height     : 469px;
  margin     : auto;      /* サンプルは中央寄せの背景：白 */
  background : #fff;
}
 
 /*=== 画像の設定 ======================================= */
.slide img {
  display    : block;
  position   : absolute;
                      /* 画像のサイズを表示エリアに合せる */
  width      : inherit;
  height     : inherit;
  opacity    : 0;
  animation  : slideAnime 35s ease infinite;
}
 
 /*=== スライドのアニメーションを段差で開始する ========= */
.slide img:nth-of-type(1) { animation-delay: 0s }
.slide img:nth-of-type(2) { animation-delay: 7s }
.slide img:nth-of-type(3) { animation-delay: 14s }
.slide img:nth-of-type(4) { animation-delay: 21s }
.slide img:nth-of-type(5) { animation-delay: 28s }
 
 /*=== スライドのアニメーション ========================= */
@keyframes slideAnime{
   0% { opacity: 0 }
   2% { opacity: 1 }
  18% { opacity: 1 }
  20% { opacity: 0 }
 100% { opacity: 0 }
}


.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/4);/*←画像を横に4つ並べる場合*/
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
}

ul{
  padding-left:0;
}

li{
  list-style:none;
}