/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #000;
  color: #fff;
}

/* Center the image */
.wrap {
  min-height: 100svh; /* mobile safe */
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 0;
}

/* Picture / image */
.hero { display: block; }

.hero img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100svh;
}

/* PC: 少し余白をつけて中央に */
@media (min-width: 768px) {
  .hero img {
    max-height: 92vh; /* 好みで90〜95で調整 */
  }
}

/* Mobile: 幅優先で表示（縦長画像） */
@media (max-width: 767px) {
  .wrap {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .hero img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
  }
}

/* Instagram: pictureの下に通常配置 */
.ig-below{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px; /* ← “MORE DETAILS”の少し下の距離 */
  text-decoration: none;
}

/* アイコンサイズ（共通） */
.ig-icon{
  width: 44px;
  height: 44px;
  display: block;
}

@media (max-width: 767px){
  .ig-below{
    margin-top: 6px; /* ←ここで“少し下”を調整 */
  }
  .ig-icon{
    width: 52px;
    height: 52px;
  }
}