/* --------------------
   共通
-------------------- */

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background: #b8cba9;
  color: #222;
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
  line-height: 1.8;
  text-align: center;
}

img{
  width: 95%;
}

img:hover{
  cursor: zoom-in;
}

ul{
  display: flex;
  gap: 0.5rem;
}

li{
  list-style: none;
}

/* --------------------
   戻るボタン
-------------------- */

.page-header{
  max-width: 1100px;
  margin: 20px auto;
  padding: 0 20px;
}

.back-btn{
  display: inline-block;
  text-decoration: none;
  color: #333;
  background: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  transition: 0.3s;
}

.back-btn:hover{
  background: #eee;
}

/* --------------------
   記事
-------------------- */

.diary-page{
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px;
}

.diary-article{
  background: rgba(255,255,255,0.75);
  padding: 50px;
  border-radius: 10px;
}

.date{
  text-align: center;
  color: #666;
  margin-bottom: 10px;
}

h1{
  text-align: center;
  font-size: 42px;
  margin-bottom: 15px;
}

.tag{
  text-align: center;
  margin-bottom: 30px;
  color: #666;
}

.impact{
  font-weight: bold;
  font-size: 20px;
  text-decoration: underline;
}

a{
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}

/* --------------------
   メイン画像
-------------------- */

.main-image{
  width: 100%;
  max-height: 550px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 40px;
}

/* --------------------
   本文
-------------------- */

.diary-text{
  margin-bottom: 60px;
}

.diary-text h2{
  margin-bottom: 20px;
  padding-left: 10px;
  border-left: 5px solid #94ad82;
}

.diary-text p{
  margin-bottom: 20px;
}

/* --------------------
   写真ギャラリー
-------------------- */

.gallery h2{
  text-align: center;
  margin-bottom: 30px;
}

.gallery-grid{
  display: grid;
  grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));
  gap: 20px;
}

.gallery-grid img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;

  border-radius: 8px;

  transition: 0.3s;
  cursor: pointer;
}

.gallery-grid img:hover{
  transform: scale(1.03);
}

/* --------------------
   スマホ
-------------------- */

@media(max-width:768px){

  .diary-article{
    padding: 25px;
  }

  h1{
    font-size: 30px;
  }

}