
/* -------------------------------------------------------------------------

		デザイン
		
------------------------------------------------------------------------- */
body {
  line-height: 1;
  margin: 0;
  background-color:rgba(0,0,0,1);
}
.bg{
	width: 100%;
	height: 100%;
	background-image: url("./img/backimg.jpg") no-repeat center center;/*http://192.168.56.150:213/img/backimg.jpg*/
	background-size:  contain; /*contain cover*/
	background-color:rgba(0,0,0,0.5);
	background-blend-mode: darken;

}

/*全部のリンク*/
ul {
	width: 430px;
	margin: 0;
	padding: 0;
	list-style-type: none;
	background-color: #eeeeee;
	Opacity:81%;
}
li a,li div {
	display: block;
	padding: 16px 16px;
	text-decoration: none;
	color: #000000;
	font-size:1.8em;
}
li {
	text-align: center;
}
li:last-child {
	border-bottom: none;
}
li a.active {
	color: #ffffff;
	background-color: #da3c41;
}
li a:hover:not(.active) {
	color: #ffffff;
	background-color: #1b2538;
}

.cp_navi{
	/*margin: 30px;
	padding: 30px;*/

}
li div {
	background-color: #CCFFFF;
}
/*-------------------表示枠---------------------*/
.container {  display: grid;
  grid-template-columns: 430px 7px 430px;
  grid-template-rows: 560px 7px 560px 7px 560px 7px 560px ;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "K1 . K2"
    ". . ."
    "K3 . K4"
    ". . ."
    "K5 . K6"
    ". . ."
    "K7 . K8";
}

.K1 { grid-area: K1; }

.K2 { grid-area: K2; }

.K3 { grid-area: K3; }

.K4 { grid-area: K4; }

.K5 { grid-area: K5; }

.K6 { grid-area: K6; }

.K7 { grid-area: K7; }

.K8 { grid-area: K8; }

/*----------------------------------------------*/


[class*=underlay] {
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0;
}

.underlay-photo {
  animation: hue-rotate 6s infinite;
  background: url('./img/backimg.jpg');
  background-size: cover;
  -webkit-filter: grayscale(30%);
  z-index: -1;
}
.underlay-black {
  background: rgba(0,0,0,0.7);
  z-index: -1;
}
@keyframes hue-rotate {
  from {
    -webkit-filter: grayscale(30%) hue-rotate(0deg);
  }
  to {
    -webkit-filter: grayscale(30%) hue-rotate(360deg);
  }
}


