/*index*/



.pop{font-family: "Dela Gothic One", sans-serif;}



.container{
width:90%;
max-width:1200px;
background-color: gainsboro a;
margin:0 auto;
}
.flex {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}

header {
    padding:20px 0;}

.logo{
font-size: 50px;
font-weight: 400;
letter-spacing: -0.04em;
}


.logo span{
color:darkolivegreen
}

.header_menu li{
    margin-right: 30px;
    
}



.header_menu li a:hover{
    color:darkred;
}




#hero {
background-image: url(../images/girl.jpg);
background-position: center;
background-size: cover;
height:450px;
border-radius:45px;
}








/*日記*/





.diary-container{
    width: 90%;
    max-width: 1200px;
    justify-content: center;
    margin: 0 auto;
}


.diary-container hr {
    color:#8a9aa4;
}
.date{
font-size: 9px;
    color: #8a9aa4;
    text-align: right;
}
.text {
  margin: 10px 0;
   font-size: 12px; 
    flex-wrap: wrap;
    
}
.text img {
  border-radius: 30px;
  margin: 10px 0;
  height: 30%;
    max-height: 200px;

  object-fit: cover;
}





/*ぎゃらりー*/

.wrap {
  
    width:90vw;
    max-width: 1200px;
display: flex;
  flex-wrap: wrap;
    justify-content:center;
    margin:0 auto;
}

.item{ 
margin:0.5vw;
width:29vw;
    max-width: 348px;

height:29vw;
   max-height: 348px;
object-fit: cover;
    position:relative;

}

.item p{
    position:absolute;
    z-index:2;
    text-align:center;
    text-stroke:#FFFFFF;
}
.item img:hover{  
    opacity:0.5;
}


.item img{  

   width: 29vw;
   max-width: 348px;

  height: 29vw;
   max-height: 348px; 
  object-fit: cover;
z-index:1;

}

.item video:hover{  
    opacity:0.5;
}


.item video{  

   width: 29vw;
   max-width: 348px;

  height: 29vw;
   max-height: 348px; 
  object-fit: cover;
z-index:1;

}