/* トップページ専用。共通の土台は company.css、街の絵柄は town-art.css。 */

/* --- 土台 ---------------------------------------------------------------- */
:root{scroll-padding-top:30px}
body{background:#fffdf8;color:#233849}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #00789c;outline-offset:4px}

/* --- ヘッダー ------------------------------------------------------------ */
.town-header{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:13px 5%;background:#fffdf8;border-bottom:1px solid #dce6e5}
.town-brand{display:flex;gap:16px;align-items:center;text-decoration:none}
.town-brand img{width:112px}
.town-header nav{display:flex;flex-wrap:wrap;gap:26px;align-items:center;font-size:12px;font-weight:600}
.town-header nav a{text-decoration:none}

/* --- ヒーロー：街のイラストを背景に、文言を上に重ねる --------------------- */
.park-hero{--band:clamp(520px,80vw,740px);position:relative;overflow:hidden;min-height:760px;background:#fffdf8}
/* 街は幅に連動した固定サイズ。狭い画面では縮まず、左右にはみ出して切り取られる。下端は切らない。 */
.town-bg{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--band) * -.036);width:max(104%,calc(var(--band) * 1.6));height:var(--band);pointer-events:none;user-select:none;-webkit-user-select:none}
/* 上側だけページの地色へ溶かし、ヘッダーと切れ目なくつなぐ。 */
.park-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#fffdf8 17%,#fffdf8e8 33%,transparent 58%);pointer-events:none}
.park-welcome{position:relative;z-index:1;max-width:1120px;margin:auto;padding:34px 6% 0}
.park-welcome .eyebrow{color:#285b73;font-size:10px;letter-spacing:.2em;margin-bottom:14px}
.park-welcome h1{font-size:clamp(30px,3.4vw,46px);line-height:1.26;margin:0;letter-spacing:.035em;color:#17334b}
.park-welcome h1 span{color:#26608c}
.welcome-lead{font-size:14px;line-height:1.95;color:#2c5064;margin:16px 0 0;max-width:560px}
.welcome-tags{font-size:11px;letter-spacing:.06em;color:#3d6d85;margin:14px 0 0;padding-top:12px;border-top:1px solid #36597129;max-width:560px}

/* --- 本文セクション ------------------------------------------------------ */
.section-label .eyebrow{color:#538597}
.services{background:#f1f6f2}
.service-grid article{background:#fffdfa66}

/* --- 街のアニメーション制御 ---------------------------------------------- */
#amb{display:none}
.motion-paused .balloon,.motion-paused .flag,.motion-paused .npcA,.motion-paused .npcB,.motion-paused .npc-in,.motion-paused .star{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.win,.glow,.stars,.amb{transition:none!important}}

/* --- 画面幅ごとの調整 ---------------------------------------------------- */
@media(max-width:900px){
  .town-header nav{gap:15px}
}
@media(max-width:780px){                      /* ヘッダーのナビを1行スクロールに */
  .town-header{padding:10px 0 10px 6%;gap:10px;flex-wrap:wrap}
  .town-header nav{width:100%;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:12px;padding:2px 6% 2px 0;font-size:clamp(10px,2.5vw,11px);scrollbar-width:none}
  .town-header nav::-webkit-scrollbar{display:none}
  .town-header nav a{white-space:nowrap}
}
@media(max-width:640px){
  .town-brand img{width:108px}
  .park-hero{min-height:700px}
  .park-welcome{padding:22px 7% 0}
  .park-welcome h1{font-size:29px}
  .welcome-lead{font-size:12px;line-height:1.85;margin-top:13px}
  .welcome-tags{font-size:10px;margin-top:11px;padding-top:10px}
  .site-footer>div{gap:17px}
  .about h3{font-size:25px}
}