@charset "utf-8";
/* ============================================================
   DayFlow（ある一日の流れ・横スクロール）— 採用ページと共通
   ============================================================ */
.dayflow { background:linear-gradient(180deg,#12233b 0%,#16304f 100%); --accent:#ff8a3d; --gold:#ffd27a; }
.dayflow * { box-sizing:border-box; }
.df-wrap { position:relative; height:520vh; }
.df-sticky { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; flex-direction:column; color:#eaf1fb;
  font-family:"Noto Sans JP","Yu Gothic",YuGothic,"Hiragino Kaku Gothic ProN",sans-serif; }
.df-top { padding:26px 22px 6px; text-align:center; flex:none; }
.df-eb { font-size:11.5px; letter-spacing:.28em; color:var(--accent); font-weight:700; margin:0; }
.df-h2 { font-size:clamp(20px,3vw,30px); font-weight:800; margin:8px 0 0; color:#fff; }
.df-toggle { display:inline-flex; gap:4px; margin-top:16px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:40px; padding:4px; }
.df-toggle button { border:0; background:transparent; color:#9db4d0; font-weight:700; font-size:13px; padding:7px 18px; border-radius:30px; cursor:pointer; font-family:inherit; transition:.2s; }
.df-toggle button.on { background:var(--accent); color:#1a0d03; }
.df-toggle button:not(.on) { color:var(--gold); animation:df-pulse 2.2s ease-in-out infinite; }
@keyframes df-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(255,210,122,0); opacity:.75; } 50% { box-shadow:0 0 0 3px rgba(255,210,122,.45); opacity:1; } }
.df-trackwrap { flex:1; display:flex; align-items:center; overflow:hidden; }
.df-track { display:flex; gap:20px; padding:0 max(22px,6vw); will-change:transform; }
.df-card { flex:0 0 330px; background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.14); border-radius:16px; overflow:hidden; }
.df-card.rest { opacity:.72; }
.df-ph { position:relative; height:230px; background:repeating-linear-gradient(45deg,rgba(22,74,132,.10) 0 12px,rgba(22,74,132,.03) 12px 24px),linear-gradient(135deg,#1a4c86,#0e3057); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:#cfe0f4; }
.df-ph .fake { position:absolute; top:10px; left:10px; font-size:10px; background:rgba(0,0,0,.4); color:var(--gold); border-radius:5px; padding:2px 7px; }
.df-ph .cam { font-size:26px; }
.df-ph .cap { font-size:12px; }
.df-body { padding:16px 18px 20px; }
.df-tag { display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; color:var(--accent); border:1px solid rgba(255,138,61,.4); border-radius:5px; padding:1px 7px; margin-bottom:6px; }
.df-time { font-family:"Helvetica Neue",Arial,sans-serif; font-size:20px; font-weight:800; color:var(--gold); }
.df-act { font-size:16px; font-weight:800; color:#fff; margin:2px 0 8px; }
.df-desc { font-size:13px; color:#9db4d0; line-height:1.7; margin:0; }
.df-prog { flex:none; padding:10px 22px 18px; }
.df-bar { height:3px; background:rgba(255,255,255,.15); border-radius:3px; max-width:520px; margin:0 auto; position:relative; }
.df-fill { height:100%; background:var(--accent); border-radius:3px; width:0; }
.df-lab { display:flex; justify-content:space-between; max-width:520px; margin:8px auto 0; font-size:11px; color:#9db4d0; letter-spacing:.14em; }
.df-facts { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; margin-top:14px; font-size:12px; color:#9db4d0; }
.df-facts b { color:var(--gold); }
.df-hint { text-align:center; color:#9db4d0; font-size:12px; letter-spacing:.16em; padding:6px; margin:0; }
@media (max-width:760px),(prefers-reduced-motion:reduce) {
  .df-wrap { height:auto; }
  .df-sticky { position:static; height:auto; padding-bottom:24px; }
  .df-trackwrap { overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .df-track { transform:none !important; }
  .df-card { scroll-snap-align:center; flex-basis:78vw; }
  .df-prog { display:none; }
}

.df-ph .df-photo { width:100%; height:100%; object-fit:cover; display:block; }