* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  color: #594d4d;

  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Noto Serif JP",
    serif;

  /* 壁紙 */
  background-color: #f7dfe3;

  background-image:
    url("album_kabe.png");

  background-repeat: repeat;

  background-position:
    center top;

  background-size:
    900px auto;

  min-height: 100vh;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
}


/* =========================
   全体
   ========================= */

.page-wrap {
  width: min(96%, 1280px);
  margin: 0 auto;
  padding: 38px 0 80px;
}


/* =========================
   戻る
   ========================= */

.back-link {
  margin-bottom: 22px;
}

.back-link a {
  display: inline-block;

  padding: 9px 18px;

  background:
    rgba(255,255,255,0.86);

  border-radius: 999px;

  text-decoration: none;

  box-shadow:
    0 5px 16px
    rgba(88,60,60,0.10);
}


/* =========================
   ヘッダー
   ========================= */

.album-header {
  width: min(92%, 820px);

  margin:
    0 auto 42px;

  padding:
    32px 30px 28px;

  text-align: center;

  background:
    rgba(255,255,255,0.86);

  border:
    1px solid
    rgba(190,150,140,0.18);

  border-radius: 26px;

  box-shadow:
    0 14px 34px
    rgba(105,72,72,0.12);
}

.album-header .small-title {
  margin: 0 0 8px;

  color: #a18479;

  font-size: 0.9rem;

  letter-spacing: 0.16em;
}

.album-header h1 {
  margin: 0;

  color: #745f5d;

  font-size:
    clamp(2rem, 5vw, 3.5rem);

  line-height: 1.35;

  letter-spacing: 0.08em;
}

.album-header .date {
  margin-top: 10px;

  color: #ad8f85;

  font-size: 0.9rem;
}

.album-header .lead {
  max-width: 620px;

  margin:
    22px auto 0;

  line-height: 2;

  text-align: left;
}


/* =========================
   アルバム面
   ========================= */

.album-board {
  padding:
    clamp(30px, 5vw, 60px)
    clamp(20px, 4vw, 48px)
    70px;

  background:
    rgba(255,249,247,0.60);

  border-radius: 32px;

  box-shadow:
    0 18px 50px
    rgba(91,65,65,0.12);
}


/* =========================
   グリッド
   ========================= */

.album-grid {
  display: grid;

  grid-template-columns:
    repeat(12, 1fr);

  gap:
    34px 28px;

  align-items: start;
}


/* =========================
   写真
   ========================= */

.photo {
  position: relative;

  margin: 0;

  background: #fffdf9;

  padding:
    12px 12px 38px;

  box-shadow:
    0 12px 25px
    rgba(73,55,55,0.20);

  cursor: zoom-in;

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.photo:hover {
  z-index: 10;

  box-shadow:
    0 18px 35px
    rgba(73,55,55,0.25);
}

.photo img {
  width: 100%;
  height: auto;
}

.photo figcaption {
  margin-top: 11px;

  color: #806d69;

  font-size: 0.88rem;

  line-height: 1.5;

  text-align: center;
}


/* =========================
   メイン写真
   ========================= */

.main-photo {
  grid-column: span 8;

  transform:
    rotate(-1deg);

  padding:
    15px 15px 46px;
}

.main-photo figcaption {
  font-size: 1rem;

  font-weight: bold;

  letter-spacing: 0.05em;
}


/* =========================
   その他写真サイズ
   ========================= */

.photo.small {
  grid-column: span 3;
}

.photo.medium {
  grid-column: span 4;
}

.photo.large {
  grid-column: span 5;
}

.photo.hero {
  grid-column: span 6;
}


/* =========================
   写真の傾き
   ========================= */

.tilt-1 {
  transform: rotate(-2deg);
}

.tilt-2 {
  transform: rotate(1.5deg);
}

.tilt-3 {
  transform: rotate(-1deg);
}

.tilt-4 {
  transform: rotate(2.2deg);
}


/* =========================
   マスキングテープ
   ========================= */

.tape::before,
.tape::after {
  content: "";

  position: absolute;

  width: 74px;

  height: 25px;

  background:
    rgba(226,205,170,0.78);

  z-index: 5;

  pointer-events: none;
}


/* 左上＋右下 */

.tape-a::before {
  top: -10px;
  left: -18px;

  transform:
    rotate(-34deg);
}

.tape-a::after {
  right: -18px;
  bottom: 18px;

  transform:
    rotate(-34deg);
}


/* 右上＋左下 */

.tape-b::before {
  top: -10px;
  right: -18px;

  transform:
    rotate(34deg);
}

.tape-b::after {
  left: -18px;
  bottom: 18px;

  transform:
    rotate(34deg);
}


/* 上辺中央 */

.tape-c::before {
  top: -11px;
  left: 50%;

  transform:
    translateX(-50%)
    rotate(-3deg);
}

.tape-c::after {
  display: none;
}


/* =========================
   メモ
   ========================= */

.memory-note {
  grid-column: span 4;

  padding:
    26px 24px;

  background:
    #fff9e8;

  box-shadow:
    0 8px 20px
    rgba(85,60,50,0.12);

  transform:
    rotate(-2deg);

  font-family:
    "Yu Gothic",
    "Hiragino Kaku Gothic ProN",
    sans-serif;

  color: #74635c;

  line-height: 1.9;
}

.memory-note strong {
  display: block;

  margin-bottom: 8px;

  color: #98796e;

  font-size: 1.05rem;
}


/* =========================
   最後
   ========================= */

.album-ending {
  width: min(90%, 720px);

  margin:
    60px auto 0;

  padding:
    28px;

  background:
    rgba(255,255,255,0.88);

  border-radius: 22px;

  box-shadow:
    0 10px 30px
    rgba(79,60,60,0.12);

  text-align: center;

  line-height: 2;
}

.album-ending .big {
  font-size: 1.25rem;

  color: #876c67;
}


.copyright {
  margin-top: 40px;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.8;
  color: #8a7772;
}


/* =========================
   ナビ
   ========================= */

.page-nav {
  display: flex;

  gap: 14px;

  margin-top: 30px;
}

.page-nav a {
  flex: 1;

  padding:
    13px 20px;

  text-align: center;

  text-decoration: none;

  background:
    rgba(255,255,255,0.87);

  border-radius: 999px;

  box-shadow:
    0 5px 16px
    rgba(75,56,56,0.10);
}


/* =========================
   ライトボックス
   ========================= */

.lightbox {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 30px;

  background:
    rgba(21,18,22,0.90);
}

.lightbox.is-open {
  display: flex;
}

.lightbox-inner {
  position: relative;

  max-width: 95vw;

  max-height: 94vh;

  text-align: center;
}

.lightbox img {
  max-width: 92vw;

  max-height: 84vh;

  width: auto;

  height: auto;

  margin: auto;

  object-fit: contain;

  background: white;

  box-shadow:
    0 18px 60px
    rgba(0,0,0,0.45);
}

.lightbox-caption {
  margin-top: 12px;

  color: white;

  font-size: 0.95rem;

  line-height: 1.6;
}

.lightbox-close {
  position: absolute;

  top: -44px;

  right: -5px;

  width: 38px;

  height: 38px;

  border: none;

  border-radius: 50%;

  background:
    rgba(255,255,255,0.94);

  color: #54494a;

  font-size: 1.5rem;

  cursor: pointer;
}


/* =========================
   スマホ
   ========================= */

@media (max-width: 650px) {

  body {
    background-size:
      650px auto;
  }

  .page-wrap {
    width: 94%;

    padding-top: 22px;
  }

  .album-header {
    width: 100%;

    padding:
      27px 20px 24px;

    margin-bottom: 25px;
  }

  .album-board {
    padding:
      28px 16px 44px;

    border-radius: 22px;
  }

  .album-grid {
    display: block;
  }

  .photo,
  .photo.small,
  .photo.medium,
  .photo.large,
  .photo.hero,
  .main-photo {

    width:
      min(94%, 470px);

    margin:
      0 auto 36px;

    transform:
      rotate(0deg);
  }

  .memory-note {
    width:
      min(90%, 440px);

    margin:
      12px auto 38px;

    transform:
      rotate(-1deg);
  }

  .album-ending {
    width: 100%;
  }

  .page-nav {
    flex-direction: column;
  }

  .lightbox {
    padding: 14px;
  }

  .lightbox img {
    max-width: 96vw;

    max-height: 78vh;
  }

}