:root {
    --bg-color: #f7f5ee;
    --text-main: #333333;
    --text-sub: #6f6a61;
    --box-bg: #eae6db;
}

html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Roboto', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    line-height: 1.7;
}

/* ============================================================
   Base styles = mobile (smartphone) layout.
   Larger breakpoints below only ADD/override what changes.
   ============================================================ */

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 30px;
}

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    background-image: url('images/hero.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.12));
}

.hero-content {
    position: relative;
    z-index: 1;
    padding: 0 20px;
}

.hero-badge {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 1000;
    color: #fff;
    background: rgba(0, 0, 0, 0.32);
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 0.88rem;
    letter-spacing: 0.1em;
    display: block;
    text-decoration: none;
}

.hero-badge:hover,
.hero-badge:visited,
.hero-badge:active,
.hero-badge:focus {
    text-decoration: none;
    color: #fff;
}

.hero-date {
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    margin-bottom: 10px;
}

.hero-title {
    font-size: 1.5rem;
    letter-spacing: 0.18em;
    font-weight: 800;
    line-height: 1.05;
}

.intro {
    max-width: 660px;
    margin: 80px auto;
    color: var(--text-sub);
    font-size: 13pt;
    text-align: left;
    line-height: 1.8;
    padding: 0 4px;
}

.intro br {
    display: none;
}

.nav-shortcuts {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 6px;
    margin-bottom: 150px;
}

.nav-item {
    flex: 1 1 0;
    max-width: 214.37px;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    background: #fff;
    transition: transform 0.25s ease;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}

.nav-item:hover {
    transform: translateY(-5px);
}

.nav-text {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.32);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    letter-spacing: 0.12em;
    font-size: 20px;
}

.day-section {
    margin-bottom: 150px;
}

.day-header-grid {
    display: flex;
    align-items: flex-start;
    gap: 25px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 25px;
}

.day-title-box {
    background-color: var(--box-bg);
    width: 100%;
    height: auto;
    padding: 30px 26px;
    display: flex;
    align-items: stretch;
    box-sizing: border-box;
    flex: 0 0 auto;
}

.day-area {
    flex: 0 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    text-align: center;
    font-weight: 900;
    box-sizing: border-box;
    padding-top: 16px;
    margin-left: -10px;
}

.day-text {
    font-size: 1.8rem;
    letter-spacing: 0.02em;
    color: #57534c;
    line-height: 1;
    margin-top: 6px;
}

.day-num {
    font-size: 4rem;
    color: #3b3834;
    line-height: 1;
}

.content-area {
    flex: 1;
    padding-top: 16px;
    padding-left: 10px;
    min-width: 0;
}

.row {
    border-bottom: 1px solid #c7c5b9;
    padding: 8px 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-main);
}

.row.title {
    font-size: 18px;
    font-weight: 800;
    color: #3b3834;
}

.row:last-child {
    border-bottom: none;
}

.img-box {
    flex: 0 0 auto;
    overflow: hidden;
    max-width: 100%;
}

.img-box img {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* ============================================================
   DAY1 photo layout (flat structure — no .img-row wrappers).
   #day1 is a single CSS grid; each photo / text-block / title-box
   is a direct grid item placed by auto-flow + per-item column span.
   Natural aspect ratios come from the image files themselves and
   are set on each cell so photos keep their shape; align-items
   stretch + object-fit cover then level the heights within a row.
   A 10-column track grid lets each row express width ratios
   (7:3, 3:7, 6:4, 2:2:6 …) and centered widths (80%, 60%) via
   column spans / explicit start lines.
   Layouts per breakpoint (base below, 640 & 1024 further down):

     base (<640)          640+                 1024+
     day                  day                  day(5) p01(5)
     p01                  p01(7) p02(3)        p02(2) p03(2) p04(6)
     p02·p03 (small)      p03(3) p04(7)        text(6) p05(4)
     p04                  text                 p06(6) p07(4)
     text                 p05 (80% center)     p08(7) p09(3)
     p05                  p06(6) p07(4)
     p06 (60% center)     p08(7) p09(3)
     p07
     p08 (60% center)
     p09
   ============================================================ */
#day1 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
}

/* Let the header wrapper's two children (title box + p01) take part
   in #day1's grid directly. */
#day1 > .day-header-grid {
    display: contents;
}

/* Each photo keeps its natural aspect ratio; the image fills the
   cell (which may be stretched taller to match its row-mates). */
#day1 .img-box {
    width: 100%;
    height: auto;
    max-width: none;
    aspect-ratio: var(--ar, 1);
    overflow: hidden;
}

#day1 .img-box > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#day1 .img-box:has(img[src$="p01.jpg"]) { --ar: 1.4278; }
#day1 .img-box:has(img[src$="p02.jpg"]) { --ar: 0.7655; }
#day1 .img-box:has(img[src$="p03.jpg"]) { --ar: 0.4923; }
#day1 .img-box:has(img[src$="p04.jpg"]) { --ar: 1.4612; }
#day1 .img-box:has(img[src$="p05.jpg"]) { --ar: 1.4612; }
#day1 .img-box:has(img[src$="p06.jpg"]) { --ar: 1.4612; }
#day1 .img-box:has(img[src$="p07.jpg"]) { --ar: 0.9391; }
#day1 .img-box:has(img[src$="p08.jpg"]) { --ar: 1.7404; }
#day1 .img-box:has(img[src$="p09.jpg"]) { --ar: 0.9423; }

/* base spans: p01/p03 paired 8:2; p07/p09 80%-centered; the rest
   (title, p04, text, p05, p06, p08) run full width. */
#day1 .day-title-box,
#day1 .img-box:has(img[src$="p04.jpg"]),
#day1 .text-block,
#day1 .img-box:has(img[src$="p05.jpg"]),
#day1 .img-box:has(img[src$="p06.jpg"]),
#day1 .img-box:has(img[src$="p08.jpg"]) {
    grid-column: 1 / -1;
}

#day1 .img-box:has(img[src$="p01.jpg"]) { grid-column: auto / span 8; }
#day1 .img-box:has(img[src$="p03.jpg"]) { grid-column: auto / span 2; }
#day1 .img-box:has(img[src$="p07.jpg"]) { grid-column: 2 / span 8; }
#day1 .img-box:has(img[src$="p09.jpg"]) { grid-column: 2 / span 8; }

#day1 .text-block {
    min-width: 0;
}

/* ============================================================
   DAY2 (flat structure — no .img-row wrappers). Same 10-column
   grid technique as #day1: everything full width by default,
   specific items get a column span at whichever breakpoint the
   user has asked for so far.
   ============================================================ */
#day2 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
}

#day2 > .day-header-grid {
    display: contents;
}

#day2 .day-title-box,
#day2 .img-box,
#day2 .text-block {
    grid-column: 1 / -1;
}

#day2 .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A caption overlays the photo itself (regardless of width), so
   the img-box becomes the positioning context for it. */
.img-box:has(> .image-caption) {
    position: relative;
}

.image-caption {
    position: absolute;
    left: 0;
    bottom: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    padding: 8px 10px;
    background-color: rgba(234, 230, 219, 0.94);
    box-sizing: border-box;
    text-align: left;
    z-index: 2;
}

.image-caption .caption-label {
    font-size: 16px;
    margin-bottom: 4px;
}

.image-caption .caption-sub {
    font-size: 12px;
    line-height: 1.4;
}

.image-caption .caption-sub br {
    display: none;
}

#day2 .text-block {
    min-width: 0;
}

/* DAY2 base (<640): p13 60% center, p14/p16 80% center. */
#day2 .img-box:has(> img[src$="p13.jpg"]) { grid-column: 3 / span 6; }
#day2 .img-box:has(> img[src$="p14.jpg"]) { grid-column: 2 / span 8; }
#day2 .img-box:has(> img[src$="p16.jpg"]) { grid-column: 2 / span 8; }

/* ============================================================
   DAY3 (flat structure — no .img-row wrappers). Same technique
   as #day1/#day2.
   ============================================================ */
#day3 {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 25px;
    align-items: stretch;
}

#day3 > .day-header-grid {
    display: contents;
}

#day3 .day-title-box,
#day3 .img-box,
#day3 .text-block {
    grid-column: 1 / -1;
}

#day3 .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#day3 .text-block {
    min-width: 0;
}

/* DAY3 base (<640): p18/p20/p23 80% center, p21 60% center. */
#day3 .img-box:has(> img[src$="p18.jpg"]) { grid-column: 2 / span 8; }
#day3 .img-box:has(> img[src$="p20.jpg"]) { grid-column: 2 / span 8; }
#day3 .img-box:has(> img[src$="p21.jpg"]) { grid-column: 3 / span 6; }
#day3 .img-box:has(> img[src$="p23.jpg"]) { grid-column: 2 / span 8; }

.text-block {
    font-size: 15px;
    color: var(--text-main);
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 1.8;
    letter-spacing: 0.1em;
    flex: 1 1 280px;
    min-width: 280px;
    padding: 0 25px 0 25px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.text-block p {
    margin-bottom: 8px;
}

.text-block p:last-child {
    margin-bottom: 0;
}

.caption-label {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
}

.caption-sub {
    font-size: 15px;
    color: var(--text-sub);
    line-height: 1.8;
}

.site-footer {
    margin-top: 50px;
    background-color: #333333;
    color: #ffffff;
    text-align: center;
    font-size: 16px;
    padding: 50px 0;
}

/* ============================================================
   >= 640px : larger phones / phablets.
   Text sizes, hero, intro and nav scale up to their full values.
   ============================================================ */
@media (min-width: 640px) {
    .container {
        padding: 0 50px;
    }

    .hero {
        aspect-ratio: 1 / 1;
    }

    .intro {
        text-align: center;
        margin: 150px auto;
        padding: 0 12px;
    }

    .intro br {
        display: inline;
    }

    .nav-shortcuts {
        gap: 20px;
    }

    .nav-item {
        flex: 0 0 160px;
    }

    .day-area {
        flex: 0 0 140px;
        margin-left: -8px;
    }

    .day-text {
        font-size: 2.16rem;
    }

    .day-num {
        font-size: 4.8rem;
    }

    .content-area {
        padding-left: 12px;
    }

    .row {
        font-size: 16px;
    }

    .row.title {
        font-size: 20px;
    }

    /* DAY1 @640 (10-col grid):
       day / p01(7) p02(3) / p03(3) p04(7) / text / p05(80% center)
       / p06(6) p07(4) / p08(7) p09(3) */
    #day1 .day-title-box,
    #day1 .text-block {
        grid-column: 1 / -1;
    }

    #day1 .img-box:has(img[src$="p01.jpg"]) { grid-column: auto / span 7; }
    #day1 .img-box:has(img[src$="p02.jpg"]) { grid-column: auto / span 3; }
    #day1 .img-box:has(img[src$="p03.jpg"]) { grid-column: auto / span 3; }
    #day1 .img-box:has(img[src$="p04.jpg"]) { grid-column: 2 / span 8; }
    #day1 .img-box:has(img[src$="p05.jpg"]) { grid-column: 2 / span 8; }
    #day1 .img-box:has(img[src$="p06.jpg"]) { grid-column: auto / span 6; }
    #day1 .img-box:has(img[src$="p07.jpg"]) { grid-column: auto / span 4; }
    #day1 .img-box:has(img[src$="p08.jpg"]) { grid-column: auto / span 7; }
    #day1 .img-box:has(img[src$="p09.jpg"]) { grid-column: auto / span 3; }

    /* DAY2 @640: p12(7) p13(3) / p14(4) p15(6) / p16 (60% center) */
    #day2 .img-box:has(> img[src$="p12.jpg"]) { grid-column: auto / span 7; }
    #day2 .img-box:has(> img[src$="p13.jpg"]) { grid-column: auto / span 3; }
    #day2 .img-box:has(> img[src$="p14.jpg"]) { grid-column: auto / span 4; }
    #day2 .img-box:has(> img[src$="p15.jpg"]) { grid-column: auto / span 6; }
    #day2 .img-box:has(> img[src$="p16.jpg"]) { grid-column: 3 / span 6; }

    /* DAY3 @640: p18(5) p19(5) / p20(7) p21(3) */
    #day3 .img-box:has(> img[src$="p18.jpg"]) { grid-column: auto / span 5; }
    #day3 .img-box:has(> img[src$="p19.jpg"]) { grid-column: auto / span 5; }
    #day3 .img-box:has(> img[src$="p20.jpg"]) { grid-column: auto / span 7; }
    #day3 .img-box:has(> img[src$="p21.jpg"]) { grid-column: auto / span 3; }
}

/* ============================================================
   >= 1024px
   ============================================================ */
@media (min-width: 1024px) {
    /* DAY1 @1024 (10-col grid):
       day(5) p01(5) / p02(2) p03(2) p04(6) / text (own row, 80%
       width, aligned right so the empty 20% sits on the left)
       / p05(5) p06(5) / p07(3) p08(5) p09(2). */
    #day1 .day-title-box { grid-column: auto / span 5; }
    #day1 .img-box:has(img[src$="p01.jpg"]) { grid-column: auto / span 5; }
    #day1 .img-box:has(img[src$="p02.jpg"]) { grid-column: auto / span 2; }
    #day1 .img-box:has(img[src$="p03.jpg"]) { grid-column: 3 / span 2; }
    #day1 .img-box:has(img[src$="p04.jpg"]) { grid-column: auto / span 6; }

    #day1 .text-block {
        grid-column: 1 / -1;
        width: 80%;
        margin-left: auto;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
    }

    #day1 .img-box:has(img[src$="p05.jpg"]) {
        grid-column: auto / span 5;
        aspect-ratio: var(--ar, 1);
    }
    #day1 .img-box:has(img[src$="p06.jpg"]) { grid-column: auto / span 5; }
    #day1 .img-box:has(img[src$="p07.jpg"]) { grid-column: auto / span 3; }
    #day1 .img-box:has(img[src$="p08.jpg"]) { grid-column: auto / span 5; }
    #day1 .img-box:has(img[src$="p09.jpg"]) { grid-column: auto / span 2; }
}

/* ============================================================
   >= 1024px (legacy day2/day3 editorial grid — day1 handled above)
   ============================================================ */
@media (min-width: 1024px) {
    .hero {
        aspect-ratio: 4 / 3;
    }

    .hero-date {
        font-size: 1.425rem;
    }

    .hero-title {
        font-size: 2.25rem;
    }

    /* Day header: from here on, lay the photo out beside the title
       box instead of stacking it below. The 591:564 split is done
       with flex-grow weights (basis 0) rather than fixed widths, so
       both panels shrink together, in proportion, whenever the
       viewport is narrower than the container's own 1280px cap —
       and settle back to exactly 591/564px once the container hits
       that cap (i.e. from 1280px up), with no extra breakpoint needed. */
    .day-header-grid {
        flex-wrap: nowrap;
        align-items: stretch;
    }

    .day-title-box {
        flex: 591 0 0px;
        width: auto;
        min-width: 0;
        height: auto;
    }

    .day-header-grid .img-box {
        flex: 564 0 0px;
    }

    .day-header-grid .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* DAY2 header: title box + p11, 5:5 (matches the old 591:564
       flex-grow split, which no longer applies now that
       .day-header-grid is display:contents inside #day2's grid). */
    #day2 .day-title-box { grid-column: auto / span 5; }
    #day2 .img-box:has(img[src$="p11.jpg"]) { grid-column: auto / span 5; }

    #day2 .img-box:has(img[src$="p11.jpg"]) img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* DAY2: text-block (p11's paragraph) + p10 photo, 6:4 split. */
    #day2 .text-block {
        grid-column: auto / span 6;
        padding-left: 0;
        padding-right: 0;
    }

    #day2 .img-box:has(img[src$="p10.jpg"]) {
        grid-column: auto / span 4;
        width: auto;
        height: auto;
    }

    #day2 .img-box:has(img[src$="p10.jpg"]) img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* DAY2 @1024/1280: p12(4) p13(2) p14(4) / p15(6) p16(4). */
    #day2 .img-box:has(> img[src$="p12.jpg"]) { grid-column: auto / span 4; }
    #day2 .img-box:has(> img[src$="p13.jpg"]) { grid-column: auto / span 2; }
    #day2 .img-box:has(> img[src$="p14.jpg"]) { grid-column: auto / span 4; }
    #day2 .img-box:has(> img[src$="p15.jpg"]) { grid-column: auto / span 6; }
    #day2 .img-box:has(> img[src$="p16.jpg"]) { grid-column: auto / span 4; }

    /* DAY3 header: title box + p17, 5:5 (same fix as day1/day2 —
       display:contents on .day-header-grid drops the old 591:564
       flex split, so it's replaced with an explicit grid span).
       Every row from here on is placed with an explicit grid-row
       too, since p19 needs to sit left of text-block despite
       coming after it in the HTML — mixing an explicit-column /
       auto-row item (text-block) with another explicit-column item
       (p19) let the auto-placement cursor push them onto different
       rows, so row numbers are pinned everywhere for consistency. */
    #day3 .day-title-box { grid-row: 1; grid-column: auto / span 5; }
    #day3 .img-box:has(img[src$="p17.jpg"]) { grid-row: 1; grid-column: auto / span 5; }

    #day3 .img-box:has(img[src$="p17.jpg"]) img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* @1024/1280: p19(4, left) text(6, right) / p18(5) p20(5)
       / p21(2) p22(5) p23(3) / p24. */
    #day3 .img-box:has(> img[src$="p19.jpg"]) { grid-row: 2; grid-column: 1 / span 4; }
    #day3 .text-block {
        grid-row: 2;
        grid-column: 5 / span 6;
        padding-left: 0;
        padding-right: 0;
    }
    #day3 .img-box:has(> img[src$="p18.jpg"]) { grid-row: 3; grid-column: auto / span 5; }
    #day3 .img-box:has(> img[src$="p20.jpg"]) { grid-row: 3; grid-column: auto / span 5; }
    #day3 .img-box:has(> img[src$="p21.jpg"]) { grid-row: 4; grid-column: auto / span 2; }
    #day3 .img-box:has(> img[src$="p22.jpg"]) { grid-row: 4; grid-column: auto / span 5; }
    #day3 .img-box:has(> img[src$="p23.jpg"]) { grid-row: 4; grid-column: auto / span 3; }
    #day3 .img-box:has(> img[src$="p24.jpg"]) { grid-row: 5; }
}

/* ============================================================
   >= 1280px : the full fixed-pixel editorial grid.
   The widest row in the page (day2/day3's photo+caption row) needs
   ~1214px of content width; with the container's 2x50px padding
   that's ~1314px. At exactly 1280px there's a ~34px shortfall, so
   that row alone may still wrap right at this boundary.
   ============================================================ */
@media (min-width: 1280px) {
    .hero {
        aspect-ratio: 16 / 9;
    }
}