@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Press+Start+2P);

body {
/*  padding: 0 2rem;
  margin: 0 2rem;
    padding: 0;
    margin: 0;*/
}

#nescss > .container {
  max-width: 980px;
  margin: 0 auto;
  margin-top: 150px;
}

/* Header */
header {
 
/*  border-bottom: 4px solid #D3D3D3;
  background-color: brown;
    text-align: center;*/
}






.nav-brand > a {
/*  color: yellow;*/
    color: white;
  text-decoration: none;
}



/* アコーディオンスライド */
.accordionslide07 {

display: grid;
visibility: hidden;
width: 100%;
height: 80vh;
}
.accordionslide07 .slideitem {
position: relative;
visibility: visible;
overflow: hidden;
height: 100%;
cursor: pointer;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
transition-delay: 0s;
transition-timing-function: linear;
transition-duration: 2.8s;
transition-property: all;
color: #ffffff;
}

.accordionslide07 .slideitem p{
color: darkred;
    background-color: ghostwhite;
    padding-top:0px; 
}

.accordionslide07 .slideitem:nth-child(1) {
background-image: url("youtuber_virtual.png");
}
.accordionslide07 .slideitem:nth-child(2) {
background-image: url("otome.jpg");
}
.accordionslide07 .slideitem:nth-child(3) {
background-image: url("mr-robot-minimalism-to.jpg");
    
}
.accordionslide07 .slideitem:nth-child(4) {
background-image: url("maxresdefault.jpg");
}
.accordionslide07 .slideitem:nth-child(5) {
background-image: url("virus.jpg");
}
.accordionslide07 .slideitem:nth-child(6) {
background-image: url("indexMainImg02.png");
}
.accordionslide07 .slideitem:nth-child(7) {
background-image: url("6325962.png");
}
.accordionslide07 .slideitem:nth-child(8) {
background-image: url("large.jpg");
}

.accordionslide07 .slideitem:after {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
}
.accordionslide07:hover .slideitem:hover {
width: 80%;
/*    変化後*/
-ms-flex-negative: 0;
flex-shrink: 0;
}
.accordionslide07 .slideitem .slidecont {
position: absolute;
z-index: 4;
top: 0px;
left: 30px;
visibility: hidden;
max-width: 400px;
padding: 20px;
transition: opacity 0.2s ease 0;
opacity: 0;
}
.accordionslide07 .slideitem:hover .slidecont {
transition: opacity 0.3s ease 0.3s;
opacity: 1;
}
.accordionslide07 .slideitem h2 {
color: lightgreen;
    background-color: black;
font-size: 1.2em;
position: absolute;
bottom: 10px;
left: 50%;
margin: 0;
padding: 0;
transform: translateX(-50%);
white-space: nowrap;
}
.accordionslide07:hover .slideitem:hover .slidecont {
visibility: visible;
}
@media only screen and (max-width:768px) {
.accordionslide07 .slideitem .slidecont {
position: relative;
right: 0px;
left: 0px;
visibility: visible;
opacity: 1;
min-height: 75vh;
}
.accordionslide07 .slideitem .slidecont .text {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease 0.3s;
}
.accordionslide07 .slideitem:hover .slidecont .text {
visibility: visible;
opacity: 1;
margin-top: 40px;
}
.accordionslide07 .slideitem h2 {
visibility:hidden;
}
.accordionslide07 .slideitem:hover  h2 {
visibility: visible;
top: 20px;
left: 65px;
}
.accordionslide07 .slideitem .slidecont::before {
position: absolute;
font-size: 1.2em;
font-weight: bold;
display: block;
text-align: center;
top: 50%;
left: 25%;
width: 12em;
content: attr(title);
transform: rotate(-90deg) translateX(-50%);
transform-origin: 0 0 0;
visibility: visible;
opacity: 1;
}
.accordionslide07 .slideitem:hover .slidecont::before {
visibility:hidden;
opacity: 0;
}
}

.left .sidebar .sidebar_nav .update{
    background-color: azure;
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
    width: 82%;
}