/* ============================================
   INSPIRE HOLDINGS - Optimized Stylesheet
   Palette: cream/ivory bg + navy text + gold accent
   ============================================ */

:root{
  --bg:#fbf8f3;            /* cream / ivory */
  --bg-alt:#f3ede2;        /* warm beige */
  --bg-dark:#1a2332;       /* deep navy */
  --bg-darker:#0f1822;
  --text:#2c2c2c;          /* charcoal */
  --text-dim:#6c6c6c;
  --text-light:#9a9a9a;
  --text-on-dark:#f5f0e6;
  --accent:#b8945a;        /* gold / brass */
  --accent-dark:#8b6f3e;
  --accent-soft:rgba(184,148,90,0.1);
  --line:rgba(0,0,0,0.08);
  --line-dark:rgba(255,255,255,0.1);
  --serif:'Noto Serif JP',serif;
  --sans:'Noto Sans JP',sans-serif;
  --maxw:1280px;
  --logo-header-aspect:128 / 36;
  --logo-footer-aspect:958 / 260;
  /* Footer logo: white on dark footer */
  --footer-logo-filter: brightness(0) invert(1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  letter-spacing:0.02em;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;          /* モバイルでの横スクロール防止（将来の編集に対する保険） */
}
img{display:block;height:auto;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ============================================
   NAVIGATION
   ============================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(251,248,243,0.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:padding .3s,box-shadow .3s;
}
.nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,0.06)}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  padding:18px 32px;
  display:flex;justify-content:space-between;align-items:center;
}
.logo{
  display:flex;align-items:center;gap:12px;font-weight:700;
  flex-shrink:0;
}
.logo-img{
  display:block;
  width:auto;
  max-width:none;
  object-fit:contain;
  flex-shrink:0;
}
.logo-img--header{
  height:36px;
  aspect-ratio:var(--logo-header-aspect);
}
.logo-img--footer{
  height:32px;
  aspect-ratio:var(--logo-footer-aspect);
}
.footer-brand .logo-img{
  filter:var(--footer-logo-filter);
  opacity:1;
}
@media(max-width:960px){
  .logo-img--header{height:30px}
  .logo-img--footer{height:28px}
}
.nav-links{display:flex;gap:32px;align-items:center}
.nav-links > a{
  font-size:12px;font-weight:500;letter-spacing:0.18em;
  color:var(--text);
  position:relative;transition:color .2s;
}
.nav-links > a:hover{color:var(--accent)}
.nav-links > a::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:0;height:1px;background:var(--accent);transition:width .3s;
}
.nav-links > a:hover::after{width:100%}
/* ─ nav dropdown ─ */
.nav-item{position:relative}
.nav-item--drop > a{
  font-size:12px;font-weight:500;letter-spacing:0.18em;
  color:var(--text);position:relative;transition:color .2s;
  display:inline-flex;align-items:center;gap:3px;white-space:nowrap;
}
.nav-item--drop:hover > a{color:var(--accent)}
.nav-item--drop > a::after{
  content:"";position:absolute;left:0;bottom:-6px;
  width:0;height:1px;background:var(--accent);transition:width .3s;
}
.nav-item--drop:hover > a::after{width:calc(100% - 11px)}
.drop-arrow{font-size:9px;transition:transform .22s;display:inline-block;line-height:1;margin-top:1px}
.nav-item--drop:hover .drop-arrow{transform:rotate(180deg)}
/* visibility方式：top:100%でギャップなし、マウス移動中もhoverが維持される */
.nav-dropdown{
  visibility:hidden;opacity:0;pointer-events:none;
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  background:#fff;border:1px solid var(--line);
  border-top:2px solid var(--accent);
  border-radius:0 0 4px 4px;
  min-width:190px;padding:5px 0;
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
  z-index:200;white-space:nowrap;
  transition:opacity .18s,visibility .18s;
}
.nav-item--drop:hover .nav-dropdown{
  visibility:visible;opacity:1;pointer-events:auto;
}
.nav-dropdown a{
  display:block;padding:9px 18px;
  font-size:11px;letter-spacing:0.1em;font-weight:500;
  color:var(--text);transition:background .15s,color .15s;
}
.nav-dropdown a:hover{background:var(--bg-alt,#f3ede2);color:var(--accent)}
@media(max-width:960px){
  .nav-item{width:100%}
  .drop-arrow{display:none}
  .nav-dropdown{
    visibility:visible;opacity:1;pointer-events:auto;
    position:static;transform:none;
    box-shadow:none;border:none;background:transparent;
    padding:0 0 6px 12px;min-width:0;white-space:normal;
    transition:none;
  }
  .nav-dropdown a{padding:5px 0;font-size:11px;color:var(--text-dim)}
}
.lang{font-size:11px;color:var(--text-dim);letter-spacing:0.1em}
.lang .active{color:var(--accent);font-weight:600}
.lang .sep{color:var(--text-light);margin:0 4px}
.cta-btn{
  background:var(--bg-dark);color:#ffffff;
  padding:11px 22px;border-radius:2px;
  font-size:11px;font-weight:600;letter-spacing:0.15em;
  border:1px solid var(--bg-dark);
  transition:all .25s;
}
.cta-btn:hover{
  background:var(--accent);border-color:var(--accent);color:#ffffff;
}
.nav-links > a.cta-btn{color:#ffffff;}
.menu-btn{
  display:none;
  background:var(--bg-dark);
  color:#ffffff;
  border:1px solid var(--bg-dark);
  padding:6px 12px;font-size:20px;border-radius:2px;
  line-height:1;
  transition:all .25s;
}
.menu-btn:hover{
  background:var(--accent);border-color:var(--accent);color:#ffffff;
}
@media(max-width:960px){
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    background:var(--bg);
    flex-direction:column;align-items:flex-start;
    padding:24px 32px;gap:18px;
    border-bottom:1px solid var(--line);
  }
  .nav-links.show{display:flex}
  .nav-links .cta-btn{
    color:#ffffff;
    align-self:stretch;text-align:center;
  }
  .menu-btn{display:block}
}

/* ============================================
   HERO
   ============================================ */
.hero{
  min-height:100vh;
  position:relative;
  display:flex;align-items:center;
  padding:120px 32px 60px;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#2a3a52 0%,#1a2332 100%);
  background-image:
    url("img/hero-bridge.svg"),
    linear-gradient(135deg,#2a3a52 0%,#1a2332 100%);
  background-size:cover, auto;
  background-position:center, center;
  background-repeat:no-repeat;
}
.hero-overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(15,24,34,0.7) 0%,rgba(15,24,34,0.3) 100%);
}
.hero-content{
  position:relative;z-index:2;
  max-width:var(--maxw);margin:0 auto;width:100%;
  color:var(--text-on-dark);
}
.hero-pre{
  display:inline-block;
  font-size:11px;letter-spacing:0.4em;
  color:var(--accent);font-weight:600;
  margin-bottom:24px;
  padding-bottom:8px;border-bottom:1px solid var(--accent);
}
.hero-title{
  font-family:var(--serif);
  font-size:clamp(34px,5.5vw,68px);
  font-weight:600;line-height:1.25;
  letter-spacing:0.02em;
  margin-bottom:28px;
  max-width:820px;
}
.hero-title .accent{color:var(--accent)}
.hero-sub{
  font-size:15px;line-height:2;
  color:rgba(245,240,230,0.85);
  margin-bottom:40px;max-width:560px;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:60px}
.btn-primary{
  display:inline-block;
  background:var(--accent);color:#fff;
  padding:14px 32px;border-radius:2px;
  font-size:12px;font-weight:600;letter-spacing:0.18em;
  border:1px solid var(--accent);
  transition:all .25s;cursor:pointer;
}
.btn-primary:hover{
  background:transparent;color:var(--accent);
}
.btn-ghost{
  display:inline-block;
  background:transparent;color:var(--text-on-dark);
  padding:14px 24px;border-radius:2px;
  font-size:12px;font-weight:500;letter-spacing:0.18em;
  border:1px solid rgba(255,255,255,0.3);
  transition:all .25s;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.hero-meta{
  display:flex;gap:48px;
  padding-top:36px;border-top:1px solid rgba(255,255,255,0.15);
  max-width:520px;
}
.hero-meta div{display:flex;flex-direction:column}
.hero-meta strong{
  font-family:var(--serif);font-size:32px;font-weight:600;
  color:var(--accent);
}
.hero-meta span{
  font-size:10px;letter-spacing:0.2em;
  color:rgba(245,240,230,0.6);margin-top:4px;
}
/* ─ fx live rate ticker ─ */
.fx-ticker{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
  background:rgba(26,35,50,0.55);
  border:1px solid rgba(184,148,90,0.4);
  border-radius:24px;
  padding:7px 16px;
  margin-top:22px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.fx-ticker-tag{
  font-size:9px;letter-spacing:0.14em;font-weight:700;
  color:var(--accent,#b8945a);text-transform:uppercase;
  border-right:1px solid rgba(184,148,90,0.3);padding-right:10px;
}
.fx-ticker-main{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600}
.fx-from{color:rgba(245,240,230,0.75)}
.fx-arr{color:var(--accent,#b8945a);font-size:11px}
.fx-to{color:#fff}
.fx-ticker-date{font-size:9px;color:rgba(245,240,230,0.4)}
.fx-loading{opacity:.5;animation:fx-blink 1.2s infinite}
@keyframes fx-blink{0%,100%{opacity:.5}50%{opacity:.15}}
.scroll-hint{
  position:absolute;bottom:30px;left:50%;
  transform:translateX(-50%);z-index:3;
  font-size:10px;letter-spacing:0.3em;
  color:rgba(245,240,230,0.6);
  animation:fadeUp 2s ease-in-out infinite;
}
@keyframes fadeUp{
  0%,100%{opacity:.4;transform:translate(-50%,0)}
  50%{opacity:1;transform:translate(-50%,-6px)}
}

/* ============================================
   SECTION BASE
   ============================================ */
.section{padding:100px 32px;position:relative}
.section-light{background:var(--bg-alt)}
.section-dark{background:var(--bg-dark);color:var(--text-on-dark)}
.container{max-width:var(--maxw);margin:0 auto}
.container-narrow{max-width:880px;margin:0 auto}
.section-head{margin-bottom:60px;max-width:760px}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-tag{
  display:inline-block;
  font-size:11px;letter-spacing:0.3em;font-weight:600;
  color:var(--accent);margin-bottom:16px;
}
.section-tag.light{color:var(--accent)}
.section-title{
  font-family:var(--serif);
  font-size:clamp(28px,3.6vw,44px);
  font-weight:600;line-height:1.3;
  letter-spacing:0.02em;margin-bottom:18px;
}
.section-title .accent-dark{color:var(--accent)}
.section-sub{
  font-size:15px;color:var(--text-dim);
  line-height:1.9;
}
.section-dark .section-sub{color:rgba(245,240,230,0.7)}

/* ============================================
   METRICS DASHBOARD
   ============================================ */
.metrics{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  margin-bottom:48px;
}
@media(max-width:900px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{
  background:#fff;border:1px solid var(--line);
  padding:24px;border-radius:4px;
  position:relative;
  transition:transform .3s,box-shadow .3s;
}
.metric:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.06)}
.metric::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent);
}
.metric-label{
  font-size:10px;letter-spacing:0.2em;
  color:var(--text-light);font-weight:600;
  margin-bottom:14px;
}
.metric-value{
  font-family:var(--serif);
  font-size:32px;font-weight:600;color:var(--bg-dark);
  line-height:1;
}
.metric-value span{
  font-size:13px;font-weight:400;color:var(--text-dim);
  font-family:var(--sans);
}
.metric-trend{
  font-size:11px;color:var(--accent-dark);
  font-weight:600;margin-top:8px;letter-spacing:0.05em;
}
.spark{margin-top:14px;height:36px;width:100%;display:block}

/* ============================================
   CHART CARDS
   ============================================ */
.chart-grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:24px;
}
@media(max-width:900px){.chart-grid{grid-template-columns:1fr}}
.chart-card{
  background:#fff;border:1px solid var(--line);
  padding:28px;border-radius:4px;
}
.chart-card h3{
  font-family:var(--serif);font-size:16px;font-weight:600;
  color:var(--bg-dark);margin-bottom:8px;
  display:flex;justify-content:space-between;align-items:baseline;
}
.chart-card h3 small{
  font-family:var(--sans);font-size:10px;font-weight:500;
  letter-spacing:0.2em;color:var(--text-light);
}
.chart-wrap{height:260px;margin-top:16px;position:relative}

/* ============================================
   SERVICES
   ============================================ */
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.services-grid{grid-template-columns:1fr}}
.service-card{
  background:#fff;border:1px solid var(--line);
  padding:36px 32px;border-radius:4px;
  position:relative;
  transition:all .3s;
}
.service-card:hover{
  border-color:var(--accent);
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(0,0,0,0.06);
}
.service-num{
  font-family:var(--serif);font-size:14px;font-style:italic;
  color:var(--accent);font-weight:600;
  margin-bottom:16px;letter-spacing:0.1em;
}
.service-card h3{
  font-family:var(--serif);font-size:22px;
  font-weight:600;color:var(--bg-dark);
  margin-bottom:14px;line-height:1.4;
}
.service-card > p{
  color:var(--text-dim);font-size:14px;
  margin-bottom:22px;
}
.service-card ul{list-style:none;margin-bottom:24px}
.service-card li{
  font-size:13px;color:var(--text);
  padding:8px 0;padding-left:18px;position:relative;
  border-bottom:1px dashed var(--line);
}
.service-card li:last-child{border-bottom:none}
.service-card li::before{
  content:"—";position:absolute;left:0;color:var(--accent);
}
.learn-more{
  font-size:11px;letter-spacing:0.2em;font-weight:600;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .2s;
}
.learn-more:hover{gap:14px}

/* ============================================
   SERVICE DETAILS
   ============================================ */
.detail-block{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;
  align-items:center;margin-bottom:80px;
}
.detail-block:last-child{margin-bottom:0}
.detail-block.reverse .detail-info{order:2}
.detail-block.reverse .detail-visual{order:1}
@media(max-width:900px){
  .detail-block{grid-template-columns:1fr;gap:32px}
  .detail-block.reverse .detail-info{order:1}
  .detail-block.reverse .detail-visual{order:2}
}
.detail-num{
  font-family:var(--serif);font-style:italic;
  font-size:48px;color:var(--accent);
  font-weight:600;line-height:1;display:block;
  margin-bottom:16px;
}
.detail-info h3{
  font-family:var(--serif);font-size:30px;font-weight:600;
  color:var(--bg-dark);line-height:1.4;
  margin-bottom:18px;
}
.detail-info > p{
  color:var(--text-dim);font-size:15px;
  margin-bottom:24px;
}
.detail-list{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
}
.detail-list .item{
  background:#fff;border:1px solid var(--line);
  padding:16px;border-radius:4px;font-size:13px;
  border-left:2px solid var(--accent);
}
.detail-list .item strong{
  display:block;font-size:10px;color:var(--accent);
  letter-spacing:0.18em;font-weight:700;margin-bottom:4px;
}
.detail-visual{
  background:#fff;border:1px solid var(--line);
  padding:28px;border-radius:4px;height:380px;
  display:flex;flex-direction:column;
}
.visual-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:16px;
}
.visual-head h4{
  font-family:var(--serif);font-size:14px;
  color:var(--bg-dark);font-weight:600;
}
.badge{
  font-size:10px;letter-spacing:0.18em;
  background:var(--accent-soft);color:var(--accent-dark);
  padding:4px 10px;border-radius:2px;font-weight:600;
}
.detail-visual .chart-wrap{flex:1;height:auto;margin-top:0}

/* ============================================
   CASE STUDIES
   ============================================ */
.case-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.case-grid{grid-template-columns:1fr}}
.case-card{
  background:var(--bg);border:1px solid var(--line);
  padding:28px;border-radius:4px;
  transition:all .3s;
}
.case-card:hover{
  border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,0.05);
}
.case-tag{
  font-size:10px;letter-spacing:0.2em;font-weight:700;
  color:var(--accent-dark);
  padding-bottom:12px;border-bottom:1px solid var(--line);
  margin-bottom:16px;
}
.case-card h4{
  font-family:var(--serif);font-size:18px;font-weight:600;
  color:var(--bg-dark);line-height:1.5;margin-bottom:12px;
}
.case-card > p{
  font-size:13px;color:var(--text-dim);margin-bottom:20px;
}
.case-result{
  background:var(--accent-soft);border-left:3px solid var(--accent);
  padding:14px 16px;border-radius:2px;
  display:flex;justify-content:space-between;align-items:center;
}
.case-result span{
  font-size:11px;color:var(--text-dim);letter-spacing:0.1em;
}
.case-result strong{
  font-family:var(--serif);font-size:24px;
  color:var(--accent-dark);font-weight:600;
}

/* ============================================
   PROCESS
   ============================================ */
.process{
  display:grid;grid-template-columns:repeat(5,1fr);
  gap:16px;position:relative;
}
@media(max-width:900px){.process{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.process{grid-template-columns:1fr}}
.process::before{
  content:"";position:absolute;
  top:30px;left:6%;right:6%;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent) 20%,var(--accent) 80%,transparent);
}
@media(max-width:900px){.process::before{display:none}}
.process-step{
  background:var(--bg);position:relative;
  padding:0 8px;text-align:center;
}
.step-num{
  width:60px;height:60px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);
  color:var(--accent);
  font-family:var(--serif);font-size:20px;font-weight:600;
  display:grid;place-items:center;
  margin:0 auto 20px;position:relative;z-index:1;
}
.process-step h4{
  font-family:var(--serif);font-size:15px;font-weight:600;
  color:var(--bg-dark);margin-bottom:8px;
}
.process-step p{
  font-size:12px;color:var(--text-dim);line-height:1.7;
}

/* ============================================
   COMPANY
   ============================================ */
.company-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:32px;
}
@media(max-width:900px){.company-grid{grid-template-columns:1fr}}
.company-card{
  background:var(--bg-alt);padding:36px;border-radius:4px;
  border-top:3px solid var(--accent);
}
.company-card h3{
  font-family:var(--serif);font-size:18px;font-weight:600;
  color:var(--bg-dark);margin-bottom:24px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.company-card dl{display:grid;grid-template-columns:120px 1fr;gap:14px}
.company-card dt{
  font-size:11px;color:var(--text-light);
  letter-spacing:0.15em;font-weight:600;padding-top:2px;
}
.company-card dd{font-size:13px;color:var(--text)}
.value-item{
  display:flex;gap:16px;
  padding:16px 0;border-bottom:1px solid var(--line);
}
.value-item:last-child{border-bottom:none}
.value-num{
  font-family:var(--serif);font-style:italic;font-size:20px;
  color:var(--accent);font-weight:600;flex-shrink:0;
}
.value-item h4{
  font-family:var(--serif);font-size:15px;font-weight:600;
  color:var(--bg-dark);margin-bottom:4px;
}
.value-item p{font-size:12px;color:var(--text-dim);line-height:1.7}

/* ============================================
   FAQ
   ============================================ */
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{
  background:#fff;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;
  transition:border-color .2s;
}
.faq-item[open]{border-color:var(--accent)}
.faq-item summary{
  padding:20px 24px;cursor:pointer;
  font-size:14px;font-weight:600;color:var(--bg-dark);
  list-style:none;position:relative;
  padding-right:50px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";position:absolute;right:24px;top:50%;
  transform:translateY(-50%);
  font-family:var(--serif);font-size:22px;
  color:var(--accent);font-weight:300;
  transition:transform .3s;
}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{
  padding:0 24px 20px;color:var(--text-dim);font-size:13px;
}

/* ============================================
   CONTACT
   ============================================ */
.contact-wrap{
  display:grid;grid-template-columns:1fr 1.4fr;gap:60px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line-dark);
  padding:48px;border-radius:4px;
}
@media(max-width:900px){.contact-wrap{grid-template-columns:1fr;padding:32px 24px;gap:40px}}
.contact-info{display:flex;flex-direction:column;gap:18px}
.channel{
  padding:14px 0;border-bottom:1px solid var(--line-dark);
  display:flex;flex-direction:column;gap:4px;
}
.ch-label{
  font-size:10px;letter-spacing:0.25em;
  color:var(--accent);font-weight:600;
}
.ch-value{font-size:15px;color:var(--text-on-dark);font-family:var(--serif)}
.contact-form{display:flex;flex-direction:column;gap:14px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:600px){.form-row{grid-template-columns:1fr}}
.contact-form label{
  display:flex;flex-direction:column;gap:6px;
  font-size:10px;letter-spacing:0.2em;font-weight:600;
  color:var(--accent);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  background:rgba(0,0,0,0.25);
  border:1px solid var(--line-dark);
  padding:12px 14px;border-radius:2px;
  color:var(--text-on-dark);
  font-family:var(--sans);font-size:14px;
  letter-spacing:normal;
  transition:border-color .2s;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--accent);
  background:rgba(0,0,0,0.4);
}
.contact-form textarea{resize:vertical;min-height:100px}
.contact-form .btn-primary{margin-top:8px;align-self:flex-start}

/* ============================================
   FOOTER
   ============================================ */
footer{
  background:var(--bg-darker);color:var(--text-on-dark);
  padding:60px 32px 24px;
}
.footer-inner{
  max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;
  margin-bottom:40px;
}
@media(max-width:900px){.footer-inner{grid-template-columns:1fr 1fr;gap:32px}}
.footer-brand p{
  font-size:13px;color:rgba(245,240,230,0.6);
  margin-top:18px;max-width:340px;line-height:1.8;
}
.footer-col h5{
  font-size:11px;letter-spacing:0.25em;
  color:var(--accent);margin-bottom:18px;font-weight:600;
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a,.footer-col li{
  font-size:13px;color:rgba(245,240,230,0.75);
  transition:color .2s;
}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{
  max-width:var(--maxw);margin:0 auto;
  padding-top:24px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;align-items:center;
  font-size:11px;letter-spacing:0.1em;
  color:rgba(245,240,230,0.5);
}
@media(max-width:600px){
  .footer-bottom{flex-direction:column;gap:10px;text-align:center}
}
/* --- footer social icons --- */
.footer-social{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.social-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(184,148,90,0.35);
  color:rgba(245,240,230,0.65);
  transition:border-color .2s,color .2s,background .2s;
  text-decoration:none;flex-shrink:0;
}
.social-btn:hover{
  border-color:var(--accent);color:var(--bg-darker);
  background:var(--accent);
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .8s,transform .8s}
.reveal.in{opacity:1;transform:translateY(0)}

/* ============================================
   PAGE HERO (sub-pages)
   ============================================ */
.page-hero{
  min-height:60vh;
  position:relative;
  display:flex;align-items:center;
  padding:160px 32px 80px;
  overflow:hidden;
}
.page-hero .hero-bg{
  position:absolute;inset:0;z-index:0;
  background:linear-gradient(135deg,#2a3a52 0%,#1a2332 100%);
  background-image:
    url("img/hero-bridge.svg"),
    linear-gradient(135deg,#2a3a52 0%,#1a2332 100%);
  background-size:cover, auto;
  background-position:center, center;
  background-repeat:no-repeat;
}
.page-hero .hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,24,34,0.7) 0%,rgba(15,24,34,0.3) 100%)}
.page-hero--hiring .hero-bg  {background-image:url("img/hero-hiring.jpg"),  linear-gradient(135deg,#2a3a52 0%,#1a2332 100%)}
.page-hero--company .hero-bg {background-image:url("img/hero-company.jpg"), linear-gradient(135deg,#2a3a52 0%,#1a2332 100%)}
.page-hero--service .hero-bg {background-image:url("img/hero-service.jpg"), linear-gradient(135deg,#2a3a52 0%,#1a2332 100%)}
.page-hero--request .hero-bg {background-image:url("img/hero-request.jpg"), linear-gradient(135deg,#2a3a52 0%,#1a2332 100%)}
.page-hero--business .hero-bg{background-image:url("img/hero-business.jpg"),linear-gradient(135deg,#2a3a52 0%,#1a2332 100%)}
.page-hero--apply .hero-bg   {background-image:url("img/hero-apply.jpg"),   linear-gradient(135deg,#2a3a52 0%,#1a2332 100%)}
.page-hero-content{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;color:var(--text-on-dark)}
.page-hero-title{
  font-family:var(--serif);
  font-size:clamp(30px,4.5vw,52px);
  font-weight:600;line-height:1.3;letter-spacing:0.02em;
  margin-bottom:18px;
}
.page-hero-sub{font-size:15px;color:rgba(245,240,230,0.85);line-height:1.95;max-width:680px}
.breadcrumb{
  display:flex;gap:10px;align-items:center;
  font-size:11px;letter-spacing:0.2em;color:rgba(245,240,230,0.7);
  margin-bottom:24px;
}
.breadcrumb a{color:var(--accent)}
.breadcrumb .sep{color:rgba(245,240,230,0.4)}

/* ============================================
   LANGUAGE SWITCH
   ============================================ */
.lang a{color:var(--text-dim);transition:color .2s}
.lang a:hover{color:var(--accent)}
.lang a.active{color:var(--accent);font-weight:600}
@media(max-width:960px){
  .lang{order:10}
}

/* ============================================
   HOME — SERVICES TEASER (3 large cards)
   ============================================ */
.svc-teaser-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.svc-teaser-grid{grid-template-columns:1fr}}
.svc-teaser{
  background:#fff;border:1px solid var(--line);
  border-radius:4px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:all .3s;
}
.svc-teaser:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(0,0,0,0.08);
  border-color:var(--accent);
}
.svc-teaser-img{
  height:200px;
  background:linear-gradient(135deg,#2a3a52,#1a2332);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  position:relative;overflow:hidden;
}
.svc-teaser-img.svc-img-business { background-image:url("img/svc-business.jpg"); }
.svc-teaser-img.svc-img-general  { background-image:url("img/svc-general.jpg"); }
.svc-teaser-img.svc-img-ecommerce{ background-image:url("img/svc-ecommerce.jpg"); }
.svc-teaser-img .svc-icon{ display:none }
.svc-teaser-body{padding:28px 28px 32px;display:flex;flex-direction:column;flex:1}
.svc-teaser-tag{
  font-size:10px;letter-spacing:0.25em;font-weight:600;
  color:var(--accent);margin-bottom:10px;
}
.svc-teaser-body h3{
  font-family:var(--serif);font-size:20px;font-weight:600;
  color:var(--bg-dark);line-height:1.4;margin-bottom:12px;
}
.svc-teaser-body p{
  font-size:13px;color:var(--text-dim);
  line-height:1.85;margin-bottom:20px;flex:1;
}
.svc-teaser-body .learn-more{margin-top:auto}

/* ============================================
   HIGHLIGHT TILES (Loopwork etc)
   ============================================ */
.highlight-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
}
@media(max-width:900px){.highlight-grid{grid-template-columns:1fr}}
.highlight-tile{
  background:var(--bg-dark);color:var(--text-on-dark);
  padding:0;border-radius:4px;
  position:relative;overflow:hidden;
  transition:transform .3s;
  display:flex;flex-direction:column;
}
.highlight-tile:hover{transform:translateY(-4px)}
.highlight-thumb{
  height:160px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:#1a2332;
  border-bottom:1px solid rgba(184,148,90,0.25);
}
.highlight-thumb.hl-support  { background-image:url("img/hl-support.jpg"); }
.highlight-thumb.hl-loopwork { background-image:url("img/hl-loopwork.png"); }
.highlight-thumb.hl-hiring   { background-image:url("img/hl-hiring.jpg"); }
.highlight-body{padding:28px 32px 32px;display:flex;flex-direction:column;flex:1}
.highlight-tile .ht-tag{
  font-size:10px;letter-spacing:0.25em;
  color:var(--accent);font-weight:600;margin-bottom:14px;
}
.highlight-tile h4{
  font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--text-on-dark);margin-bottom:8px;line-height:1.4;
}
.highlight-tile p{
  font-size:13px;color:rgba(245,240,230,0.7);
  margin-bottom:24px;line-height:1.8;
}
.highlight-tile a{
  font-size:11px;letter-spacing:0.2em;font-weight:600;
  color:var(--accent);
  display:inline-flex;align-items:center;gap:8px;
  transition:gap .2s;
}
.highlight-tile a:hover{gap:14px}

/* ============================================
   CONSULT BAND (CTA section)
   ============================================ */
.consult-band{
  background:var(--bg-alt);
  border-top:3px solid var(--accent);
  padding:80px 32px;
}
.consult-band .container{
  display:grid;grid-template-columns:1.4fr 1fr;gap:48px;align-items:center;
}
@media(max-width:900px){.consult-band .container{grid-template-columns:1fr}}
.consult-band h2{
  font-family:var(--serif);font-size:clamp(26px,3vw,38px);
  font-weight:600;color:var(--bg-dark);line-height:1.4;
  margin-bottom:18px;
}
.consult-band p{
  font-size:14px;color:var(--text-dim);line-height:1.95;margin-bottom:24px;
}
.consult-actions{display:flex;flex-direction:column;gap:14px}
.consult-phone{
  background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--accent);
  padding:20px 24px;border-radius:4px;
}
.consult-phone .ph-label{
  font-size:10px;letter-spacing:0.25em;
  color:var(--text-light);font-weight:600;margin-bottom:8px;
}
.consult-phone .ph-num{
  font-family:var(--serif);font-size:26px;
  color:var(--bg-dark);font-weight:600;letter-spacing:0.05em;
}
.consult-phone .ph-hours{
  font-size:11px;color:var(--text-dim);margin-top:6px;
}

/* ============================================
   COMPANY — WHO WE ARE (split layout)
   ============================================ */
.who-block{
  display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start;
}
@media(max-width:900px){.who-block{grid-template-columns:1fr;gap:32px}}
.who-tag{
  font-size:11px;letter-spacing:0.3em;font-weight:600;
  color:var(--accent);
  padding-top:6px;border-top:2px solid var(--accent);display:inline-block;
}
.who-block h2{
  font-family:var(--serif);font-size:clamp(28px,3.4vw,40px);
  font-weight:600;line-height:1.35;color:var(--bg-dark);
  margin:18px 0 28px;
}
.who-body p{
  font-size:14px;color:var(--text);line-height:2;margin-bottom:18px;
}
.who-quote{
  margin-top:28px;padding:20px 24px;
  background:var(--bg-alt);
  border-left:3px solid var(--accent);
  font-family:var(--serif);font-style:italic;
  font-size:15px;color:var(--bg-dark);line-height:1.8;
}

/* ============================================
   COMPANY DETAILS TABLE
   ============================================ */
.company-detail-card{
  background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:36px;border-radius:4px;
}
.company-detail-card h3{
  font-family:var(--serif);font-size:18px;font-weight:600;
  color:var(--bg-dark);margin-bottom:24px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.company-detail-card dl{display:grid;grid-template-columns:140px 1fr;gap:18px}
.company-detail-card dt{
  font-size:11px;color:var(--text-light);
  letter-spacing:0.18em;font-weight:600;padding-top:2px;
}
.company-detail-card dd{font-size:14px;color:var(--text);line-height:1.8}

/* ============================================
   REPRESENTATIVE MESSAGE
   ============================================ */
.rep-block{
  display:grid;grid-template-columns:1.4fr 1fr;gap:60px;align-items:start;
}
@media(max-width:900px){.rep-block{grid-template-columns:1fr;gap:32px}}
.rep-message h2{
  font-family:var(--serif);font-size:clamp(26px,3.2vw,36px);
  font-weight:600;color:var(--bg-dark);line-height:1.4;margin-bottom:24px;
}
.rep-message p{
  font-size:14px;color:var(--text);line-height:2;margin-bottom:18px;
}
.rep-card{
  background:var(--bg-alt);padding:28px;border-radius:4px;
  border-top:3px solid var(--accent);
}
.rep-photo{
  width:100%;aspect-ratio:1/1;
  background:linear-gradient(135deg,#2a3a52,#1a2332) center/cover no-repeat;
  border-radius:4px;margin-bottom:20px;
  overflow:hidden;position:relative;
}
.rep-photo img{
  width:100%;height:100%;
  object-fit:cover;object-position:center 22%;
  display:block;
}
.rep-photo.rep-placeholder{
  display:grid;place-items:center;
  font-family:var(--serif);font-size:64px;
  color:var(--accent);font-style:italic;font-weight:600;
}
.rep-photo.rep-placeholder::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(184,148,90,0.25),transparent 60%);
}
.rep-photo.rep-placeholder span{position:relative;z-index:1}
.rep-name{
  font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--bg-dark);margin-bottom:6px;
}
.rep-title{
  font-size:12px;color:var(--accent-dark);letter-spacing:0.1em;
  font-weight:600;margin-bottom:14px;
}
.rep-meta{font-size:12px;color:var(--text-dim);line-height:1.8}

/* ============================================
   CAREER TIMELINE
   ============================================ */
.career-timeline{
  margin-top:48px;
  background:#fff;border:1px solid var(--line);
  padding:36px;border-radius:4px;
}
.career-timeline h3{
  font-family:var(--serif);font-size:18px;font-weight:600;
  color:var(--bg-dark);margin-bottom:24px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.career-list{display:flex;flex-direction:column;gap:0}
.career-item{
  display:grid;grid-template-columns:140px 1fr;gap:24px;
  padding:14px 0;border-bottom:1px dashed var(--line);
}
.career-item:last-child{border-bottom:none}
.career-date{
  font-family:var(--serif);font-size:13px;font-weight:600;
  color:var(--accent-dark);padding-top:2px;
}
.career-desc{font-size:13px;color:var(--text);line-height:1.8}
@media(max-width:600px){
  .career-item{grid-template-columns:1fr;gap:4px}
}

/* ============================================
   EXPERTISE GRID (6 categories)
   ============================================ */
.expertise-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
@media(max-width:900px){.expertise-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.expertise-grid{grid-template-columns:1fr}}
.expertise-card{
  background:#fff;border:1px solid var(--line);
  padding:28px 24px;border-radius:4px;
  transition:all .3s;
}
.expertise-card:hover{
  border-color:var(--accent);transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,0.05);
}
.exp-tag{
  font-size:10px;letter-spacing:0.25em;font-weight:600;
  color:var(--accent);margin-bottom:14px;
}
.expertise-card h4{
  font-family:var(--serif);font-size:18px;font-weight:600;
  color:var(--bg-dark);line-height:1.4;margin-bottom:10px;
}
.expertise-card p{font-size:13px;color:var(--text-dim);line-height:1.85}
.expertise-card .exp-detail{
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--accent);font-weight:600;letter-spacing:0.05em;
}

/* ============================================
   STATS BAND
   ============================================ */
.stats-band{background:var(--bg-dark);padding:64px 32px;}
.stats-inner{
  max-width:860px;margin:0 auto;
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;
}
@media(max-width:700px){.stats-inner{grid-template-columns:repeat(2,1fr);gap:32px}}
.stat-num{
  font-family:var(--serif);font-size:clamp(42px,5vw,64px);
  font-weight:700;color:var(--accent);line-height:1;margin-bottom:10px;
}
.stat-label{font-size:11px;letter-spacing:0.2em;color:rgba(255,255,255,0.55);text-transform:uppercase;}
.stat-sub{font-size:12px;color:rgba(255,255,255,0.35);margin-top:4px;}

/* ============================================
   BUSINESS DESCRIPTION LIST (numbered)
   ============================================ */
.biz-cat{
  display:inline-block;font-size:9px;letter-spacing:0.2em;font-weight:700;
  color:var(--accent);border:1px solid var(--accent);
  padding:2px 8px;border-radius:2px;margin-bottom:8px;
}
.biz-list{
  background:#fff;border:1px solid var(--line);
  padding:36px;border-radius:4px;
}
.biz-list ol{list-style:none;counter-reset:bizc}
.biz-list li{
  counter-increment:bizc;
  display:grid;grid-template-columns:48px 1fr;gap:18px;
  padding:18px 0;border-bottom:1px dashed var(--line);
  font-size:14px;color:var(--text);line-height:1.85;
}
.biz-list li:last-child{border-bottom:none}
.biz-list li::before{
  content:counter(bizc,decimal-leading-zero);
  font-family:var(--serif);font-style:italic;font-weight:600;
  color:var(--accent);font-size:18px;
}

/* ============================================
   GET IN TOUCH BANNER
   ============================================ */
.touch-band{
  background:var(--bg-dark);color:var(--text-on-dark);
  padding:80px 32px;
}
.touch-band .container{
  display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;
}
@media(max-width:900px){.touch-band .container{grid-template-columns:1fr}}
.touch-band h2{
  font-family:var(--serif);font-size:clamp(26px,3.2vw,38px);
  font-weight:600;line-height:1.4;margin-bottom:18px;
  color:var(--text-on-dark);
}
.touch-band p{
  font-size:14px;color:rgba(245,240,230,0.75);
  line-height:1.95;margin-bottom:24px;
}
.touch-checks{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.touch-checks div{
  font-size:13px;color:rgba(245,240,230,0.85);
  padding-left:22px;position:relative;
}
.touch-checks div::before{
  content:"✓";position:absolute;left:0;color:var(--accent);font-weight:700;
}
.touch-side{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line-dark);
  padding:32px;border-radius:4px;
}
.touch-side .ts-label{
  font-size:10px;letter-spacing:0.25em;color:var(--accent);
  font-weight:600;margin-bottom:10px;
}
.touch-side .ts-phone{
  font-family:var(--serif);font-size:30px;
  color:var(--text-on-dark);font-weight:600;letter-spacing:0.05em;
  margin-bottom:10px;
}
.touch-side .ts-hours{font-size:12px;color:rgba(245,240,230,0.6);margin-bottom:24px}

/* ============================================
   REQUEST FORM PAGE
   ============================================ */
.request-wrap{
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;
}
@media(max-width:900px){.request-wrap{grid-template-columns:1fr}}
.request-form-card{
  background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--accent);
  padding:40px;border-radius:4px;
}
.request-form-card h3{
  font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--bg-dark);margin-bottom:8px;
}
.request-form-card .form-sub{
  font-size:13px;color:var(--text-dim);margin-bottom:28px;
}
.request-form{display:flex;flex-direction:column;gap:18px}
.request-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.request-form .form-row{grid-template-columns:1fr}}
/* スパム対策ハニーポット（画面外に隠す） */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
/* フォーム送信ステータス（成功・失敗メッセージ） */
.form-status{
  padding:18px 20px;border-radius:6px;font-size:14px;line-height:1.8;
  border:1px solid transparent;
}
.form-status.is-ok{background:rgba(74,170,114,0.10);border-color:rgba(74,170,114,0.45);color:#2f7d52}
.form-status.is-err{background:rgba(214,69,69,0.08);border-color:rgba(214,69,69,0.4);color:#b03434}
.request-form label{
  display:block;
  font-size:11px;letter-spacing:0.15em;
  color:var(--text);font-weight:600;
}
.request-form .req{color:var(--accent);margin-left:6px;font-size:10px;font-weight:600;letter-spacing:0.05em}
.request-form input,
.request-form select,
.request-form textarea{
  display:block;width:100%;margin-top:6px;
  background:#fbf8f3;
  border:1px solid var(--line);
  padding:12px 14px;border-radius:2px;
  color:var(--text);font-family:var(--sans);font-size:14px;
  letter-spacing:normal;font-weight:400;
  transition:border-color .2s;
}
.request-form input:focus,
.request-form select:focus,
.request-form textarea:focus{
  outline:none;border-color:var(--accent);background:#fff;
}
.request-form textarea{resize:vertical;min-height:120px}
.radio-row{display:flex;gap:24px;font-weight:400;font-size:13px;color:var(--text);letter-spacing:normal}
.radio-row input{margin-right:6px;accent-color:var(--accent)}
.request-form .btn-primary{margin-top:8px;align-self:flex-start;color:#fff}
.request-form .btn-primary:hover{background:var(--bg-dark);border-color:var(--bg-dark);color:#fff}

.request-side{display:flex;flex-direction:column;gap:20px}
.side-card{
  background:#fff;border:1px solid var(--line);
  padding:28px;border-radius:4px;
  border-top:3px solid var(--accent);
}
.side-card .sc-tag{
  font-size:10px;letter-spacing:0.25em;color:var(--accent);
  font-weight:600;margin-bottom:10px;
}
.side-card h4{
  font-family:var(--serif);font-size:18px;font-weight:600;
  color:var(--bg-dark);margin-bottom:12px;
}
.side-card p{font-size:13px;color:var(--text-dim);line-height:1.85;margin-bottom:14px}
.side-card .side-phone{
  font-family:var(--serif);font-size:24px;
  color:var(--bg-dark);font-weight:600;letter-spacing:0.05em;
  margin-bottom:6px;
}
.side-card .side-hours{font-size:11px;color:var(--text-light)}
.line-qr{
  width:100px;height:100px;
  background:linear-gradient(135deg,#1a2332,#2a3a52);
  display:grid;place-items:center;
  border-radius:4px;margin-top:8px;
  color:var(--accent);font-size:32px;
}

/* ============================================
   MOBILE NAV REFINEMENTS
   ============================================ */
@media(max-width:960px){
  .nav-links{padding:24px 32px 32px}
  .nav-links > a{font-size:13px}
}

/* ============================================
   LEGAL PAGES (Privacy Policy, etc.)
   ============================================ */
.legal-doc{
  max-width:760px;
  margin:0 auto;
  padding:48px 0 64px;
  font-size:15px;
  line-height:1.95;
  color:var(--text);
}
.legal-meta{
  font-size:13px;
  color:var(--text-dim);
  margin-bottom:32px;
  letter-spacing:0.05em;
}
.legal-doc h2{
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
  margin:40px 0 16px;
  color:var(--navy);
  letter-spacing:0.02em;
}
.legal-doc h2:first-of-type{margin-top:8px}
.legal-doc p{margin-bottom:16px}
.legal-doc ul{
  margin:0 0 20px 1.2em;
  padding:0;
}
.legal-doc li{margin-bottom:8px}
.legal-doc a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.legal-doc a:hover{color:var(--navy)}
.legal-dl{
  display:grid;
  grid-template-columns:140px 1fr;
  gap:12px 24px;
  margin:0 0 24px;
  padding:20px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:4px;
}
.legal-dl dt{font-weight:600;color:var(--navy);font-size:14px}
.legal-dl dd{margin:0;font-size:14px}
@media(max-width:600px){
  .legal-dl{grid-template-columns:1fr;gap:4px}
  .legal-dl dt{margin-top:12px}
  .legal-dl dt:first-child{margin-top:0}
}

/* ============================================
   INFO CALLOUT BOXES (BGC / PEZA)
   ============================================ */
.callout-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  margin:48px 0;
}
@media(max-width:900px){.callout-grid{grid-template-columns:1fr}}
.info-callout{
  padding:24px 28px;background:var(--bg-alt);
  border-radius:4px;border-left:3px solid var(--accent);
}
.info-callout--green{border-left-color:#4a7c6f}
.info-callout__tag{
  font-size:11px;letter-spacing:0.12em;color:var(--accent);
  font-weight:700;margin-bottom:10px;
}
.info-callout--green .info-callout__tag{color:#4a7c6f}
.info-callout__body{
  font-size:13px;line-height:1.85;color:var(--text);margin:0 0 14px;
}
.info-callout__list{
  margin:0;padding-left:18px;font-size:13px;color:var(--text);line-height:2;
}
.info-callout__list li{margin-bottom:4px}

/* ============================================
   CALLOUT TABS (BGC / PEZA)
   ============================================ */
.callout-tabs{
  margin:48px 0;
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
  background:#fff;
}
.tab-nav{
  display:flex;
  background:var(--bg-alt);
  border-bottom:1px solid var(--line);
}
.tab-btn{
  flex:1;
  padding:18px 28px;
  background:transparent;
  border:none;
  border-bottom:3px solid transparent;
  font-family:var(--sans);
  font-size:13px;font-weight:600;
  letter-spacing:0.08em;
  color:var(--text-dim);
  cursor:pointer;
  text-align:left;
  transition:color .2s,border-color .2s,background .2s;
}
.tab-btn:hover{color:var(--text);background:rgba(0,0,0,0.02)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent);background:#fff}
.tab-btn--green.active{color:#4a7c6f;border-bottom-color:#4a7c6f}
.tab-panel{display:none;padding:36px 40px}
.tab-panel.active{display:block}
.tab-panel .info-callout__tag{color:var(--accent)}
.tab-panel--green .info-callout__tag{color:#4a7c6f}
@media(max-width:600px){
  .tab-btn{padding:14px 16px;font-size:12px}
  .tab-panel{padding:24px 20px}
}

/* ============================================
   DATA CHART GRID (below business block)
   ============================================ */
.data-chart-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
  margin:0 0 80px;
}
@media(max-width:900px){.data-chart-grid{grid-template-columns:1fr}}
.data-chart-grid .detail-visual{height:320px}
.data-chart-grid--wide{grid-template-columns:1fr;margin-bottom:80px}
.data-chart-grid--wide .detail-visual{height:280px}
/* 日本との比較 */
.cmp-head{max-width:760px;margin:8px 0 28px}
.cmp-title{font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:600;color:var(--bg-dark);margin-bottom:12px;line-height:1.4}
.cmp-lead{font-size:14px;color:var(--text-dim);line-height:1.9}
.jp-ph-compare{display:grid;grid-template-columns:1.25fr 1fr;gap:28px;align-items:start}
@media(max-width:900px){.jp-ph-compare{grid-template-columns:1fr}}
.cmp-table{width:100%;border-collapse:collapse;font-size:13px;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.cmp-table th,.cmp-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table thead th{background:var(--bg-dark);color:#fff;font-weight:600;font-size:12px;letter-spacing:.04em}
.cmp-table tbody th{font-weight:600;color:var(--text);background:var(--bg-alt);white-space:normal}
.cmp-table td.ph{color:var(--accent-dark);font-weight:700}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:none}
.jp-ph-compare .detail-visual{height:360px}
/* 比較ハイライト（数値）＋比較グラフ */
.cmp-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:4px 0 30px}
@media(max-width:680px){.cmp-highlights{grid-template-columns:1fr}}
.cmp-hl{background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:6px;padding:22px 24px}
.cmp-hl .big{font-family:var(--serif);font-size:clamp(28px,3.4vw,38px);font-weight:700;color:var(--accent-dark);line-height:1.05}
.cmp-hl .lbl{font-size:13px;font-weight:700;color:var(--bg-dark);margin-top:10px}
.cmp-hl .sub{font-size:12px;color:var(--text-dim);margin-top:4px;line-height:1.6}
.cmp-charts{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-bottom:28px}
@media(max-width:900px){.cmp-charts{grid-template-columns:1fr}}
.cmp-charts .detail-visual{height:320px}
/* 注目産業スポット（外食産業など） */
.industry-spot{background:#fff;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;padding:24px 28px;margin-bottom:32px}
.industry-spot .is-tag{font-size:12px;letter-spacing:.1em;font-weight:700;color:var(--accent-dark);margin-bottom:10px}
.industry-spot .is-lead{font-size:14px;color:var(--text-dim);line-height:1.9;margin-bottom:18px;max-width:780px}
.industry-spot .is-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:10px}
@media(max-width:680px){.industry-spot .is-stats{grid-template-columns:1fr 1fr}}
.industry-spot .is-stats strong{display:block;font-family:var(--serif);font-size:clamp(20px,2.4vw,26px);font-weight:700;color:var(--bg-dark);line-height:1.15}
.industry-spot .is-stats span{display:block;font-size:11px;color:var(--text-dim);margin-top:6px;line-height:1.5}
.page-hero--economy .hero-bg{background-image:url("img/hero-business.jpg"),linear-gradient(135deg,#2a3a52 0%,#1a2332 100%)}
.eco-link-banner{
  background:var(--bg-dark,#1a2332);border-radius:8px;
  padding:28px 36px;display:flex;align-items:center;
  justify-content:space-between;gap:24px;margin:32px 0 72px;
}
.eco-link-banner .section-tag{color:rgba(184,148,90,0.85);display:block;margin-bottom:6px}
.eco-link-banner h4{font-size:17px;color:#fff;margin:0 0 6px;font-family:var(--serif)}
.eco-link-banner p{font-size:13px;color:rgba(255,255,255,0.6);margin:0}
@media(max-width:768px){.eco-link-banner{flex-direction:column}}
/* フィリピン経済動向 誘導（トップページ） */
.ph-cta{background:linear-gradient(135deg,#2a3a52 0%,#1a2332 100%);color:var(--text-on-dark);padding:84px 32px}
.ph-cta-inner{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
@media(max-width:900px){.ph-cta-inner{grid-template-columns:1fr;gap:32px}}
.ph-cta-copy h2{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);font-weight:600;line-height:1.4;margin:14px 0 18px;color:#fff}
.ph-cta-copy p{font-size:15px;line-height:2;color:rgba(245,240,230,0.82);margin-bottom:30px;max-width:580px}
.ph-cta-stats{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ph-cta-stats > div{padding:20px;background:rgba(255,255,255,0.04);border:1px solid rgba(184,148,90,0.28);border-radius:8px}
.ph-cta-stats strong{display:block;font-family:var(--serif);font-size:clamp(24px,3vw,32px);font-weight:600;color:var(--accent);line-height:1.1}
.ph-cta-stats span{display:block;font-size:11px;letter-spacing:0.06em;color:rgba(245,240,230,0.62);margin-top:8px;line-height:1.5}
.ph-region-layout{display:grid;grid-template-columns:300px 1fr;gap:24px;margin-bottom:80px;align-items:start}
@media(max-width:1000px){.ph-region-layout{grid-template-columns:1fr}}
.ph-map-card{background:#fff;border:1px solid var(--line);border-radius:4px;padding:24px}
.ph-map-card svg{width:100%;height:auto;display:block}
.ph-map-legend{margin-top:14px;display:flex;flex-wrap:wrap;gap:5px 14px}
.ph-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text)}
.ph-legend-dot{border-radius:50%;flex-shrink:0;display:inline-block}
/* ─ region breakdown cards ─ */
.region-cards{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.region-card{background:#fff;border:1px solid var(--line,#e0d8cc);border-radius:6px;padding:11px 14px}
.rc-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px}
.rc-title{display:flex;align-items:center;gap:7px;min-width:0}
.rc-code{font-size:9px;font-weight:700;background:var(--bg-dark,#1a2332);color:#fff;padding:2px 7px;border-radius:3px;letter-spacing:.5px;white-space:nowrap;flex-shrink:0}
.rc-name{font-size:12px;color:var(--text,#3a3228);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-total{font-size:13px;font-weight:700;color:var(--accent,#b8945a);white-space:nowrap;flex-shrink:0}
.rc-bar{display:flex;height:20px;border-radius:4px;overflow:hidden;gap:1px}
.rc-seg{height:100%;min-width:3px}
.rc-legend{display:flex;flex-wrap:wrap;gap:3px 10px;margin-top:6px}
.rc-legend span{font-size:10px;color:#666;display:flex;align-items:center;gap:3px}
.rc-legend i{width:8px;height:8px;border-radius:1px;display:inline-block;flex-shrink:0}
.rc-nat-legend{display:flex;flex-wrap:wrap;gap:5px 12px;margin-bottom:10px;padding:7px 10px;background:#f8f4ef;border-radius:4px}
.rc-nat-legend span{font-size:11px;color:#555;display:flex;align-items:center;gap:4px}
.rc-nat-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;flex-shrink:0}
.data-chart-source{
  font-size:11px;color:var(--text-light);
  margin-top:8px;text-align:right;
}

/* ============================================
   LINE BANNER
   ============================================ */
@media(max-width:900px){
  .line-banner-section>div>a{flex-direction:column}
  .line-banner-section>div>a>div:nth-child(2){width:100%;flex-direction:row;justify-content:flex-start;padding:20px 20px 16px;gap:16px}
  .line-banner-section>div>a>div:nth-child(3){display:none}
  .line-banner-section>div>a>div:nth-child(4){padding:4px 20px 20px}
  .line-banner-section>div>a>div:nth-child(5){width:100%;flex-direction:row;flex-wrap:wrap;padding:20px;gap:16px;justify-content:space-between}
}
@media(max-width:600px){
  .line-banner-section>div>a>div:nth-child(4)>div:nth-child(2){font-size:22px!important}
  .line-banner-section>div>a>div:nth-child(5)>span:first-child{font-size:13px!important}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}