/* yakult-top — スタイル（調整値は tokens.css のCSS変数を参照） */
* { margin:0; padding:0; box-sizing:border-box; }
html { min-width: 1280px; }
body {
  background: var(--bg-gray);
  font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  color:#333;
}
a { text-decoration:none; color:inherit; }
img { display:block; }
.rounded { font-family:'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif; }

/* ================= ヘッダー ================= */
.site-header {
  background:#fff;
  padding: 26px 0 0;
  height: var(--head-h);
  position: relative;
}
.site-header .logo {
  width: var(--logo-w);
  margin: 0 auto;
}
.site-header .logo img { width:100%; }
.header-icons {
  position:absolute; top:30px; right: var(--icons-right);
  display:flex; gap:26px;
}
.hicon {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-size:10px; color:#333; letter-spacing:.05em;
  cursor:pointer;
}
.hicon svg { width:26px; height:26px; }
/* 検索フィールド：searchクリックで右側に展開（アイコンはその分左へ） */
.search-field {
  width:0; overflow:hidden;
  transition: width .35s ease;
  display:flex; align-items:center;
  height: 44px;
}
.search-field.open { width: 220px; }
.search-field input {
  width: 208px; height: 32px;
  border: 1.5px solid #c8ccd0;
  border-radius: 999px;
  padding: 0 14px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  background:#fff;
}
.search-field input:focus { border-color: #e60012; }

/* ================= ナビ（Three.js／寸法はJS側の定数） ================= */
#navwrap {
  width: 1200px;
  margin: -28px auto 0;   /* 白/グレー境界をバー垂直中央に */
  position: relative;
  z-index: 5;
  aspect-ratio: 1200 / 56;
}
#navwrap canvas { display:block; width:100%; height:100%; }
#nav-hits { position:absolute; inset:0; display:flex; list-style:none; }
#nav-hits li { flex:1; cursor:pointer; }

/* ================= ヒーロースライダー ================= */
.hero {
  width: 1256px;
  margin: var(--hero-mt) auto 0;
  position: relative;
}
#heroStage {
  /* 回転中に手前へ倒れる縁が遠近で広く映るため、フレームは左右162pxずつ広い */
  width: 1580px;
  margin-left: -162px;
  aspect-ratio: 1580 / 584;
}
#heroStage canvas {
  display:block; width:100%; height:100%;
  filter: drop-shadow(0 var(--hero-sh-y) var(--hero-sh-blur) rgba(30,40,60,var(--hero-sh-o)));
}
.hero .ear {
  position:absolute; top:50%; transform:translateY(-50%);
  width:52px; height:80px; z-index:6;
  background:transparent; border:none; cursor:pointer;
}
.hero .ear.prev { left:-6px; }
.hero .ear.next { right:-6px; }

/* ================= カード2枚 ================= */
.cards {
  width: 1200px;
  margin: var(--cards-mt) auto var(--cards-mb);
  display:flex; justify-content:space-between; align-items:flex-start;
}
.cards a { display:block; position:relative; }
/* ホバーで差し替え画像にクロスフェード */
.cards a .hover-img {
  position:absolute; inset:0;
  opacity:0;
  transition: opacity .25s ease;
}
.cards a:hover .hover-img { opacity:1; }
.cards img {
  width: var(--card-w);
  filter: drop-shadow(0 10px 14px rgba(30,40,60,.16));
}

/* ================= セクション共通 ================= */
.zone-news { padding: var(--news-pad-t) 0 var(--news-pad-b); background: var(--news-bg); }
.zone-area { padding: var(--area-pad-t) 0 var(--area-pad-b); background: var(--zone2-bg); }
.zone-area .pill { margin-bottom: var(--area-pill-mb); }
.pill {
  width: var(--pill-w); margin: 0 auto var(--pill-mb);
  background:#fff;
  border: 3px solid;
  border-radius: 999px;
  text-align:center;
  font-size: var(--pill-fs); font-weight: 700;
  padding: 10px 0;
  letter-spacing: .06em;
}
.pill.yellow { border-color:#f5d000; color:#e60012; }
.pill.blue   { border-color:#8fc8e8; color:#2e9fd4; }
.grid4 {
  width: 1200px;
  margin: 0 auto;
  display:flex; justify-content:space-between;
}
.grid4 > * { width: var(--col-w); }

/* ---- お知らせ ---- */
.news-item img {
  width:100%; aspect-ratio: 746 / 414; object-fit: cover; display:block;
  border-radius: 8px;
  /* 白い書類写真などで白地との境界が消えるため、控えめな影＋極薄の縁線（SP版と同一） */
  box-shadow: 0 3px 10px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.news-item:hover img { box-shadow: 0 6px 14px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.05); }
.news-item .news-noimg { display:block; width:100%; aspect-ratio: 746 / 414; border-radius:8px; background:#eef3f6; }
.news-item:hover img { transform: translateY(-3px); }
.news-item h3 {
  font-size: var(--news-fs); font-weight: 600; line-height: var(--news-lh);
  margin: 14px 2px 10px;
  min-height: 3.3em;
}
.news-item .more {
  font-size: 12.5px; color: #e60012; font-weight: 600;
  letter-spacing: .04em;
}

/* ---- 地域とともに ---- */
.area-item {
  position:relative; padding-top: 34px;
  opacity: var(--area-op);              /* 通常時は減光、ホバーで100%に */
  transition: opacity .25s ease;
}
.area-item:hover { opacity: 1; }
.area-item .label {
  position:absolute; top: var(--area-label-y); left:50%; transform:translateX(-50%);
  width: var(--area-label-w); z-index: 2;
}
.area-item .photo {                      /* 青枠はCSSで再現（旧PNGは焼き込み） */
  display:block; width:100%; aspect-ratio: 756 / 652; object-fit: cover;
  box-sizing: border-box; border: 4px solid #54c3f1; border-radius: 25px; background:#eef3f6;
}
.area-item p {
  text-align:center;
  font-size: var(--area-cap-fs); color:#2e9fd4; font-weight:600;
  margin-top: 12px; letter-spacing:.02em;
}

/* ================= バナー帯（パレード） ================= */
.banner-band {
  background: var(--band-gray);
  padding: var(--banner-pad) 0;
  overflow: hidden;
}
.banner-track {
  display:flex; width:max-content;
  animation: parade var(--parade-dur) linear infinite;
}
.banner-set {
  display:flex; gap: var(--banner-gap); align-items:center;
  padding-right: var(--banner-gap);
}
.banner-set img {
  height: var(--banner-h); width:auto;
  border-radius: 4px;
  transition: transform .2s ease;
}
.banner-set a:hover img { transform: scale(1.04); }
@keyframes parade {
  to { transform: translateX(-50%); }
}

/* ================= フッター ================= */
footer { background:#fff; }
.footer-main {
  width: 1200px;
  margin: 0 auto;
  display:flex; align-items:flex-end; gap: 40px;
  padding: var(--footer-pad-t) 0 var(--footer-pad-b);
}
.footer-main .bldg { width: var(--bldg-w); position:relative; top: var(--bldg-y); margin-top:0; }
.footer-main .fright { flex:1; padding-bottom: 4px; }
.footer-brand { display:flex; align-items:center; gap:22px; margin-bottom:20px; }
.footer-brand .smile { width: 92px; }
.footer-brand .tagline { width: 220px; }
.footer-nav {
  display:flex; align-items:center; gap: var(--fnav-gap);
  font-size: var(--fnav-fs); color:#444; font-weight:600;
}
.footer-nav a:hover { color: #e60012; }
.footer-nav svg { width:20px; height:20px; }
.footer-bottom {
  border-top: var(--fline-w) solid var(--fline-c);
  padding: 18px 0 26px;
}
.footer-bottom-inner {
  width: 1200px; margin:0 auto;
  display:flex; align-items:center; gap: 18px;
  font-size: 11px; color:#666;
}
.footer-bottom-inner img { height: var(--fbottom-logo-h); width:auto; }
.footer-bottom-inner .copy { margin-left:auto; }

.site-header .logo a { display: block; line-height: 0; }

/* フッター2行目：カテゴリ系サブリンク */
.footer-nav-sub { margin-top: 10px; font-size: 12px; font-weight: 500; color: #888; }

/* 検索窓はform化済み：ブラウザ既定のmarginを消す */
form.search-field, form.inner { margin: 0; }