@charset "utf-8";
@import url("content.css");

/*-----------------------------------

		覚え書き　メイン

-----------------------------------*/

#memorandum main section{
	margin-bottom:80px;
}
#memorandum main .title{
	font-family: 'Playball', cursive;
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	border-bottom:2px solid #EAEAEA;
	line-height: 1;
	color:#00AFCC;
}

#memorandum main section .title a{
	color: #059CB7;
	text-decoration: none;
	font-weight: 400;
}

#memorandum main section .title a:hover{
	color: rgba(5,156,183,0.7);
}

#memorandum main section .fa-solid{
	text-align: right;
	font-size:12px;
}

#memorandum main section .fa-solid:first-child{
	margin-left:5px;
}

#memorandum main section li{
	border-bottom:1px dotted #ccc;
}
#memorandum main section li a{
	padding:25px 10px 0px 10px;
	text-decoration: none;
	color:#2F2F2F;
	display: block;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#memorandum main section li p.text,
#memorandum main section li p.date{
	margin-left:20px;
}


#memorandum main section li a::after {
  content: '';
  background:rgba(218,218,218,0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0, 1);
  transform-origin: left top;
  transition: .2s cubic-bezier(0.45, 0, 0.55, 1);
  z-index: -1;
}

#memorandum main section li a:hover::after {
  transform: scale(1, 1);
	z-index: 2;
}

#memorandum main section h3{
	font-size:1.5rem;
	font-weight: bold;
	display: flex;
	margin-bottom:10px;
}


#memorandum main section h3::before{
font-family: "Font Awesome 6 Free";
content: "\f1b0";
color:rgba(0,175,204,0.59);
display: inline-block;
margin-right:5px;
font-size:1.15rem;
}

#memorandum main .readmore{
	color:#A5A5A5;
	letter-spacing: 0.05em;
}


/*-----------------------------------

	日記　メイン

-----------------------------------*/
	
#diary main section{
	display: flex;
	/*justify-content: space-between;*/
	flex-wrap: wrap;
	gap:0.7vw;
}

#diary main a{
	width:max(calc( (100% / 4) - 0.7vw),250px);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	position: relative;
	color:#2F2F2F;
	text-decoration: none;
	box-shadow:  0px -1px 17px -6px rgba(169,169,169,0.40);
	background-color: #fff;
	border:1px solid rgba(225,225,225,1.00);
}

#diary main a:hover{
	box-shadow: none;
}

#diary main a::after{
	font-family: "Font Awesome 6 Free";
	content: "\f0da";
	position: absolute;
	right:0;
	bottom:2px;
	font-size:12px;
	color:#00AFCC;
	line-height: 1;
	font-weight: bold;
	padding-right:3px;
}

#diary .photo{
	width:100%;
	line-height: 0;
	position: relative;
	/*border:1px solid #ccc;*/
}

#diary .photo img{
	width:100%;
	height: 100%;
	aspect-ratio: 3 / 2;
	border-radius: 10px 10px 0 0;
	 object-fit: cover;
}


#diary .date{
	font-family: 'Playball', cursive;
	font-size:12px;
	line-height: 1;
	text-align: right;
	position: absolute;
	right:5px;
	bottom:0;
	font-weight: bold;
	/*margin-top:-10px;*/
	text-shadow:1px 1px 0 rgba(255,255,255,0.5), -1px -1px 0 rgba(255,255,255,0.5),
              -1px 1px 0 rgba(255,255,255,0.5), 1px -1px 0 rgba(255,255,255,0.5),
              0px 1px 0 rgba(255,255,255,0.5),  0 -1px 0 rgba(255,255,255,0.5),
              -1px 0 0 rgba(255,255,255,0.5), 1px 0 0 rgba(255,255,255,0.5);
}

#diary .new{
	display: inline-block;
	position: absolute;
	top:3px;
	left:3px;
	background-color: rgba(251,0,132,0.6);
	color:#fff;
	font-size:12px;
	border-radius: 6px;
	line-height: 15px;
	padding:0 5px;
	border:1px solid rgba(255,255,255,0.86);
}

#diary a .text{
	flex:1;
	font-weight: bold;
	line-height: 1.4;
	padding:10px 15px;
	font-size:14px;
}

/*-----------------------------------

		レスポンシブ

-----------------------------------*/
@media screen and (min-width: 430px){
	#diary a:hover .photo{
		position: relative;
		z-index: 1;
	}

	#diary a:hover .photo::before{
		content:'';
		font-size:3rem;
		width:100%;
		height: 100%;
		position: absolute;
		top:0;
		left:0;
		background-color:rgba(227,224,224,0.28);
		backdrop-filter: blur(5px);
		z-index: 2;
		border-radius: 6px 6px 0 0;
		line-height: 1;
	}
}

@media screen and (max-width: 430px){
	#diary main section{
		width:100%!important;
		justify-content: space-between;
		gap:5px 0.7vw;
		padding:0;
			
	}
	#diary main a{
		width:calc(50% - 0.7vw);
		/*width:90%;*/
		margin:0 auto;
	}
	
	#diary .photo img{
	aspect-ratio: 2 / 1;
	}
	
	#diary a .text{
		padding:5px;
	}
}