/*
  top.css
  「トップ」ページ固有スタイル（お知らせスライドショー／お知らせ・会員専用リスト／航路案内）
  共通スタイルは css/common.css を参照。
*/

/* ---- ヒーロー：地図スライドショー＋注目お知らせ ---- */
.hero-wrap{display:flex;gap:18px;margin:20px 0 26px;flex-wrap:wrap;}

.hero-slideshow{
  flex:3;min-width:280px;position:relative;border-radius:var(--r-md);min-height:270px;overflow:hidden;
  background:#F9F8F3;border:1px solid var(--line);
}
.hero-slides{position:relative;width:100%;height:100%;min-height:270px;}
.hero-slide{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .5s ease;pointer-events:none;padding:22px;
}
.hero-slide.is-active{opacity:1;pointer-events:auto;}
.hero-slide img{width:100%;height:100%;object-fit:contain;}

.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.92);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.15);transition:.15s;
}
.hero-arrow:hover{background:#fff;}
.hero-arrow svg{width:16px;height:16px;}
.hero-arrow-prev{left:14px;}
.hero-arrow-next{right:14px;}

.hero-dots{position:absolute;left:16px;bottom:14px;display:flex;gap:7px;}
.hero-dot{
  width:8px;height:8px;border-radius:50%;border:none;padding:0;cursor:pointer;
  background:color-mix(in srgb, var(--navy) 35%, transparent);box-shadow:0 1px 3px rgba(0,0,0,.2);transition:.15s;
}
.hero-dot.is-active{background:var(--navy);width:20px;border-radius:var(--r-pill);}

.hero-pause{
  position:absolute;right:14px;bottom:12px;
  width:32px;height:32px;border-radius:50%;border:none;
  background:rgba(255,255,255,.92);color:var(--text);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.15);transition:.15s;
}
.hero-pause:hover{background:#fff;}
.hero-pause svg{width:14px;height:14px;}

.hero-feature{
  flex:1;min-width:220px;display:flex;flex-direction:column;justify-content:center;gap:9px;
  background:#F9F8F3;border:1px solid var(--line);border-radius:var(--r-md);padding:16px;
}
.tag-row{display:flex;align-items:center;gap:9px;}
.tag-important{background:var(--vermilion);color:#fff;font-size:.65em;padding:3px 9px;border-radius:var(--r-sm);font-weight:700;letter-spacing:.03em;}
.hero-feature .date{color:var(--text-mute);font-size:.7em;}
.hero-feature h2{margin:2px 0 0;font-size:1em;line-height:1.6;color:var(--text);font-weight:700;}

/* ---- お知らせ／会員専用 リスト ---- */
.lists{display:flex;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
.list-col{flex:1;min-width:240px;background:#F9F8F3;border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;}
.list-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding-bottom:9px;border-bottom:2px solid var(--navy);}
.list-head h2{margin:0;font-size:.85em;font-weight:700;color:var(--text);}
.list-head a{color:var(--vermilion);text-decoration:none;font-size:.75em;font-weight:600;}
.list-head-title{display:inline-flex;align-items:center;gap:6px;}
.list-col ul{list-style:none;margin:0;padding:0;}
.list-col li{display:flex;gap:12px;font-size:.8em;color:var(--text);padding:8px 0;border-bottom:1px dashed var(--line);}
.list-col li:last-child{border-bottom:none;}
.list-col li .date{min-width:78px;color:var(--navy);font-weight:600;}
/* リスト項目のタイトル。当面リンクなし＝ <span class="ttl">。
   将来 詳細ページ運用に変えるときは <a class="ttl" href="…"> に置き換えるだけ
   （リンクでも通常時は本文色のまま、ホバーで下線＝トップの落ち着いた見た目を保つ）。 */
.list-col li .ttl{color:var(--text);}
.list-col li a.ttl{color:inherit;text-decoration:none;}
.list-col li a.ttl:hover{color:var(--vermilion);text-decoration:underline;text-underline-offset:2px;}
.list-lock{color:var(--navy);display:inline-flex;align-items:center;}

/* ---- 航路案内 ---- */
.routes{background:var(--navy);border-radius:var(--r-md);padding:20px 20px 21px;margin:34px 0 46px;position:relative;overflow:hidden;}
.routes-deco-wave{position:absolute;left:0;right:0;bottom:6px;width:100%;height:20px;opacity:.2;pointer-events:none;}
.routes-head,.route-buttons{position:relative;z-index:1;}
.routes-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:12px;flex-wrap:wrap;}
.routes h2{margin:0;font-size:.95em;letter-spacing:.04em;color:#fff;display:flex;align-items:center;gap:8px;}
.routes h2::before{content:"";width:5px;height:14px;background:var(--accent);border-radius:2px;display:inline-block;}
.routes .note{margin:0;font-size:.78em;letter-spacing:.02em;color:#F0F1FB;opacity:.9;}
.route-buttons{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px;}
.route-buttons a{
  flex:1;min-width:150px;background:#F9F8F3;border:1.5px solid var(--accent);color:var(--text);
  padding:16px 14px;border-radius:var(--r-md);font-size:.9em;font-weight:700;letter-spacing:.1em;text-decoration:none;
  display:flex;justify-content:space-between;align-items:center;transition:.15s;
}
.route-buttons a:hover{background:var(--accent);}

@media (max-width:640px){
  .hero-wrap{flex-direction:column;}
  .lists{flex-direction:column;}
}