@charset "utf-8";
/* CSS Document */

    body {
      margin: 0;
      font-family: sans-serif;
      line-height: 1.7;
		background-color: #e61127;
      color: #fff;
    }

    /* メイン画像 */
    .main-visual img {
      width: 100%;
      display: block;
    }

#main-image {
  opacity: 0;
  transition: opacity 2.0s ease-out;
}
#main-image.loaded {
  opacity: 1;
}

    /* メッセージ部分 */
.message {
  position: relative;
  padding: 60px 20px;
  text-align: center;
  color: #fff;

  /* 背景写真 */
  background-image: url("../img/message-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 文字が読みやすいように */
  overflow: hidden;
}

/* オーバーレイ（暗めの半透明） */
.message::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(80, 50, 0, 0.7); /* 透明度は調整可 */
  z-index: 1;
}

/* テキストを前面に */
.message p {
  position: relative;
  z-index: 2;
  max-width: 500px;
  margin: 1.5rem auto;
  font-size: clamp(1rem, 2.5vw, 1rem);
  line-height: 1.8;
}

    /* 写真ギャラリー */
    .gallery {
      display: grid;
      gap: 20px;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    /* 2?3カラム対応 */
    @media (min-width: 600px) {
      .gallery {
        grid-template-columns: repeat(2, 1fr);
      }
    }
    @media (min-width: 900px) {
      .gallery {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .photo-item img {
      width: 100%;
      border-radius: 4px;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .photo-item img:hover {
      opacity: 0.85;
    }

    .photo-comment {
      margin-top: 8px;
      font-size: 0.95rem;
    }

    /* 拡大表示モーダル */
    .modal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.8);
      justify-content: center;
      align-items: center;
      padding: 20px;
	z-index: 9999;
		
    }
    .modal img {
      max-width: 90%;
      max-height: 90%;
      border-radius: 4px;
    }


.closing-message {
  text-align: center;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1.8;
  padding: 60px 20px;
  margin-top: 40px;
}

@media (max-width: 900px) {
.closing-message {
	font-size: 1.2rem;
	}
}


.pc-br {
  display: none;
}

/* PCだけ表示 */
@media (min-width: 900px) {
  .pc-br {
    display: inline;
  }
}


.sp-br {
  display: none;
}

@media (max-width: 600px) {
  .sp-br {
    display: inline;
  }
}