/* --- 特集コレクション・トップ拡張の共通スタイル --- */

/* パンくず */
.breadcrumb { padding:26px 0 0; }
.breadcrumb ol { display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; font-size:.78rem; color:#607177; }
.breadcrumb li { display:flex; gap:6px; align-items:center; }
.breadcrumb li + li::before { content:">"; opacity:.6; }
.breadcrumb a { border-bottom:1px solid transparent; }
.breadcrumb a:hover { border-color:var(--ink); }
.breadcrumb a:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* 特集ページ本体 */
.collection { width:min(1120px,90vw); margin:0 auto; padding:0 0 100px; }
.collection-hero { position:relative; margin-top:22px; padding:clamp(46px,7vw,90px) clamp(24px,5vw,64px); color:#fff; overflow:hidden; background:var(--night); }
.collection-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(8,20,25,.15),rgba(8,20,25,0) 55%); pointer-events:none; }
.collection-hero h1 { position:relative; z-index:1; margin:0; font-family:Georgia,"Hiragino Mincho ProN",serif; font-size:clamp(2rem,5vw,3.6rem); font-weight:400; line-height:1.35; }
.collection-hero .section-kicker { position:relative; z-index:1; color:var(--gold); }
.collection-lead { position:relative; z-index:1; max-width:640px; margin:18px 0 0; font-size:1.02rem; line-height:1.9; }
.hero-solo { background:linear-gradient(135deg,#23363d,#53715c); }
.hero-couple { background:linear-gradient(135deg,#9f4e39,#e5a34a); }
.hero-couple { background-image:linear-gradient(110deg,rgba(12,24,29,.72),rgba(12,24,29,.14)),url("travel-scenes-grid-v1.png"); background-size:cover,300% 300%; background-position:center,50% 50%; }
.collection-hero .visual-note { position:absolute; z-index:2; right:16px; bottom:12px; margin:0; padding:2px 9px; background:rgba(16,32,39,.78); color:#fff; font-size:.68rem; line-height:1.7; }
.hero-family23 { background:linear-gradient(135deg,#6d8065,#a9c3b4); }
.hero-family4 { background:linear-gradient(135deg,#29454c,#95bab6); }
.hero-threegen { background:linear-gradient(135deg,#23363d,#b35b42); }
.hero-pet { background:linear-gradient(135deg,#53715c,#c9b98a); }
.hero-season { background:linear-gradient(135deg,#5f8187,#dce8e6); }
.hero-onenight { background:linear-gradient(135deg,#102027,#9bbcc2); }

.collection-section { padding:56px 0 0; }
.collection-section > h2 { margin:0 0 18px; font-family:Georgia,"Hiragino Mincho ProN",serif; font-size:clamp(1.5rem,3vw,2rem); font-weight:400; line-height:1.4; }
.collection-section .section-kicker { margin-bottom:8px; }

.check-list { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:0; padding:0; list-style:none; counter-reset:check; }
.check-list li { counter-increment:check; background:#fff; border:1px solid var(--line); padding:20px 22px 20px 58px; position:relative; }
.check-list li::before { content:counter(check,decimal-leading-zero); position:absolute; left:20px; top:20px; font-family:Georgia,serif; font-size:1.25rem; color:var(--gold); }
.check-list h3 { margin:0 0 6px; font-size:1rem; font-weight:700; }
.check-list p { margin:0; font-size:.88rem; line-height:1.75; color:#52646a; }

.who-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.who-list li { background:#edf2ee; padding:16px 20px; font-size:.92rem; line-height:1.8; }

.flow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.flow-card { background:#fff; border:1px solid var(--line); padding:22px; }
.flow-card .flow-time { display:inline-block; margin-bottom:10px; padding:2px 12px; background:var(--night); color:#f5d199; font-size:.72rem; font-weight:700; letter-spacing:.14em; }
.flow-card h3 { margin:0 0 8px; font-size:1rem; font-weight:700; }
.flow-card p { margin:0; font-size:.88rem; line-height:1.75; color:#52646a; }

/* 実在宿エリア */
.hotel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.hotel-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); }
.hotel-card img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.hotel-card-body { display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1; }
.hotel-card h3 { margin:0; font-family:Georgia,"Hiragino Mincho ProN",serif; font-size:1.12rem; font-weight:400; line-height:1.5; }
.hotel-card .hotel-meta { margin:0; color:#75888d; font-size:.78rem; }
.hotel-card .hotel-desc { margin:0; color:#52646a; font-size:.86rem; line-height:1.6; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.hotel-card .hotel-link { margin-top:auto; align-self:flex-start; font-weight:700; font-size:.86rem; color:#8b421f; text-decoration:underline; text-underline-offset:4px; }
.hotel-card .hotel-link:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.preparing { margin:0; padding:26px 20px; background:#edf2ee; color:#52646a; font-size:.92rem; }
.data-note { margin:12px 0 0; color:#607177; font-size:.78rem; }

.collection-cta { margin-top:56px; padding:40px clamp(22px,4vw,48px); background:var(--night); color:#ecf2ef; display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:space-between; }
.collection-cta p { margin:0; font-size:.95rem; }
.collection-cta .button { color:#fff; }
.collection-cta .button:hover { background:#fff; color:var(--ink); }
.collection-cta .button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

.collection-notes { margin-top:34px; padding-top:22px; border-top:1px solid var(--line); }
.collection-notes p { margin:8px 0 0; font-size:.78rem; color:#607177; }

/* --- トップ:編集部のおすすめ特集 --- */
.collections { padding:80px 0; border-top:1px solid var(--line); }
.collection-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.collection-card { position:relative; display:flex; aspect-ratio:4/3; flex-direction:column; justify-content:flex-end; padding:18px 20px; border:1px solid var(--paper); color:inherit; transition:transform .2s; }
.collection-card:hover { transform:translateY(-4px); }
.collection-card:focus-visible { outline:3px solid var(--gold); outline-offset:2px; }
.collection-card .card-kicker { position:relative; z-index:1; margin:0 0 6px; font-size:.68rem; font-weight:700; letter-spacing:.14em; opacity:.85; }
.collection-card h3 { position:relative; z-index:1; margin:0; font-family:Georgia,"Hiragino Mincho ProN",serif; font-size:1.2rem; font-weight:400; line-height:1.45; }
.collection-card .card-note { position:relative; z-index:1; margin:6px 0 0; font-size:.76rem; line-height:1.6; opacity:.9; }
.col-solo { background:linear-gradient(135deg,#23363d,#53715c); color:#fff; }
.col-couple { background:linear-gradient(135deg,#9f4e39,#e5a34a); color:#fff; }
.col-family23 { background:linear-gradient(135deg,#6d8065,#a9c3b4); color:#17282f; }
.col-family4 { background:linear-gradient(135deg,#29454c,#95bab6); color:#fff; }
.col-threegen { background:linear-gradient(135deg,#23363d,#b35b42); color:#fff; }
.col-pet { background:linear-gradient(135deg,#53715c,#c9b98a); color:#fff; }
.col-season { background:linear-gradient(135deg,#5f8187,#dce8e6); color:#17282f; }
.col-onenight { background:linear-gradient(135deg,#102027,#9bbcc2); color:#fff; }
.col-onsen { background:linear-gradient(135deg,#6e3d32,#d99a5a); color:#fff; }

/* おすすめ特集を写真主体に。9分割写真シートの各セルを背景として使用 */
.collection-card { isolation:isolate; background-image:linear-gradient(180deg,rgba(8,20,25,.04) 8%,rgba(8,20,25,.2) 42%,rgba(8,20,25,.84) 100%),url("travel-scenes-grid-v1.png"); background-size:cover,300% 300%; background-repeat:no-repeat; background-position:center,0 0; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.35); }
.col-solo { background-position:center,0 0; }
.col-couple { background-position:center,50% 50%; }
.col-family23 { background-position:center,0 100%; }
.col-family4 { background-position:center,0 100%; }
.col-threegen { background-position:center,100% 0; }
.col-pet { background-position:center,50% 100%; }
.col-season { background-position:center,0 50%; }
.col-onenight { background-position:center,50% 0; }
.col-onsen { background-position:center,50% 0; }
.col-gourmet { background-position:center,100% 50%; }
.col-pray { background-position:center,100% 100%; }

/* 特集カードの写真をテーマごとに分け、同じ写真の繰り返しを避ける */
.collection-card.col-family23 { background-image:linear-gradient(180deg,rgba(8,20,25,.04) 8%,rgba(8,20,25,.2) 42%,rgba(8,20,25,.84) 100%),url("travel-scenes-sheet.png"); background-size:cover,300% 200%; background-position:center,0 100%; }
.collection-card.col-family4 { background-image:linear-gradient(180deg,rgba(8,20,25,.04) 8%,rgba(8,20,25,.2) 42%,rgba(8,20,25,.84) 100%),url("travel-scenes-sheet.png"); background-size:cover,300% 200%; background-position:center,100% 0; }
.collection-card.col-season { background-image:linear-gradient(180deg,rgba(8,20,25,.04) 8%,rgba(8,20,25,.2) 42%,rgba(8,20,25,.84) 100%),url("seasonal-scenes-v1.png"); background-size:cover,300% 200%; background-position:center,50% 0; }
.collection-card.col-onenight { background-image:linear-gradient(180deg,rgba(8,20,25,.04) 8%,rgba(8,20,25,.2) 42%,rgba(8,20,25,.84) 100%),url("travel-scenes-sheet.png"); background-size:cover,300% 200%; background-position:center,100% 100%; }
.collection-card.col-onsen { background-image:linear-gradient(180deg,rgba(8,20,25,.04) 8%,rgba(8,20,25,.2) 42%,rgba(8,20,25,.84) 100%),url("hero-onsen.png"); background-size:cover,cover; background-position:center,center; }
.collection-card.col-gourmet { background-image:linear-gradient(180deg,rgba(8,20,25,.04) 8%,rgba(8,20,25,.2) 42%,rgba(8,20,25,.84) 100%),url("regional-gourmet-v1.png"); background-size:cover,300% 200%; background-position:center,0 100%; }

/* --- トップ:60秒で旅気分 --- */
.media-strip-section { padding:80px 0; border-top:1px solid var(--line); }
.strip-outer { position:relative; }
.strip { display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; padding:4px; margin:0; list-style:none; scrollbar-width:thin; }
.strip li { flex:0 0 auto; scroll-snap-align:start; }
.strip-card { position:relative; width:clamp(180px,52vw,230px); aspect-ratio:9/16; overflow:hidden; }
.strip-link { position:absolute; inset:0; z-index:2; display:block; color:inherit; }
.strip-link[hidden] { display:none; }
.strip-link:focus-visible { outline:3px solid var(--gold); outline-offset:-5px; }
.strip-link:hover { background:rgba(8,20,25,.05); }
.strip-overlay { pointer-events:none; }
.strip-visual { position:absolute; inset:-8%; background-repeat:no-repeat; animation:strip-pan 10s ease-in-out infinite alternate; }
.strip-card:nth-child(2n) .strip-visual { animation-duration:12s; }
.strip-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; color:#fff; background:linear-gradient(180deg,rgba(8,20,25,.05) 40%,rgba(8,20,25,.72)); }
.strip-overlay .strip-label { margin:0; font-family:Georgia,"Hiragino Mincho ProN",serif; font-size:1.05rem; }
.strip-badge { position:absolute; top:14px; left:14px; display:flex; gap:8px; align-items:center; }
.strip-play { width:30px; height:30px; border:1px solid rgba(255,255,255,.85); border-radius:50%; display:grid; place-items:center; }
.strip-play::before { content:""; border-style:solid; border-width:5px 0 5px 8px; border-color:transparent transparent transparent #fff; margin-left:2px; }
.strip-status { padding:2px 8px; background:rgba(8,20,25,.66); font-size:.62rem; letter-spacing:.08em; white-space:nowrap; }
.snow { background:linear-gradient(160deg,#b8ccd4,#eef4f6 45%,#8fa8b5); }
.sea { background:linear-gradient(160deg,#9fc3cf,#e8e2cf 55%,#7fa9b8); }
.forest { background:linear-gradient(160deg,#3d5a46,#6d8065 50%,#2f4636); }
.familytime { background:linear-gradient(160deg,#b35b42,#e5a34a 55%,#9f4e39); }
.dogwalk { background:linear-gradient(160deg,#53715c,#a9c3b4 55%,#5f7d68); }
.strip-actions { display:flex; gap:10px; margin-top:14px; }
.strip-button { padding:9px 18px; border:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:.84rem; font-weight:700; cursor:pointer; }
.strip-button:hover:not(:disabled) { background:var(--night); color:#fff; }
.strip-button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.strip-button:disabled { opacity:.4; cursor:default; }
@keyframes strip-pan { from { transform:scale(1) translate(0,0); } to { transform:scale(1.12) translate(-2%,2%); } }
@media (prefers-reduced-motion:reduce) { .strip-visual { animation:none; } .collection-card:hover { transform:none; } }

/* --- トップ:人数・エリアから選ぶ --- */
.quick-section { margin-top:18px; margin-bottom:48px; padding:26px; border:1px solid rgba(43,87,80,.16); border-radius:18px; background:linear-gradient(140deg,#edf3ef,#f4eee4); box-shadow:0 8px 24px rgba(16,32,39,.045); }
.quick-section > .section-heading { margin:0 0 14px; }
.quick-section .section-heading h2 { font-size:clamp(1.4rem,2.3vw,1.8rem); }
.quick-section .area-heading { margin:36px 0 14px; padding-top:24px; border-top:1px solid rgba(43,87,80,.18); }
.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.area-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.quick-button { min-width:0; min-height:66px; display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid rgba(23,40,47,.12); border-radius:12px; background:rgba(255,255,255,.88); color:var(--ink); font:inherit; font-size:.94rem; font-weight:700; cursor:pointer; text-align:left; box-shadow:0 3px 10px rgba(16,32,39,.045); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background-color .18s ease; }
.quick-choice-icon { flex:0 0 36px; width:36px; height:36px; padding:6px; border-radius:11px; background:#e2efea; color:#39786f; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.quick-grid .quick-button:nth-child(2n) .quick-choice-icon { background:#f6e8e1; color:#a85c42; }
.quick-grid .quick-button:nth-child(3n) .quick-choice-icon { background:#e9edf7; color:#5b7198; }
.quick-grid .quick-button:nth-child(4n) .quick-choice-icon { background:#edf0dd; color:#66824c; }
.area-grid .quick-button:nth-child(2n) .quick-choice-icon { background:#f5ead5; color:#a67835; }
.area-grid .quick-button:nth-child(3n) .quick-choice-icon { background:#e4edf2; color:#557e91; }
.quick-button:hover { transform:translateY(-2px); border-color:#8da89d; background:#fff; box-shadow:0 7px 16px rgba(16,32,39,.09); }
.quick-button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.quick-hint { margin:16px 0 0; color:#607177; font-size:.8rem; }
.hotel-card-main-link { display:flex; flex:1; min-width:0; flex-direction:column; color:inherit; text-decoration:none; }
.hotel-card-main-link:focus-visible { outline:3px solid var(--gold); outline-offset:-3px; }
.hotel-card-main-link:hover h3 { text-decoration:underline; text-underline-offset:3px; }
@media (prefers-reduced-motion:reduce) { .quick-button { transition:none; } .quick-button:hover { transform:none; } }

@media (max-width:900px) {
  .collection-grid { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px) {
  .quick-section { padding:18px; }
  .check-list { grid-template-columns:1fr; }
  .flow-grid { grid-template-columns:1fr; }
  .quick-grid { grid-template-columns:repeat(2,1fr); }
  .area-grid { grid-template-columns:repeat(2,1fr); }
  .collection-hero { margin-top:16px; }
}
@media (max-width:480px) {
  .collection-grid { grid-template-columns:1fr; }
}
/* 画像スプライトは元の縦横比を保ち、カード窓で中央を切り抜く(変形させない)。
   9:16カードに対し、sheet(3列×2行)は高さ200%、grid(3列×3行)は高さ300%。 */
.strip-visual { background-image:url("travel-scenes-grid-v1.png"); background-size:auto 300%; }
.strip-visual.snow { background-image:url("travel-scenes-sheet.png"); background-size:auto 200%; background-position:50% 0; }
.strip-visual.sea { background-image:url("travel-scenes-sheet.png"); background-size:auto 200%; background-position:96% 100%; }
.strip-visual.forest { background-image:url("travel-scenes-sheet.png"); background-size:auto 200%; background-position:4% 0; }
.strip-visual.familytime { background-image:url("travel-scenes-sheet.png"); background-size:auto 200%; background-position:4% 100%; }
.strip-visual.dogwalk { background-image:url("travel-scenes-sheet.png"); background-size:auto 200%; background-position:50% 100%; }
.strip-visual.autumn { background-position:12% 50%; }
.strip-visual.cherry { background-position:50% 50%; }
.strip-visual.gourmet { background-position:88% 50%; }
.strip-visual.shrine { background-position:88% 100%; }

/* トップの「写真から旅先を選ぶ」:具体名を短く見せる小型2段カード */
.media-strip-section { padding:34px 0 42px; }
.media-strip-section .section-heading { margin-bottom:14px; }
.media-strip-section .section-kicker { margin-bottom:4px; }
.media-strip-section .section-heading h2 { font-size:clamp(1.25rem,2vw,1.65rem); }
.strip-destinations { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; overflow:visible; padding:2px; }
.strip-destinations li { min-width:0; }
.strip-destinations .strip-card { width:100%; aspect-ratio:2.35 / 1; border-radius:10px; box-shadow:0 3px 10px rgba(16,32,39,.09); }
.strip-destinations .strip-visual { inset:0; animation:none; background-size:cover; background-position:center; }
.strip-destinations .strip-visual.snow { background-image:url("spot-kusatsu-generated.jpg"); }
.strip-destinations .strip-visual.sea { background-image:url("spot-atami-generated.jpg"); }
.strip-destinations .strip-visual.forest { background-image:url("spot-arashiyama-generated.jpg"); }
.strip-destinations .strip-visual.familytime { background-image:url("spot-kouri-generated.jpg"); }
.strip-destinations .strip-visual.dogwalk { background-image:url("spot-hakone-generated.jpg"); }
.media-strip-section .strip-actions { display:none; }
.strip-destinations .strip-overlay { justify-content:flex-end; padding:8px 10px; background:linear-gradient(180deg,rgba(8,20,25,0) 20%,rgba(8,20,25,.67)); }
.strip-destinations .strip-image-note { position:absolute; top:7px; right:8px; padding:2px 5px; border-radius:3px; color:#fff; background:rgba(8,20,25,.5); font-size:.58rem; line-height:1.2; letter-spacing:.02em; }
.strip-destinations .strip-overlay .strip-label { font-family:inherit; font-size:.88rem; font-weight:750; line-height:1.25; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.strip-destinations .strip-link:hover { background:rgba(8,20,25,.09); }
@media(max-width:900px) { .strip-destinations { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:560px) { .media-strip-section { padding:28px 0 34px; } .strip-destinations { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .strip-destinations .strip-card { aspect-ratio:2.15 / 1; } .strip-destinations .strip-overlay { padding:7px 8px; } .strip-destinations .strip-overlay .strip-label { font-size:.8rem; } }

/* --- 旅の風景:動画カード(data-video-src があるカードのみ有効) ---
   素材が無いカードは上記 PHOTO STORY のスタイルのまま。 */
.strip-video { position:absolute; z-index:1; inset:0; width:100%; height:100%; object-fit:cover; background:#102027; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.strip-card.is-video .strip-visual { z-index:2; display:block; transition:opacity .2s ease; }
.strip-card.is-video.is-playing .strip-visual { opacity:0; }
.strip-card.is-video.is-playing .strip-video { opacity:1; pointer-events:auto; }
.strip-card.is-video.is-playing .strip-visual { pointer-events:none; }
.strip-card.is-video .strip-overlay { z-index:3; pointer-events:none; }
.strip-video-play { position:absolute; z-index:4; right:8px; bottom:8px; width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(8,20,25,.4); cursor:pointer; padding:0; }
.strip-video-play[hidden] { display:none; }
.strip-video-play::after { content:""; position:absolute; inset:0; }
.strip-video-play .strip-play { width:26px; height:26px; border-width:1px; background:rgba(8,20,25,.55); z-index:1; }
.strip-video-play .strip-play::before { border-width:5px 0 5px 8px; margin-left:2px; }
.strip-video-play:focus-visible { outline:2px solid var(--gold); outline-offset:-3px; }
.strip-card.is-playing .strip-overlay { background:linear-gradient(180deg,rgba(8,20,25,0) 60%,rgba(8,20,25,.55)); }
@media (prefers-reduced-motion:reduce) { .strip-video, .strip-card.is-video .strip-visual { transition:none; } .strip-video-play { background:rgba(8,20,25,.32); } }