/* 西湘設備工業 デザイン 共通CSS（トップ・会社概要） */

html:has(body.seisho){scroll-behavior:smooth}
body.seisho{margin:0;background:#04121f;color:#eaf6ff}
.sx{font-size:16px;line-height:normal;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%}
.sx :is(h1,h2,h3){border:0;padding:0;color:inherit}
.sx :is(h1,h2,h3):not(.fillt){background:none}
.sx button{font-family:inherit}
.sx [id]{scroll-margin-top:24px}

/* ---------- スマホ用メニュー ---------- */
.sx-drawer{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;justify-content:center;padding:96px clamp(24px,8vw,64px) 48px;background:rgba(4,18,31,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .3s;overflow-y:auto}
.sx-drawer[hidden]{display:none}
.sx-drawer.is-open{opacity:1}
.sx-drawer-close{position:absolute;top:18px;right:clamp(16px,4vw,56px);width:48px;height:48px;border-radius:50%;border:1.5px solid rgba(165,243,252,.5);background:transparent;color:#eaf6ff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sx-drawer ul{list-style:none;margin:0;padding:0}
.sx-drawer li a{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid rgba(165,243,252,.15);color:#eaf6ff;text-decoration:none;font-weight:900;font-size:clamp(22px,6vw,30px);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1),color .3s}
.sx-drawer li a:hover{color:#22d3ee}
.sx-drawer li a .en{min-width:92px;font-size:12px;font-weight:400;letter-spacing:.3em;color:#22d3ee}
.sx-drawer.is-open li a{opacity:1;transform:none}
.sx-drawer li:nth-child(2) a{transition-delay:.05s}
.sx-drawer li:nth-child(3) a{transition-delay:.1s}
.sx-drawer li:nth-child(4) a{transition-delay:.15s}
.sx-drawer li:nth-child(5) a{transition-delay:.2s}
.sx-drawer .sx-drawer-tel{display:flex;align-items:center;justify-content:center;min-height:52px;margin-top:36px;border-radius:999px;background:#22d3ee;color:#04121f;font-weight:900;text-decoration:none}
.sx-drawer .sx-drawer-tel:hover{color:#04121f}

/* ---------- 地図（暗い配色に合わせて反転） ---------- */
.sx-map iframe{display:block;width:100%;height:100%;min-height:380px;border:0;filter:invert(.9) hue-rotate(180deg) saturate(.7) contrast(.95)}

/* ---------- スクロール演出：非対応ブラウザ（Firefox等）向けの代替 ---------- */
.no-sdt .rv{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
.no-sdt .rvl{opacity:0;transform:translateX(-60px);transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.no-sdt .grow{transform:scaleX(0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.no-sdt .is-vis{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html:has(body.seisho){scroll-behavior:auto}
  .sx-drawer li a{opacity:1;transform:none;transition:none}
}

/* ---------- スマホ：ヘッダーを1行に（電話はメニュー内のボタンから） ---------- */
.sx header > a > span > span{white-space:nowrap}
@media (max-width:600px){.sx header .nav{display:none!important}.sx header > a .en{letter-spacing:.16em!important}}

/* 画面には出さず読み上げだけするテキスト */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}