@charset "utf-8";

/* ==========================================================
   基本スタイル（PC・タブレット向け）
   ========================================================== */

.p1 {
  clear: both;
  margin: 10px auto;
  width: 94%;
  padding: 1rem;
  text-align: left;
  vertical-align: top;
}

.photo1 {
  width: 83%;
  margin: 0 0 20px 0;
  display: block;
}

.photo2 {
  width: 100%;
  margin: 0px 0 20px 0px;
  display: block;
}

.photo3 {
  width: 30%;
  margin: 3px 0 5px 3px;
}
/* ==========================================================
   スマホ用スタイル（画面幅 810px 以下）
   ========================================================== */

@media screen and (max-width: 810px) {
  /* コンテナを横幅いっぱいに広げる */
  .p1 {
    width: 100%;
  }

  /* 写真の横幅を調整 */
  .photo1,
  .photo2 {
    width: 90%;
    margin: 15px auto; /* 上下に15pxの余白を空け、左右は中央寄せに */
    display: block; /* 確実に中央寄せと改行を効かせるため */
  }
  .photo3 {
    width: 30%;
    margin: 10px auto; /* 必要に応じてphoto3も調整 */
    display: block;
  }
}