:root{--bg-color: #f4f9f9;--text-primary: #4a5568;--text-secondary: #718096;--text-note: #4a5568;--accent: #63b3ed;--card-bg: #ffffff;--timeline-color: #e2e8f0;--progress-color: #90cdf4}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-color);background-image:linear-gradient(120deg,#e0f2fe,#f0f9ff,#f4f9f9);background-attachment:fixed;color:var(--text-primary);font-family:"Noto Serif JP",serif;overflow-x:hidden;line-height:1.8}body.no-scroll{overflow:hidden}.intro-screen{position:fixed;top:-10vh;left:0;width:100vw;height:120vh;background-color:var(--bg-color);background-image:linear-gradient(120deg,#e0f2fe,#f0f9ff,#f4f9f9);z-index:1000;display:flex;justify-content:center;align-items:center;transition:transform .8s cubic-bezier(.7,0,.3,1),opacity .8s ease;cursor:pointer}.intro-screen.hidden-up{transform:translateY(-100%)}.intro-content{text-align:center}.intro-title{font-size:clamp(1.8rem,4vw,3.5rem);font-weight:500;color:var(--text-primary);letter-spacing:.1em;transition:opacity .5s ease}.intro-title span{display:inline-block}.intro-title.loading span{animation:gentleBounce 1.5s infinite ease-in-out}.intro-title.loading span:nth-child(1){animation-delay:0s}.intro-title.loading span:nth-child(2){animation-delay:.1s}.intro-title.loading span:nth-child(3){animation-delay:.2s}.intro-title.loading span:nth-child(4){animation-delay:.3s}.intro-title.loading span:nth-child(5){animation-delay:.4s}.intro-title.loading span:nth-child(6){animation-delay:.5s}.intro-title.loading span:nth-child(7){animation-delay:.6s}.intro-title.loading span:nth-child(8){animation-delay:.7s}@keyframes gentleBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.scroll-indicator{margin-top:50px;display:flex;flex-direction:column;align-items:center;gap:15px;font-size:.9rem;color:var(--text-secondary);letter-spacing:2px;opacity:1;transition:opacity .5s ease}.scroll-indicator.hidden{opacity:0;pointer-events:none}.arrow{width:1px;height:40px;background:linear-gradient(to bottom,transparent,var(--text-secondary));animation:scrollDown 1.5s infinite}@keyframes scrollDown{0%{transform:scaleY(0);transform-origin:top;opacity:1}50%{transform:scaleY(1);transform-origin:top;opacity:1}50.1%{transform:scaleY(1);transform-origin:bottom;opacity:1}to{transform:scaleY(0);transform-origin:bottom;opacity:0}}.gallery-container{max-width:1000px;margin:0 auto;padding:60px 20px 100px;position:relative}.timeline-line{position:absolute;left:50%;top:60px;bottom:0;width:2px;background:var(--timeline-color);transform:translate(-50%);z-index:1}.year-section{position:relative;margin-bottom:100px;width:100%}.year-marker-container{display:flex;justify-content:center;position:sticky;top:40px;z-index:10;pointer-events:none;margin-bottom:60px}.year-marker{background:#ffffffd9;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.5);padding:8px 32px;border-radius:40px;font-size:1.5rem;font-weight:500;color:var(--accent);letter-spacing:2px;box-shadow:0 4px 20px #90cdf426;transition:all .5s ease}.month-section{position:relative;width:100%}.month-marker-container{display:flex;justify-content:center;position:sticky;top:120px;z-index:9;pointer-events:none;margin-bottom:30px}.month-marker{background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(99,179,237,.4);color:var(--text-primary);padding:4px 20px;border-radius:20px;font-size:1.1rem;font-weight:500;box-shadow:0 2px 10px #63b3ed1a;letter-spacing:1px}.day-section{position:relative;width:100%}.day-marker-container{display:flex;justify-content:center;position:sticky;top:175px;z-index:8;pointer-events:none;margin-bottom:50px}.day-marker{background:#fffffff2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(99,179,237,.3);color:var(--text-secondary);padding:2px 16px;border-radius:15px;font-size:.9rem;font-weight:400;box-shadow:0 2px 8px #63b3ed0d;letter-spacing:1px}.photos-grid{display:grid;grid-template-columns:1fr;gap:80px;position:relative;z-index:5}.photo-item{display:flex;width:100%;justify-content:space-between;align-items:center;opacity:0;transform:translateY(40px);transition:all 1s cubic-bezier(.2,.8,.2,1)}.photo-item.visible{opacity:1;transform:translateY(0)}@media (min-width: 768px){.photo-item:nth-child(odd){flex-direction:row}.photo-item:nth-child(2n){flex-direction:row-reverse}.photo-card-wrapper{width:50%}.photo-info{width:40%;text-align:left;padding:0 30px}.photo-item:nth-child(2n) .photo-info{text-align:right}}.photo-card-wrapper{background:var(--card-bg);padding:15px 15px 40px;border-radius:4px;box-shadow:0 10px 30px #0000000d,0 1px 3px #00000005;position:relative;transform:rotate(0);transition:transform .5s ease,box-shadow .5s ease}.photo-item:nth-child(odd) .photo-card-wrapper:hover{transform:rotate(-1.5deg) scale(1.02);box-shadow:0 15px 40px #00000014}.photo-item:nth-child(2n) .photo-card-wrapper:hover{transform:rotate(1.5deg) scale(1.02);box-shadow:0 15px 40px #00000014}.photo-image-box{position:relative;overflow:hidden;width:100%}.photo-image-box img{display:block;width:100%;height:auto;transition:transform 3s ease}.photo-card-wrapper:hover .photo-image-box img{transform:scale(1.05)}.photo-note{font-size:1.1rem;color:var(--text-note);line-height:2;font-weight:300;letter-spacing:.05em;position:relative}.connector-line{display:none}@media (min-width: 768px){.connector-line{display:block;height:1px;width:40px;background-color:var(--timeline-color);margin:20px 0}.photo-item:nth-child(2n) .connector-line{margin-left:auto;margin-right:0}}@media (max-width: 767px){.gallery-container{padding-top:40px}.timeline-line{left:30px}.year-marker-container{justify-content:flex-start;padding-left:5px}.year-marker{font-size:1.2rem;padding:5px 20px}.photo-item{flex-direction:column;align-items:flex-start;padding-left:60px;gap:20px}.photo-card-wrapper{width:100%;padding:10px 10px 30px}.photo-info{width:100%;text-align:left}.month-marker-container,.day-marker-container{justify-content:flex-start;padding-left:15px}}footer{text-align:center;padding:60px 20px;color:var(--text-secondary);font-size:.9rem;font-weight:300;letter-spacing:.1em}
