body{
    padding:10%;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #ccc;
}
header{
    text-align:center;
    background-color: #999;
    width:100%;
    max-width:800px;
    margin:auto;
    border-radius: 10px;
}
h1{
    font-size: 1.17rem;
}
main{
    font-size: 1rem;
    width: calc(90% - 10px);
    max-width:800px;
    padding: 5%;
    margin:auto;
    background-color: #fff;
    border-radius: 10px;
}
main a{
    color: #000;
}
main div{
    padding:10px;
}
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1em;
}
.card {
    border: 1px solid #ccc;
    padding: 1em;
    background: #f9f9f9;
    border-radius: 8px;
}
.card-title {
    font-weight: bold;
    margin-bottom: 0.5em;
}
.card-content {
    color: #555;
    max-height: 4.5em;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-actions {
    margin-top: 0.5em;
}
form{
width :100%;
margin:auto;
}
input{
    max-width:500px;
    width:90%;
    padding:5px 10px 10px 10px;
    font-size: 1.17rem;
}
textarea{
font-size: 1rem;
max-width:500px;
width:90%;
padding:10px;
}
.btn {
  display: inline-block;
  padding: 10px 20px;
  background: #0078d7;
  color: white;
  border-radius: 8px;
  text-decoration: none;
}
.btn:hover {
  background: #005a9e;
}
footer p{
    text-align:center;
    margin:20px auto; 
    font-size: 0.8rem; 
}
@media screen and (max-width: 800px) {
.card-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}
@media screen and (max-width: 380px) {
  body {
    padding: 5%;
  }
}