/* ==========================================================================
   合同会社ルシャボヌール — 共通スタイル
   配色は HYDRON の世界から：藍の夜、H₂ の青い光、提灯の灯り
   見出しは明朝、本文はゴシック
   ========================================================================== */

:root{
  --ink:       #0C1524;   /* 藍の夜 */
  --ink-2:     #16233E;   /* 藍の影 */
  --ink-3:     #1E2E4D;
  --h2:        #2E9BFF;   /* H₂ の青 */
  --h2-soft:   #7FC4FF;
  --amber:     #F5C069;   /* 提灯の灯り */
  --paper:     #F2F6FC;
  --muted:     #8FA3C0;
  --line:      rgba(143,163,192,.22);
  --mincho: "Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --gothic: "Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Meiryo",sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--gothic);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}

a{ color:var(--h2-soft); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible,
button:focus-visible{ outline:2px solid var(--h2); outline-offset:3px; border-radius:2px; }

.wrap{ max-width:760px; margin:0 auto; padding:0 24px; }

/* ---------- ヘッダー ---------- */
.site-head{
  position:sticky; top:0; z-index:10;
  background:rgba(12,21,36,.9);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:64px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:var(--mincho); font-size:16px; letter-spacing:.08em;
  color:var(--paper);
}
.brand:hover{ text-decoration:none; }
.brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:var(--h2); box-shadow:0 0 10px var(--h2);
}
.nav{ display:flex; gap:20px; font-size:13.5px; }
.nav a{ color:var(--muted); letter-spacing:.06em; }
.nav a:hover,
.nav a[aria-current="page"]{ color:var(--paper); text-decoration:none; }

/* ---------- シグネチャ：H₂ の光球 ---------- */
.orb{
  position:relative; width:132px; height:132px; margin:0 auto 34px;
}
.orb::before{
  content:""; position:absolute; inset:-40px; border-radius:50%;
  background:radial-gradient(circle, rgba(46,155,255,.34) 0%, rgba(46,155,255,0) 68%);
  animation:breathe 5.5s ease-in-out infinite;
}
.orb .ball{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #CFE8FF 0%, #4FAEFF 42%, #1668C8 100%);
  box-shadow:0 0 44px rgba(46,155,255,.6), inset 0 0 30px rgba(255,255,255,.28);
  display:grid; place-items:center;
  font-family:var(--gothic); font-weight:700; font-size:34px;
  color:#fff; text-shadow:0 2px 10px rgba(0,40,90,.5);
  animation:breathe 5.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(1);    opacity:.92; }
  50%    { transform:scale(1.045); opacity:1;  }
}
@media (prefers-reduced-motion:reduce){
  .orb::before,.orb .ball{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- ヒーロー ---------- */
.hero{ padding:88px 0 72px; text-align:center; }
.hero h1{
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(28px,6vw,42px); line-height:1.5; letter-spacing:.1em;
}
.hero .en{
  margin-top:14px; color:var(--muted);
  font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
}
.hero .lead{
  margin:30px auto 0; max-width:560px;
  color:#C6D5E8; font-size:15.5px;
}

/* ---------- セクション ---------- */
.section{ padding:60px 0; border-top:1px solid var(--line); }
.section h2{
  font-family:var(--mincho); font-weight:600;
  font-size:21px; letter-spacing:.12em; margin-bottom:8px;
}
.section .eyebrow{
  color:var(--h2-soft); font-size:11.5px;
  letter-spacing:.24em; text-transform:uppercase; margin-bottom:26px;
}
.section p + p{ margin-top:18px; }
.section h3{
  font-size:16px; font-weight:700; letter-spacing:.04em;
  margin:34px 0 10px; color:var(--paper);
}
.section h3:first-of-type{ margin-top:0; }

/* ---------- 事業内容 ---------- */
.biz{ list-style:none; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.biz li{
  background:var(--ink); padding:16px 20px;
  display:flex; gap:16px; align-items:baseline; font-size:14.5px;
}
.biz .no{
  font-family:var(--mincho); color:var(--h2-soft);
  font-size:12px; letter-spacing:.1em; flex:0 0 26px;
}

/* ---------- 会社概要の表 ---------- */
.facts{ width:100%; border-collapse:collapse; font-size:14.5px; }
.facts th,.facts td{
  text-align:left; padding:16px 4px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.facts th{
  width:34%; font-weight:500; color:var(--muted);
  letter-spacing:.06em; white-space:nowrap;
}

/* ---------- 箇条書き ---------- */
.list{ list-style:none; }
.list li{
  position:relative; padding-left:20px; margin-top:10px; font-size:14.5px;
}
.list li::before{
  content:""; position:absolute; left:2px; top:.78em;
  width:6px; height:6px; border-radius:50%; background:var(--h2);
}

/* ---------- 注記 ---------- */
.note{
  margin-top:28px; padding:18px 20px;
  background:var(--ink-2); border-left:3px solid var(--amber);
  font-size:13.5px; color:#C6D5E8; line-height:1.85;
}

/* ---------- 更新日 ---------- */
.updated{
  margin-top:44px; padding-top:22px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13px;
}

/* ---------- フッター ---------- */
.site-foot{
  margin-top:40px; padding:36px 0 48px;
  border-top:1px solid var(--line); color:var(--muted); font-size:12.5px;
}
.site-foot .wrap{ display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center; }
.site-foot .sp{ flex:1; }

@media (max-width:600px){
  .site-head .wrap{ height:auto; padding-top:12px; padding-bottom:12px;
                    flex-direction:column; align-items:flex-start; }
  .nav{ gap:16px; flex-wrap:wrap; }
  .hero{ padding:56px 0 48px; }
  .orb{ width:104px; height:104px; }
  .orb .ball{ font-size:27px; }
  .facts th{ width:38%; }
  .section{ padding:48px 0; }
}