@charset "utf-8";


nav a {
  margin: 0 10px;
  padding: 8px 15px;
  background-color: #ffffffaa;
  border-radius: 15px;
  text-decoration: none;
  color: #666;
  font-weight: bold;
}

nav a:hover {
  background-color: #bcffff;
}

body{	background:linear-gradient(to bottom, #02c4c7, #a6c1ee);
	color: #444;
	background-size:cover;
	background-position:center center;
	background-attachment:fixed;
	object-fit: cover;
	margin: 100px 50px;
	background-repeat:no-repeat;
}

article {
  cursor:pointer;
  border: none;
  border-radius: 20px;
  padding: 20px;
  margin: 30px auto;
  width: 65%;
  background-color: rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  transition: transform 0.2s;

}

article:hover {
  transform: translateY(-5px); /* ふわっと浮く */
}

/* テキスト */
article p {
  line-height: 1.7;
}

article::after {
  content: "";
  display: block;
  clear: both;
}

/* 日付 ・タイトル*/
article h2 {

  font-size: 1.4em;
  border-bottom:none;
  color: #fff;

}

article h2 span {
  display: block;
  border-bottom: 5px dashed #fff;
  padding-bottom: 5px;
}

.hidden {
      display: none;
	}

.toggle-link {

  float: center;
  margin-top: 10px;
  cursor: pointer;
  color: #fff;
  background-color:#02c4c7;
  padding: 5px 10px;
  border-radius: 20px;
  text-decoration: none;
  font-size: 0.9em;

    	}

.main{
	width:500px;
	margin:0 10px;
	float:left;	
}