@charset "UTF-8";
/* =========================================================
   Business (共通)  ─  色は body のテーマ変数を参照
   変数: --sys-link（ボタン/下線/リンク）, --sys-accent1（見出し）
========================================================= */

/* ---------- 共通カラーフォールバック ---------- */
#business-page{
  --panel-bd:   #e3eaf5;
  --panel-bg:   #ffffff;
  --panel-shadow: 0 10px 26px rgba(55,90,140,.08);
}

/* ---------- Sub Hero ---------- */
#business-page .hero.section--sub{
  display:block; text-align:left;
  min-height:50vh;
  padding-top: calc(var(--header-h, 72px) + 16px);
  padding-bottom: 24px;
  position:relative;
}
#business-page .hero--img .hero-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter: grayscale(78%) brightness(.72) saturate(1.05);
  z-index:0;
}
#business-page .hero--img .hero-overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(8,16,32,.58), rgba(8,16,32,.36));
}
#business-page .hero.section--sub .container{
  position:relative; z-index:2;
  max-width:1120px; top:10vh;
  padding-left: min(6vw, 40px);
  padding-right:16px;
}
#business-page .hero.section--sub .hero-title{
  font-size: clamp(2rem, 5vw, 3rem);
  line-height:1.22; font-weight:800;
  letter-spacing:.02em; margin:0 0 8px;
}

/* SP のはみ出し対策 */
@media (max-width:560px){
  #business-page .hero.section--sub .hero-title{
    white-space: normal !important;
    overflow-wrap:anywhere; word-break:break-word;
    font-size: clamp(1.6rem, 6.8vw, 2.1rem);
    line-height:1.28; margin-bottom:.4em;
  }
  #business-page .hero.section--sub .container{
    padding-left:16px; padding-right:16px; top:6vh;
  }
}

/* ---------- Breadcrumb（文字だけ） ---------- */
#business-page .breadcrumb{
  background:none !important; border:0 !important; box-shadow:none !important;
  padding:0 !important; margin:0 0 20px;
  font-size:.92rem; color:#000;
  display:inline-flex; gap:.35em; align-items:center;
}
#business-page .breadcrumb a{
  color:#000; font-weight:600; text-decoration:none; transition:opacity .2s ease;
}
#business-page .breadcrumb a:hover{ opacity:.6; text-decoration:underline; }
#business-page .breadcrumb .sep{ opacity:.6; font-weight:600; }

/* ---------- Panel / Intro ---------- */
#business-page .panel{
  background: var(--panel-bg);
  border:1px solid var(--panel-bd);
  border-radius:14px; padding:24px 22px;
  box-shadow: var(--panel-shadow);
}
#business-page .intro-panel h2{ margin-bottom:10px; }

/* ---------- Local Buttons（任意） ---------- */
#business-page .local-nav{ display:flex; justify-content:center; gap:16px; padding-top:16px; }
#business-page .local-nav .btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:200px; padding:10px 18px;
  font-size:1rem; font-weight:700; letter-spacing:.02em;
  color: var(--sys-ink); background:#fff;
  border:1.5px solid #cad6e6; border-radius:12px;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  outline:none;
}
#business-page .local-nav .btn:hover{
  transform: translateY(-1px);
  background:#eef3fb; border-color:#bcd0ea;
  box-shadow:0 10px 24px rgba(71,109,158,.16);
}
#business-page .local-nav .btn:focus-visible{
  outline:3px solid rgba(71,109,158,.35); outline-offset:2px;
}

/* ---------- Industry Cards ---------- */
#business-page .industry-grid{
  display:flex; flex-direction:column;
  gap:40px; margin-top:32px;
}
#business-page .industry.panel{ padding:22px; }
#business-page .industry .ind-title{ color: var(--sys-accent1); }
#business-page .industry .lede{ color:#4e564e; margin:6px 0 12px; }
#business-page .industry .industry-intro{
  margin:2px 0 16px; font-size:.98rem; line-height:1.78; color:#4a4f4a;
}

/* 2カラム＋横長画像 */
#business-page .industry-inner{
  display:flex; gap:28px; align-items:center;
}
#business-page .industry-text{ flex:1 1 58%; }
#business-page .industry-image{ flex:1 1 42%; }
#business-page .industry-image .media-figure{
  width:100%; aspect-ratio: 3 / 2; /* 横長 */
  border-radius:12px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
#business-page .industry-image img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (max-width:780px){
  #business-page .industry-inner{ flex-direction:column; }
  #business-page .industry-image{ width:100%; }
}

/* ---------- スクロールイン（共通） ---------- */
#business-page .reveal-section .panel,
#business-page .industry.panel{
  opacity:0; transform:translateY(38px);
  transition: opacity .9s ease, transform .9s ease;
}
#business-page .industry.panel{ transition-delay: calc(var(--stagger,0) * 120ms); }
#business-page .inview{ opacity:1 !important; transform:none !important; }

/* =========================================================
   CTA（共通）  ─  色は --sys-link、背景の色味はテーマ側で指定
========================================================= */
.footer-cta{ position:relative; padding: clamp(40px, 6vw, 72px) 0; overflow:hidden; }
.footer-cta::before{
  content:""; position:absolute; inset:-80px -20% auto -20%;
  z-index:0; pointer-events:none; /* 背面の“にじみ”グラデ。色味はテーマで上書き */
}
.footer-cta .cta-card{
  position:relative; z-index:1;
  background:#fff;
  border:1px solid var(--panel-bd, #e3eaf5);
  border-radius:16px;
  box-shadow: var(--panel-shadow, 0 10px 26px rgba(55,90,140,.08));
  max-width:880px; margin:0 auto;
  padding: clamp(22px, 4vw, 36px) clamp(20px, 4vw, 40px);
  text-align:center;
}
.footer-cta .cta-eyebrow{
  display:inline-block; font-size:.78rem; letter-spacing:.12em; font-weight:800;
  color: var(--sys-link);
  background: #eef3fb; border: 1px solid #d9e5f4;
  border-radius:999px; padding:6px 10px; margin:0 0 10px;
}
.footer-cta h2{
  font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  line-height:1.25; margin:0 0 10px;
  color: var(--sys-ink, #1f2630);
  font-weight:800;
}
/* ボタン：色は変数で統一（ここに !important なしでOK。競合を避ける） */
.footer-cta .cta-card .cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 24px;
  background: var(--sys-link);
  color:#fff; border:0; border-radius:10px;
  box-shadow: 0 8px 16px rgba(0,0,0,.12);
  text-decoration:none; cursor:pointer;
  transition: transform .18s ease, box-shadow .25s ease, opacity .18s ease;
}
.footer-cta .cta-card .cta-btn:hover{
  transform: translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.18);
}
.footer-cta .cta-card .cta-arrow{ transition: transform .2s ease; }
.footer-cta .cta-card .cta-btn:hover .cta-arrow{ transform: translateX(3px); }

/* フェードイン */
.footer-cta .cta-card{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.footer-cta .cta-card.is-inview{ opacity:1; transform:none; }

/* =========================================================
   Typer（共通） ─ currentColor を --sys-link に合わせる
========================================================= */
#business-page .lede.typer{
  position:relative; display:inline-block; padding-bottom:4px;
  color: var(--sys-link);
}
#business-page .lede.typer{ visibility: hidden; }
#business-page .lede.typer::after{
  content:""; display:inline-block; width:2px; height:1em; margin-left:4px;
  background: currentColor; opacity:.9; vertical-align:-0.1em;
  animation: blink 1s steps(1,end) infinite;
}
#business-page .lede.typer::before{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background: currentColor; transform:scaleX(0); transform-origin:left center;
  transition: transform .45s ease .1s;
}
#business-page .lede.typer.is-complete::before{ transform:scaleX(1); }
#business-page .lede.typer.is-complete::after{ opacity:0; transition:opacity .25s ease; }
@keyframes blink{ 50%{ opacity:0; } }
/* local-nav のボタン体裁（既にあれば不要） */
#business-page .industry-solutions .local-nav{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:8px;
}
#business-page .industry-solutions .local-nav .btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; border-radius:10px; font-weight:700;
  background: var(--sys-link); color:#fff; text-decoration:none;
  transition: transform .15s ease, box-shadow .2s ease;
}
#business-page .industry-solutions .local-nav .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
}

/* Instagramはアウトライン版 */
#business-page .industry-solutions .local-nav .btn-ig{
  background: transparent; color: var(--sys-link);
  border: 1.5px solid var(--sys-link);
}
#business-page .industry-solutions .local-nav .btn-ig:hover{
  background: color-mix(in srgb, var(--sys-link) 10%, #fff);
}
#business-page .industry-solutions .local-nav .btn-ig .ig-icon{
  width:1em; height:1em; display:inline-block;
}
/* ===== Flower/共通：ローカルCTAボタンをそろえる ===== */
#business-page .industry-solutions .local-nav{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:stretch;              /* 高さを揃える */
  margin-top:10px;
}

/* ボタンの共通骨格（高さ/余白/丸み/文字揃えを統一） */
#business-page .industry-solutions .local-nav .btn{
  --btn-h: 52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height: var(--btn-h);
  padding: 0 24px;                  /* 左右だけ指定 → 高さはmin-heightで統一 */
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;                   /* 文字の縦位置ぶれを防ぐ */
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid transparent;    /* 枠線の太さをどちらも2pxで統一 */
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}

/* オンラインショップ（塗りつぶし） */
#business-page .industry-solutions .local-nav .btn.btn-shop{
  background: var(--sys-link);
  color: #fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--sys-link) 28%, #0000);
}
#business-page .industry-solutions .local-nav .btn.btn-shop:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--sys-link) 36%, #0000);
}

/* Instagram（アウトライン） */
#business-page .industry-solutions .local-nav .btn.btn-ig{
  background: #fff;
  color: var(--sys-link);
  border-color: var(--sys-link);
}
#business-page .industry-solutions .local-nav .btn.btn-ig:hover{
  background: color-mix(in srgb, var(--sys-link) 10%, #fff);
}

/* アイコンのズレをなくす（高さ＆ベースラインを固定） */
#business-page .industry-solutions .local-nav .btn .ig-icon{
  width: 18px;
  height: 18px;
  display: block;     /* inlineだとベースラインでズレやすい */
}

/* モバイル：横並びで窮屈なら縦並びに */
@media (max-width:560px){
  #business-page .industry-solutions .local-nav{
    gap:10px;
  }
  #business-page .industry-solutions .local-nav .btn{
    flex: 1 1 100%;
  }
}
/* ボタンの共通骨格：縦位置ズレ解消（inline-gridで中央に） */
#business-page .industry-solutions .local-nav{
  display:flex; flex-wrap:wrap; gap:14px; margin-top:10px;
}

#business-page .industry-solutions .local-nav .btn{
  --btn-h: 52px;
  display: inline-grid;                 /* ← これが効きます */
  grid-auto-flow: column;
  place-items: center;                  /* 縦横とも中央に */
  gap: 10px;

  height: var(--btn-h);                 /* 固定高にして光学中心を安定 */
  padding: 0 24px;
  box-sizing: border-box;               /* 枠線を高さに含める */
  border-radius: 12px;
  border: 2px solid transparent;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;                       /* テキストの上下ムラを抑える */
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s, box-shadow .2s, background-color .2s, color .2s;
}

/* 塗りつぶし（ショップ） */
#business-page .industry-solutions .local-nav .btn.btn-shop{
  background: var(--sys-link);
  color:#fff;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--sys-link) 28%, #0000);
}
#business-page .industry-solutions .local-nav .btn.btn-shop:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--sys-link) 36%, #0000);
}

/* アウトライン（Instagram） */
#business-page .industry-solutions .local-nav .btn.btn-ig{
  background:#fff;
  color: var(--sys-link);
  border-color: var(--sys-link);
}
#business-page .industry-solutions .local-nav .btn.btn-ig:hover{
  background: color-mix(in srgb, var(--sys-link) 10%, #fff);
}

/* アイコンの縦ズレもゼロに */
#business-page .industry-solutions .local-nav .btn .ig-icon{
  width: 18px; height: 18px; display: block;
}

/* モバイルで縦積み */
@media (max-width:560px){
  #business-page .industry-solutions .local-nav{ gap:10px; }
  #business-page .industry-solutions .local-nav .btn{ flex:1 1 100%; }
}