.firstView {
  width: 100%;
  height: 100vh;
  background-image: url("../img/firstview.jpg");
  overflow: hidden; /* ← はみ出し対策 */

  position: relative; /* これで中の絶対配置が基準になる */
  background-position: 40% 60%;
  background-repeat: no-repeat;
  background-size: cover; /* 画面にピッタリフィット */
  animation: bgZoomBg 10s ease-out forwards;
  z-index: 1;
}
.vertical-wrapper {
  display: flex;
  justify-content: space-between;
  padding: 0 40rem;
  margin-top: 26rem;
  margin-bottom: 8rem;
}

.vertical-left,
.vertical-right {
  writing-mode: vertical-rl;
  text-orientation: upright;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 60rem;
  width: auto;
  letter-spacing: 0.2em;
}

.vertical-left {
  font-size: 1.6rem;
  order: 1; /* 左に表示 */
  margin-top: 8rem;
}

.vertical-right {
  font-size: 2.4rem;
  order: 2; /* 右に表示 */
  margin-top: 3rem;
}

.vertical-right p {
  padding-left: 1.6rem;
}

.vertical-left p {
  display: block;
  font-size: 1.6rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* display: flex;
  flex-direction: column; */
  /* gap: 2rem; */
  padding-left: 1.2rem;
}
.vertical-left p:not(:last-child) {
  margin-bottom: 6rem;
}

.verticalSpace {
  margin-right: 12rem;
}

.verticalSpace p {
  padding-left: 2rem;
}

/* ここから概要 */
.overview-wrapper {
  background-color: #002538;
  width: 100vw;
  padding-top: 21rem;
  padding-bottom: 20rem;
}

.overview {
  width: 100%;
  margin: 0;
  color: #f4f4f2;
  box-sizing: border-box;
}

/* お部屋 */
.roomFlex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.img-wrapper {
  width: 686px;
  height: 435px;
  border: 1px solid #f2f0e6;
  padding: 1.6rem; /* 画像に余計な余白つけへんために */
  box-sizing: border-box;
}

.room1 {
  width: 100%;
  height: 100%;
  object-fit: cover; /* サイズぴったり収める用 */
}

.textWrapper {
  margin-bottom: 2rem;
  margin-left: 8rem;
}

.roomContainer {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 8rem;
}
.roomContainer h2 {
  font-size: 3.2rem;
  margin-bottom: 2rem;
}

.roomText p {
  font-size: 1.6rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
  color: #f2f0e6;
}

.viewBtnWrapper {
  margin: 8rem 0;
}

.roomImages {
  display: flex; /* 横並び */
  gap: 20px; /* room2とroom3の間隔 */
  justify-content: center; /* 中央揃えたい場合 */
}

.img-wrapper.img2,
.img-wrapper.img3 {
  flex-shrink: 0;
}

.img-wrapper.img2 {
  width: 266px;
  height: 388px;
  margin-top: 4rem;
  margin-left: 30rem;
}

.img-wrapper.img3 {
  max-width: 460px;
  width: 100%;
  height: 310px;
  margin-top: 20rem;
  margin-left: 16rem;
}

.room2,
.room3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.overviewFood {
  margin-top: 10rem;
  margin-left: 12rem;
  display: flex;
  gap: 2rem;
  align-items: flex-start;
}

/* お料理 */
.overviewFood {
  margin-top: 35rem;
  display: flex;
  flex-wrap: wrap; /* ← これ追加！ */
}

.foodText {
  margin-bottom: 1rem;
}
.foodTextWrapper h2 {
  font-size: 3.2rem;
  margin-bottom: 2rem;
}

.foodImg1 {
  width: 45.2rem;
  height: 60.5rem;
  border: 1px solid #f2f0e6;
  padding: 1.6rem; /* 画像に余計な余白つけへんために */
  box-sizing: border-box;
  margin-left: 10rem;
}

.food1 {
  width: 100%;
  height: auto;
}

.foodImg2 {
  width: 37.2rem;
  height: 30.4rem;
  border: 1px solid #f2f0e6;
  padding: 1.6rem; /* 画像に余計な余白つけへんために */
  box-sizing: border-box;
}

.food2 {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.foodImg2 {
  width: 37.2rem;
  height: 30.4rem;
}

.food1,
.food2 {
  width: 100%;
  height: 100%; /* ここをautoから100%に */
  display: block;
}

.foodTextWrapper {
  padding-top: 10rem;
}

/* お知らせ */
.newsContainer {
  display: flex;
  justify-content: space-between;
  align-items: center; /* 垂直方向も揃える */
  /* 下に余白欲しければ */
  margin-bottom: 2rem;
}
.newsTitle {
  font-size: 3.2rem;
}

.newsSection {
  margin-top: 18rem;
  margin-bottom: 30rem;
  padding: 0 5rem;
}
.newsWrapper {
  display: flex;
  justify-content: space-between; /* ← 均等に配置 */
  /* margin-right: 9.4rem; これで画像（ニュースアイテム）間の横余白できる */
}

/* 最後の画像だけ右余白いらん場合 */
/* .newsItem {
  margin-right: 9.4rem;
} */

.newsItem:last-child {
  margin-right: 0;
}

.newsItem img {
  width: 360px;
  height: 274px;
  border: 1px solid #001204;
  padding: 1.6rem; /* 画像の周りに余白 */
  box-sizing: border-box; /* paddingとborder込みでサイズ固定 */
  object-fit: cover; /* 画像のアスペクト比崩したくない時におすすめ */
  transition: transform 0.4s ease, filter 0.4s ease;
}
/* アニメーション追加！ */
.newsItem img:hover {
  transform: scale(1.05); /* ちょっとズーム */
  filter: brightness(60%); /* 少し暗くして雰囲気出す */
  cursor: pointer;
}

.newsWrapper a {
  color: #002538;
}

.newsDate {
  margin-top: 2.8rem;
  margin-bottom: 0.7rem;
  font-size: 1.4rem;
}

/* インスタ */
.instagramSection {
  margin: 0 5rem;
}
.instaGallery {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-top: 2rem;
  flex-wrap: wrap; /* スマホ対応 */
  padding: 5rem 0; /* 上下にちょっと余白も */
  border-top: 1px solid #001204;
  border-bottom: 1px solid #001204;
}

.instaItem {
  width: calc(25% - 1.5rem);
  overflow: hidden;
  border-radius: 1rem;
  position: relative;
  transition: transform 0.3s ease;
}

.instaItem img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.4s ease;
}

.instaItem:hover img {
  transform: scale(1.05);
  filter: brightness(85%);
  cursor: pointer;
}

.instaTitle {
  font-size: 3.2rem;
  margin-bottom: 6rem;
}
/* ボタン */
.viewAllBtnWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12rem;
  margin-top: 8rem;
}
.viewAllBtn {
  display: inline-block;
  text-align: center;
  font-size: 2.4rem;
  border: 1px solid #001204;
  padding: 10px 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid #001204;
  transition: background-color 0.3s ease;
}
.viewAllBtn a {
  color: #001204;
  position: relative;
  z-index: 2;
  color: #001204;
  text-decoration: none;
  transition: color 0.3s ease;
  padding: 10px 30px;
  display: inline-block;
}

.viewAllBtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background-color: #001204;
  transition: left 0.3s ease;
  z-index: 1;
}

.viewAllBtn:hover::before {
  left: 0;
}

.viewAllBtn:hover a {
  color: #f2f0e6;
}
@media (max-width: 1024px) {
  .vertical-wrapper {
    padding: 0 5rem; /* タブレット用に縮める */
  }
}

@media (max-width: 768px) {
  .vertical-wrapper {
    padding: 0 2rem; /* スマホ用はもっと縮める */
  }
}

@media (max-width: 480px) {
  .vertical-wrapper {
    padding: 0 1rem; /* さらに縮める！ */
    margin-top: 20rem;
  }
}

/* レスポンシブ */
@media (max-width: 768px) {
  .vertical-left {
    font-size: 1.2rem !important;
  }

  .vertical-right {
    font-size: 1.8rem !important;
  }

  .vertical-left p {
    margin-bottom: 2.5rem !important;
    padding-left: 0.6rem !important;
    font-size: inherit !important; /* pタグも親に合わせる */
  }

  .verticalSpace {
    margin-right: 2rem !important;
  }
}

@media (max-width: 900px) {
  .overview-wrapper {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 15rem;
    padding-bottom: 15rem;
  }

  .roomFlex {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }

  .overview .img-wrapper {
    width: 100%;
    max-width: 600px;
    height: auto;
    padding: 1rem;
  }

  .overview .roomContainer {
    margin-left: 0;
    margin-top: 2rem;
    width: 100%;
    max-width: 600px;
  }

  .overview .roomImages {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;
  }

  .overview .img-wrapper.img2,
  .overview .img-wrapper.img3 {
    max-width: 100%;
    margin-top: 0;
    margin-left: 0;
    width: 180px;
    height: auto;
  }

  .overviewFood {
    flex-direction: column;
    margin-left: 0;
    margin-top: 5rem;
    gap: 3rem;
  }

  .overviewFood .foodImg1,
  .overviewFood .foodImg2 {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin-left: 0;
  }

  .overviewFood .foodTextWrapper {
    padding-top: 2rem;
    width: 100%;
    max-width: 600px;
  }
  .roomContainer h2 {
    font-size: 2rem; /* 元は3.2remやったけど落として落ち着かせる */
  }

  .roomText p,
  .foodTextWrapper p {
    font-size: 1.2rem; /* 1.6remからちょっと小さめに */
    line-height: 1.5; /* 読みやすさアップ */
  }

  .foodTextWrapper h2 {
    font-size: 2rem; /* ここも統一感のために落とす */
  }
  .textWrapper {
    margin: 0;
  }
}

/* PC通常時はそのまま */
.roomFlex {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.roomImages {
  display: flex;
  gap: 20px;
  justify-content: center;
}

@media (max-width: 768px) {
  .overviewRoom {
    display: flex;
    flex-direction: column;
  }

  .roomFlex {
    display: flex;
    flex-direction: column;
    order: 1; /* 画像1 → テキスト */
  }

  .roomImages {
    order: 2; /* 画像2と画像3 */
  }

  .roomContainer {
    order: 3; /* テキスト全部最後に移動 */
  }
}

@media (max-width: 768px) {
  .img-wrapper.img3 {
    margin-left: auto;
    margin-right: auto;
    margin-top: 8rem;
    width: 90%;
  }
}
@media (max-width: 900px) {
  .overviewFood {
    flex-direction: column;
  }

  .foodImgWrapper.foodImg1 {
    max-width: 26rem;
    width: 100%;
    order: 1;
  }

  .foodImgWrapper.foodImg2 {
    max-width: 28rem;
    width: 100%;
    order: 2;
    margin-left: 6rem;
  }

  .foodTextWrapper {
    order: 3; /* テキストは画像のあとに */
  }
}

/* インスタ */
/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .instagramSection {
    margin: 0 3rem;
  }

  .instaTitle {
    font-size: 2.4rem;
    margin-bottom: 4rem;
  }

  .instaItem {
    width: calc(33.333% - 1rem); /* 3列に */
  }
}
@media (max-width: 768px) {
  .instagramSection {
    margin: 0 2rem;
  }

  .instaTitle {
    font-size: 2rem;
    margin-bottom: 3rem;
  }

  .instaGallery {
    gap: 1rem;
  }

  .instaItem {
    width: calc(50% - 0.5rem); /* 2カラムにしてスマホでも見やすく */
  }

  .viewAllBtnWrapper {
    margin-top: 2rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .instagramSection {
    margin: 0 1rem;
  }

  .instaTitle {
    font-size: 2rem;
    margin-bottom: 2rem;
    margin-left: 2rem;
  }

  .instaItem {
    width: 100%; /* 1列に */
    margin-bottom: 1.5rem;
  }
}
@media (max-width: 768px) {
  .newsSection {
    margin: 6rem 0; /* スマホ用に余白調整 */
  }

  .newsContainer {
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    margin-top: 10rem;
  }

  .newsTitle {
    font-size: 2rem;
  }

  .newsWrapper {
    flex-direction: column; /* 縦並びに変更 */
    gap: 6rem;
  }

  .newsItem img {
    width: 100%; /* 親に合わせる */
    height: auto;
    padding: 1rem;
  }

  .newsDate {
    margin-top: 1.2rem;
    font-size: 1.2rem;
  }

  .newsItemTitle {
    font-size: 1.4rem;
    line-height: 1.5;
  }

  .viewBtnWrapper {
    align-self: flex-end;
  }
}
@media (max-width: 768px) {
  .newsItem img {
    width: 100%;
    aspect-ratio: 4 / 3; /* 元の比率に近いやつ。必要なら3/2とかに変えてもOK */
    height: auto;
    object-fit: cover;
    padding: 1.2rem;
    border: 1px solid #001204;
    box-sizing: border-box;
  }
}