@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&family=Inter:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

:root{
  --accent:#5CE626;
  --text:#0b0b0b;
  --bg:#fff;
  --line:#000;
  --muted:#f6f6f6;
  --section-icon-url:url("/assets/Mark_color.png");
  --section-icon-size:36px;
  --radius-lg:16px;
  --radius-md:14px;
  --shadow-sm:0 2px 8px rgba(0,0,0,.08);
  --shadow-md:0 6px 16px rgba(0,0,0,.12);
}
html,body{height:100%}
body{
  color:var(--text);background:var(--bg);
  font-family:"Inter","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
  line-height:1.65
}
a{color:#ee7800;text-decoration:none} a:hover{text-decoration:underline}
.section{padding:1.4rem 0}
h1,h2,h3,.brand-text,.section-title span{
  font-family:"Orbitron","M PLUS 1p","Noto Sans JP",sans-serif;letter-spacing:.5px
}

/* Header / Footer */
header{background:#000}
.navbar{border-bottom:2px solid #111}
.navbar .brand-text{color:#fff;font-weight:800;letter-spacing:1px}
.navbar .nav-link{color:#fff}
.navbar .nav-link:hover{color:#fff}
.dropdown-menu{background:#111;border:none}
.dropdown-menu .dropdown-item{color:#fff}
.dropdown-menu .dropdown-item:hover{background:#000;color:#fff}
footer{background:#000;border-top:2px solid #111;color:#fff}
/* Brand logo image */
.navbar .brand-logo{height:28px;width:auto;display:block}
/* Header button hover visibility fix */
header{position:relative;z-index:1000;overflow:visible}
.navbar{overflow:visible}
.navbar .btn-outline-accent{position:relative;z-index:1}
.navbar .btn-outline-accent:hover{transform:none}

/* Buttons */
.btn-accent{background:var(--accent);color:#000;border:none;box-shadow:var(--shadow-sm);font-weight:800}
.btn-accent:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
.btn-outline-accent{background:#fff;color:#000;border:none;box-shadow:var(--shadow-sm);font-weight:700}
.btn-outline-accent:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}

/* ===== TOP専用�E�E�E�動画ヒ�Eロー ===== */
.home .hero{
  position:relative;min-height:68vh;display:flex;align-items:center;border-bottom:2px solid var(--line);
}
@media (min-width:992px){.home .hero{min-height:78vh}}
.hero .hero-video-wrap{position:absolute;inset:0;overflow:hidden}
.hero .hero-video-wrap video{width:100%;height:100%;object-fit:cover}
.hero .hero-video-wrap .hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.38)}
.hero-wide .hero-inner{max-width:1480px;margin-inline:auto;padding-inline:clamp(16px,3vw,40px)}
.home .page-hero{background:transparent;border-bottom:none;padding:0}

/* ===== サブ�Eージ�E�E�E�チE��ストヒーロー ===== */
.page-hero{position:relative;border-bottom:2px solid var(--line);background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0))}
.page-hero .container{padding-top:3.2rem;padding-bottom:2.4rem}
.page-hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;font-size:.8rem;letter-spacing:.06em;background:#111;color:#fff;border-radius:999px;padding:.35rem .7rem;box-shadow:var(--shadow-sm)}
.page-hero .title{margin:.8rem 0 .25rem;font-weight:800;line-height:1.15}
.page-hero .lead{color:#1a1a1a;margin-bottom:1rem;max-width:60ch}
.page-hero .lead{white-space:nowrap;max-width:none;font-size:clamp(.92rem,2.4vw,1.05rem)}
.page-hero .cta-wrap{display:flex;flex-wrap:wrap;gap:.6rem}

/* Section title with logo-mark */
.section-title{display:flex;align-items:center;gap:.6rem;padding-bottom:.9rem;border-bottom:2px solid var(--line);margin-bottom:1.0rem}
.section-title::before{content:"";width:var(--section-icon-size);height:var(--section-icon-size);flex:0 0 var(--section-icon-size);background-image:var(--section-icon-url);background-size:contain;background-repeat:no-repeat;background-position:center}
.section-title span{font-weight:800;font-size:clamp(1.1rem,2vw,1.3rem)}

/* Larger icon and tighter gap specifically for h2 section titles */
h2.section-title{gap:.35rem}
h2.section-title::before{width:44px;height:44px;flex:0 0 44px}

/* ===== TOP既存カード（維持E�E��E�E===== */
.accent-left,.mini-card,.card-spike,.news-item{position:relative;background:#fff;border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.accent-left::before,.mini-card::before,.card-spike::before,.news-item::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--accent);border-radius:var(--radius-md) 0 0 var(--radius-md)}
.accent-left:hover,.mini-card:hover,.card-spike:hover,.news-item:hover{box-shadow:var(--shadow-sm);transform:none}
.mini-card{padding:1.2rem 1.4rem}
.mini-card-title{font-size:1.1rem;font-weight:800;margin:0 0 .6rem;color:#000}
.mini-card-text{color:#1f1f1f;margin:0 0 .9rem;line-height:1.7}

/* ===== 事業紹介用 新カーチE===== */
.biz-card{position:relative;background:#fff;border:1px solid #e9e9e9;border-radius:16px;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.06);transition:transform .2s ease, box-shadow .2s ease}
.biz-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:6px;background:linear-gradient(90deg,var(--accent),#9BFF6E)}
.biz-card .body{padding:1.25rem 1.4rem}
.biz-card .icon{width:56px;height:56px;border-radius:999px;background:#f2f2f2;display:flex;align-items:center;justify-content:center;font-size:26px;margin-bottom:.6rem;border:1px solid #e9e9e9}
.biz-card h3{font-size:1.05rem;font-weight:800;margin-bottom:.35rem}
.biz-card p{margin-bottom:.4rem;color:#1e1e1e}
.biz-card ul{margin:0 0 .2rem 1.2rem}
.biz-card:hover{transform:none;box-shadow:0 4px 14px rgba(0,0,0,.06)}

/* Media / Tiles / Misc */
.card-minimal{border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:#fff}
.card-minimal:hover{box-shadow:var(--shadow-sm);transform:none}
.card-minimal .card-body{padding:1.2rem 1.4rem}
.card-media{display:flex;gap:1rem;align-items:flex-start;border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:#fff;padding:1rem 1.25rem}
.card-media:hover{box-shadow:var(--shadow-sm);transform:none}
.card-media .media-icon{width:56px;height:56px;border-radius:12px;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:26px}
.block-strong{border-left:6px solid var(--accent);border-radius:var(--radius-md);background:#fff;box-shadow:var(--shadow-sm);padding:1.0rem 1.2rem}

.image-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
@media (max-width:991px){.image-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:575px){.image-grid{grid-template-columns:1fr}}
.img-tile{position:relative;border-radius:12px;overflow:hidden;background:#eee;aspect-ratio:16/9}
.img-tile img,.img-tile iframe{width:100%;height:100%;object-fit:cover;display:block}

/* News list */
.news-list{display:grid;gap:1.1rem}
.news-item{position:relative;background:#fff;border:none;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:1rem 1.25rem 1rem 1.6rem}
.news-item:hover{box-shadow:var(--shadow-sm);transform:none}
.news-item time{display:inline-block;min-width:7.2rem;font-variant-numeric:tabular-nums;color:#222}
.news-item .title{font-weight:800;color:#ee7800;text-decoration:none}
/* Remove hover animation/effect on news titles */
.news-item .title:hover{ text-decoration:none; }

/* Forms - 1衁E頁E�E��E� */
.form-vert .form-group{margin-bottom:1rem}
.form-label{font-weight:700;color:#111;margin-bottom:.35rem}
.form-control,.form-select,.form-check-input{border:1px solid #d9d9d9;border-radius:12px;padding:.65rem .9rem}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 .2rem rgba(92,230,38,.15);border-color:#bfbfbf}
.contact-card{background:#fff;border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.0rem}

/* カスタムチェチE�E��E��E�E�E��E�Eライバシー同意�E�E�E�E*/
.custom-check{width:18px;height:18px;border:2px solid #bdbdbd;border-radius:6px}
.custom-check:focus{outline:none;box-shadow:0 0 0 .18rem rgba(92,230,38,.18)}
.custom-check:checked{background-color:var(--accent);border-color:var(--accent)}

/* Pills / Tabs / Utility */
.pills{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{padding:.35rem .6rem;border-radius:999px;font-weight:700;font-size:.85rem;color:#0b0b0b;background:#f3f3f3;box-shadow:var(--shadow-sm)}
.pill.green{background:#EAFBE4}.pill.blue{background:#EAF3FF}.pill.purple{background:#F4EAFE}.pill.orange{background:#FFF0E1}.pill.gray{background:#EFEFEF}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.tab-btn{border:none;background:#f3f3f3;border-radius:999px;padding:.4rem .75rem;font-weight:700}
.tab-btn.active{background:var(--accent);color:#000}
.tab-panel{display:none}.tab-panel.active{display:block}
.text-muted-80{color:#333}
.logo-slot{background:#111;color:#fff;border-radius:12px;padding:.6rem .8rem;display:inline-flex;align-items:center;gap:.5rem}
.logo-slot img{max-height:9cm}
/* esports.html media section: show logo only and allow adjustable size */
#media .logo-slot .small{display:none}
#media .logo-slot img{height:var(--logo-size,90px);width:auto}
/* esports.html: remove logo-slot background and extra padding in media section */
#media .logo-slot{background:transparent;color:inherit;border-radius:0;padding:0;box-shadow:none}

/* ===== 会社概要E�E��E�フラチE�E��E�化（アクセンチE影なし！E===== */
.company-card{padding:0;border:none;border-radius:0;background:transparent;box-shadow:none}
.company-card.no-shadow{box-shadow:none}
.company-card.no-bg{background:transparent}
.kv-table{background:#fff;border-radius:12px;box-shadow:none;overflow:hidden}
/* アクセント�E左帯を削除�E�E�E�以前�E持E�E��E�を上書き！E*/
.kv-table.flat{border-left:none}
.kv-row{display:grid;grid-template-columns:180px 1fr;gap:0;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0}
.kv-row:first-child{border-top:none}
.kv-row:last-child{border-bottom:none}
.kv-key{background:#fafafa;font-weight:700;color:#0f0f0f;padding:.75rem .9rem;border-right:1px solid #e0e0e0}
.kv-val{padding:.75rem 1rem;border-left:1px solid #f2f2f2}

/* ===== Cases Carousel (marketing.html) ===== */
.case-carousel{position:relative}
.case-carousel{display:none !important}
.case-carousel .cc-track{display:flex;gap:1rem;overflow-x:auto;padding:.3rem .2rem 1rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.case-card{flex:0 0 100%;max-width:100%;scroll-snap-align:start;background:#fff;border:1px solid #e9e9e9;border-radius:16px;box-shadow:var(--shadow-sm);padding:1rem 1.1rem}
.case-title{font-size:1.05rem;font-weight:800;margin:0 0 .25rem;color:#000}
.case-sub{margin:0 0 .6rem;color:#1e1e1e}
.case-meta .kv{display:grid;grid-template-columns:108px 1fr;gap:.5rem;padding:.45rem .55rem;background:#fafafa;border:1px solid #eee;border-radius:10px;margin:.45rem 0}
.case-meta .k{font-weight:700;color:#0f0f0f}
.case-meta .v{color:#111}

/* ===== Cases: Brush-up for Bootstrap carousel in marketing.html ===== */
#cases #casesCarousel{display:block}
#cases .carousel{position:relative}
#cases .carousel-inner{padding:0.4rem 0 1.2rem}
#cases .carousel-item{display:flex;justify-content:center;padding:0 0.2rem}
/* Modern, simple card inside slides */
#cases .case-card-modern{background:#fff;border:1px solid #e9e9e9;border-radius:16px;box-shadow:var(--shadow-sm);padding:1.1rem 1.2rem;max-width:880px;width:100%}
#cases .case-card-modern .title{font-size:1.05rem;font-weight:800;margin:0 0 .35rem;color:#000}
#cases .case-card-modern .sub{margin:0 0 .6rem;color:#1a1a1a}
#cases .case-card-modern .kv{display:grid;grid-template-columns:108px 1fr;gap:.5rem;padding:.5rem .6rem;background:#fafafa;border:1px solid #eee;border-radius:10px;margin:.45rem 0}
#cases .case-card-modern .kv .k{font-weight:700;color:#0f0f0f}
#cases .case-card-modern .kv .v{color:#111}
#cases .case-card-modern .top-accent{content:"";display:block;height:6px;background:linear-gradient(90deg,var(--accent),#9BFF6E);border-radius:12px 12px 0 0;margin:-1.1rem -1.2rem .8rem -1.2rem}

/* Custom prev/next buttons (overlay circles) */
/* Custom circular controls with triangle marks */
#cases .carousel-control-prev,#cases .carousel-control-next{top:50%;bottom:auto;transform:translateY(-50%);width:44px;height:44px;background:#111;border-radius:999px;opacity:.95;box-shadow:var(--shadow-sm)}
#cases .carousel-control-prev:hover,#cases .carousel-control-next:hover{opacity:1}
#cases .carousel-control-prev{left:-6px}
#cases .carousel-control-next{right:-6px}
#cases .carousel-control-prev-icon,#cases .carousel-control-next-icon{background-image:none !important;filter:none;width:100%;height:100%;position:relative}
#cases .carousel-control-prev-icon::before{content:'\25C0'; /* ◀ */ color:#fff;position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
#cases .carousel-control-next-icon::before{content:'\25B6'; /* ▶ */ color:#fff;position:absolute;inset:0;display:grid;place-items:center;font-size:16px}
@media (max-width:575px){#cases .carousel-control-prev,#cases .carousel-control-next{width:38px;height:38px}}
.case-meta .kv{display:grid;grid-template-columns:108px 1fr;gap:.5rem;padding:.45rem .55rem;background:#fafafa;border:1px solid #eee;border-radius:10px;margin:.45rem 0}
.case-meta .k{font-weight:700;color:#0f0f0f}
.case-meta .v{color:#111}
.cc-btn{position:absolute;top:50%;transform:translateY(-50%);border:none;background:#111;color:#fff;width:36px;height:36px;border-radius:999px;display:flex;align-items:center;justify-content:center;opacity:.9;box-shadow:var(--shadow-sm)}
.cc-btn:hover{opacity:1}
.cc-btn.prev{left:-6px}
.cc-btn.next{right:-6px}
@media (max-width:575px){.cc-btn{display:none}}

/* ===== Smooth Carousel override & additions (append at EOF) ===== */
/* 既存�E display:flex 持E��を無効化！Eootstrap挙動めE�E前実裁E�E競合回避�E�E*/
#cases .carousel-inner { padding: 0 0 1.2rem; }
#cases .carousel-item {
  display: block !important;  /* 既存�E display:flex を打ち消す */
  padding: 0 !important;
  justify-content: initial !important;
}
  

/* ==== ボタン駁E��スムースカルーセル本体！Eootstrap非依存！E==== */

/* 事例カード（既存トーンに整合！E*/

/* (deduped) Reduce motion: use consolidated block later */
/* ===== marketing.html 取り絁E��方補足チE��スト専用 ===== */
#approach .approach-lead {
  font-size: 0.75rem;   /* 小さめE*/
  color: #555;
  line-height: 1.55;
  margin-top: 0.45rem;
  margin-bottom: 0;
  text-align: center;
}
/* ===== cases: 可読性向上（カード�Eのみ・非破壊！E===== */
#casesCarousel .case-card-modern{               /* カード�E体を少しだけゆったり */
  padding: 1.2rem 1.25rem;
}

#casesCarousel .case-card-modern .kv{
  /* ラベル列�E最封E最大幁E��確保しつつ本斁E��庁E�� */
  grid-template-columns: minmax(110px, 160px) 1fr;
  align-items: start;
  gap: .6rem .8rem;         /* 行間・列間 */
  padding: .7rem .8rem;     /* 冁E�E余白を増やぁE*/
  border-radius: 12px;
}

/* ラベルは1行で、本斁E�E折り返しOKにして可読性を上げめE*/
#casesCarousel .case-card-modern .kv .k{
  font-weight: 700;
  color:#111;
  white-space: nowrap;      /* ラベルは1衁E*/
}
#casesCarousel .case-card-modern .kv .v{
  white-space: normal;      /* ↁE重要E��本斁E��折り返し可に */
  line-height: 1.7;         /* 行間をゆったり */
}

/* 連続するkv同士の縦の間隔を確俁E*/
#casesCarousel .case-card-modern .kv + .kv{
  margin-top: .6rem;
}

/* モバイルではラベルを上、本斁E��下�E1カラムに */
@media (max-width: 576px){
  #casesCarousel .case-card-modern .kv{
    grid-template-columns: 1fr;
  }
  #casesCarousel .case-card-modern .kv .k{
    margin-bottom: .25rem;
  }
}

/* ===== Smooth Carousel: slide animation (scoped) ===== */
#casesCarousel .sc-track{
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
}

#casesCarousel .sc-slide{
  opacity: .55;
  transform: scale(.985);
  filter: blur(0.3px);
  transition:
    opacity 380ms ease,
    transform 380ms ease,
    filter 380ms ease;
}

#casesCarousel .sc-slide.is-active{
  opacity: 1;
  transform: scale(1);
  filter: none;
}

/* カード�E中身を少しだけ上にスライドさせる入場アニメ�E�任意！E*/
@keyframes sc-rise-in{
  from{ transform: translateY(6px); opacity:.0 }
  to  { transform: translateY(0);   opacity:1  }
}
#casesCarousel .sc-slide.is-active .case-card-modern{
  animation: sc-rise-in 420ms cubic-bezier(.2,.8,.2,1);
}

/* 動きが苦手な利用老E�E慮 */
@media (prefers-reduced-motion: reduce){
  #casesCarousel .sc-track,
  #casesCarousel .sc-slide,
  #casesCarousel .sc-slide.is-active .case-card-modern{
    transition: none !important;
    animation: none !important;
  }
}

/* ===== Smooth Carousel: cases 専用�E�他に影響しなぁE��ぁE��コープ！E===== */
#casesCarousel .sc-viewport{overflow:hidden;width:100%}
#casesCarousel .sc-track{
  display:flex; gap:16px;
  transition: transform 520ms cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
#casesCarousel .sc-slide{flex:0 0 100%; opacity:.55; transform:scale(.985); filter:blur(.3px);
  transition: opacity 380ms ease, transform 380ms ease, filter 380ms ease;
}
#casesCarousel .sc-slide.is-active{opacity:1; transform:scale(1); filter:none}

/* カード体裁E��読みめE��さUP�E�E*/
#casesCarousel .case-card-modern{
  background:#fff; border:1px solid #e9e9e9; border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.06); padding:1.2rem 1.25rem; max-width:1000px; margin:0 auto; width:100%;
}
#casesCarousel .case-card-modern .title{font-weight:800; margin:0 0 .35rem; font-size:clamp(1rem,2.2vw,1.12rem); white-space:nowrap}
#casesCarousel .case-card-modern .sub{margin:0 0 .6rem; color:#1a1a1a; white-space:nowrap; font-size:clamp(.95rem,2vw,1.05rem)}
#casesCarousel .case-card-modern .kv{
  display:grid; grid-template-columns:minmax(110px,160px) 1fr; align-items:start;
  gap:.6rem .8rem; padding:.7rem .8rem; background:#fafafa; border:1px solid #eee; border-radius:12px; margin:.55rem 0;
}
#casesCarousel .case-card-modern .kv .k{font-weight:700; white-space:nowrap; color:#111}
#casesCarousel .case-card-modern .kv .v{white-space:normal; line-height:1.7}
#casesCarousel .case-card-modern .kv + .kv{margin-top:.6rem}

/* 前後�Eタン�E�既存�Eを活かす�E�E*/
#cases .carousel-control-prev,#cases .carousel-control-next{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; background:#111; border:none; border-radius:999px; opacity:.95; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
#cases .carousel-control-prev:hover,#cases .carousel-control-next:hover{opacity:1}
#cases .carousel-control-prev{left:-6px}
#cases .carousel-control-next{right:-6px}
#cases .carousel-control-prev-icon,#cases .carousel-control-next-icon{background-image:none; width:100%; height:100%; position:relative}
#cases .carousel-control-prev-icon::before{content:'\25C0'; color:#fff; position:absolute; inset:0; display:grid; place-items:center; font-size:16px}
#cases .carousel-control-next-icon::before{content:'\25B6'; color:#fff; position:absolute; inset:0; display:grid; place-items:center; font-size:16px}

/* 動きを苦手なユーザ配�E */
@media (prefers-reduced-motion: reduce){
  #casesCarousel .sc-track,
  #casesCarousel .sc-slide{transition:none !important}
}
/* YouTube用�E�赤ぁE��ャンネル登録ボタン */
.btn-subscribe{
  background:#FF0000; /* YouTube Red */
  color:#fff;
  border:none;
  box-shadow:var(--shadow-sm);
  font-weight:800;
}
.btn-subscribe:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
}
/* ヘッダーの「お問い合わせ」�Eタン調整 */
header .btn-outline-accent {
  background: #fff;       /* 白背景 */
  color: #000;            /* 黒文孁E*/
  border: none;           /* 縁線なぁE*/
}

header .btn-outline-accent:hover,
header .btn-outline-accent:active,
header .btn-outline-accent:focus {
  background: var(--accent); /* 緑塗り */
  color: #000;               /* 黒文孁E*/
  border: none;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
/* 事業紹介：ドロチE�Eダウン展開時に斁E��が消えなぁE��ぁE��宁E*/
header .navbar .nav-link.dropdown-toggle.show,
header .navbar .nav-link.dropdown-toggle[aria-expanded="true"]{
  color: #fff !important;          /* 展開中も白斁E��を維持E*/
  background: transparent;         /* 背景は現状どおり */
}

/* ケアレ�E�▼�E�も黒く沈まなぁE��ぁE��白で固宁E*/
header .navbar .nav-link.dropdown-toggle::after{
  border-top-color: #fff;          /* 通常時�E矢印色 */
}
header .navbar .nav-link.dropdown-toggle.show::after,
header .navbar .nav-link.dropdown-toggle[aria-expanded="true"]::after{
  border-top-color: #fff;          /* 展開時�E矢印色 */
}

/* フォーカス可視化�E�見た目は最小限、既存トーン維持E��E*/
header .navbar .nav-link.dropdown-toggle:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Voice sample list usability */
.voice-item{cursor:pointer}
.voice-item:hover{background:var(--muted)}

/* Plyr fallback */
.plyr__sr-only{position:absolute;width:1px;height:1px;...}
.plyr--audio .plyr__controls{display:flex;align-items:center;gap:.5rem;padding:.5rem;...}
.plyr__controls button.plyr__control{display:inline-flex;...;width:36px;height:36px;...}
.plyr__controls svg{width:20px;height:20px;display:block}
.plyr__progress__container{flex:1;min-width:120px}
.plyr__time{font-size:.8rem;color:#666}

/* --- Audio player (custom) --- */
.audio-module .form-range{ height:.9rem }
.audio-module #seek::-webkit-slider-thumb{ width:12px;height:12px }
.voice-item{cursor:pointer; transition:background .15s,border-left-color .15s}
.voice-item:hover{background:var(--muted)}
.voice-item.active{background:#eef9e8;border-left:4px solid var(--accent)}
/* モバイルでの操作性 */
@media (max-width: 576px){
  .audio-module .btn{ padding:.35rem .5rem }
}

/* audio list states */
.voice-item{cursor:pointer; transition:background .15s,border-left-color .15s,color .15s}
.voice-item:hover{background:var(--muted)}

/* ボイスサンプル専用チE��イン調整 */
#voice-area .block-strong {
  border-left: none;       /* 緑�Eラインを消す */
  box-shadow: none !important; /* シャドウを消す */
}

/* グループタイトルの見�Eし�E太字だけ残す */
#voice-area h4.h6 {
  font-weight: 600;
  margin-bottom: .5rem;
}

/* リスト�EアイチE�� */
#voice-area .voice-item {
  cursor: pointer;
  transition: background .15s, color .15s;
}
#voice-area .voice-item:hover {
  background: var(--muted);
}
.voice-item.active{
  background:gray;
  color:#fff;
  border-left:4px solid gray;
}
.voice-item.active .badge{
  background:#fff !important;
  color:gray;
}
/* プレイヤーモジュール全体�E枠 */
.audio-module {
  border: 1px solid #ddd;      /* 薁E��グレーの枠 */
  border-radius: 8px;          /* 少し角丸 */
  padding: 1rem;               /* 冁E�Eに余白 */
  background: #fff;            /* 背景は白で統一 */
}

/* 見�Eしとリスト�E余白を少し整える */
#voice-area h4.h6 {
  margin-top: 1rem;
  font-weight: 600;
}

/* プレイヤーモジュール全体�E枠を四辺とも表示 */
.audio-module {
  border: 1px solid #ddd !important;  /* 全辺に枠を強制 */
  border-radius: 8px;
  padding: 1rem;
  background: #fff;
}
/* 実�E/VTuberトグル�E�サイトに馴染�Eセグメント風�E�E*/
#profile .toggle{
  display:inline-grid;
  grid-auto-flow:column;
  gap:.25rem;
  padding:.25rem;
  border:1px solid #ddd;
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
#profile .toggle button{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:#333;
  font-weight:600;
  font-size:.9rem;
  line-height:1;
  padding:.35rem .8rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s;
}
#profile .toggle button:hover{ background:#f5f5f5; }
#profile .toggle button.active{
  background: var(--accent, #ee7800);
  border-color: var(--accent, #ee7800);
  color:#fff;
  box-shadow:0 2px 8px rgba(238,120,0,.26);
}
/* 画像�E基本 */
#profile .card-minimal img{ border-radius:12px; }

/* --- Profile冁E��ンパクト�Eレイヤー --- */
.audio-module.audio-inline{
  border:1px solid #ddd !important;
  border-radius:8px;
  background:#fff;
}

/* 余白と斁E��サイズを少し詰める */
#audio-inline .form-range{ height:.9rem }
#profile-voice .list-group-item{
  padding:.5rem .75rem;
  border-left:0; border-right:0;
}
#profile-voice .list-group-item:first-child { border-top-left-radius:6px; border-top-right-radius:6px; }
#profile-voice .list-group-item:last-child  { border-bottom-left-radius:6px; border-bottom-right-radius:6px; }

/* 選択行�Eオレンジ背景�E�リンク色�E�に */
#profile-voice .list-group-item.active{
  background:gray;
  color:#fff;
  border-color:gray;
}
#profile-voice .list-group-item.active .badge{
  background:#fff !important; color:gray;
}

/* ホバー */
#profile-voice .list-group-item:hover{ background:var(--muted); }

/* プロフィール冁E�Eレイヤー�E�グループ見�Eし�E余白 */
#profile-voice h5.h6{ margin:.5rem 0; font-weight:600; }

/* 行�Eバ�EとアクチE��ブ色�E��E体に適用�E�E*/
#profile-voice .pvoice-item{ cursor:pointer; transition:background .15s, color .15s; }
#profile-voice .pvoice-item:hover{ background:var(--muted); }
#profile-voice .pvoice-item.active{
  background:gray; color:#fff; border-color:gray;
}
#profile-voice .pvoice-item.active .badge{ background:#fff !important; color:gray; }

/* === タレント紹介：左右の高さを揃える & 左画像をカード高いっぱぁE�� === */
@media (min-width: 992px){ /* lg以上�Eみ適用�E�モバイルでは無効化！E*/
  /* 行をストレチE��させ、各カラムを等高に */
  #profile .row.g-4 { align-items: stretch !important; }
  #profile .row.g-4 > [class^="col-"] { display: flex; }
  #profile .row.g-4 > [class^="col-"] > .card-minimal { height: 100%; }

  /* 左カラムのカード�E「トグル衁E+ 画像領域」�E2段グリチE��にして、E     画像領域を余白ぁE��ぱぁE��拡張 */
  #profile .col-lg-5 > .card-minimal {
    display: grid;
    grid-template-rows: auto 1fr; /* 丁Eトグル、丁E画像で残り全部 */
  }
  #profile .col-lg-5 > .card-minimal .toggle { grid-row: 1; }

  /* 2枚�E画像どちらが表示されても“カード�E残り高”を全て使ぁE*/
  #profile #portrait-photo,
  #profile #portrait-vtuber{
    grid-row: 2;
    width: 100%;
    height: 100%;
    object-fit: cover;     /* はみ出し�E自然にトリミング */
    border-radius: 12px;   /* 既存�E角丸と合わせる */
  }
}

/* TEMP: hide section-title left icon across all pages */
.section-title::before{ display:inline-block !important; }

/* ================================
   Mobile optimization (<= 576px)
   セクションIDにスコープして副作用を最小化
   ================================ */
@media (max-width: 576px){

  /* ヒーローのリードが折り返せず食い込むのを回避 */
  .page-hero .lead{
    white-space: normal !important;
    font-size: .95rem;
  }

  /* セクション見出しの行高/余白を詰めて上詰まりを解消 */
  .section-title{ margin-bottom: 10px; line-height: 1.25; }
  .section{ padding: 36px 0; }

  /* ===== 提供メニュー (#menu) ===== */
  #menu .biz-card{
    padding: .95rem 1rem;
    border-radius: 14px;
  }
  /* アイコン + 見出しを左寄せレイアウトに（スマホの視線に素直に） */
  #menu .biz-card .body{
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: .35rem .6rem;
    align-items: start;
  }
  #menu .biz-card .icon{
    font-size: 1.2rem;
    line-height: 40px;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: #f6f6f6;
    display: grid; place-items: center;
    margin: 0;          /* 既定の下マージンを打ち消し */
  }
  #menu .biz-card h3{
    font-size: 1.0rem;
    margin: .1rem 0 .2rem;
    line-height: 1.35;
  }
  #menu .biz-card p.mb-1{
    grid-column: 1 / -1;     /* 説明文は2カラム分で折り返しやすく */
    margin-bottom: .4rem !important;
    font-size: .92rem;
    line-height: 1.55;
  }
  #menu .biz-card ul{
    grid-column: 1 / -1;
    margin-bottom: .2rem;
    padding-left: 1rem;
  }
  #menu .biz-card .price{
    grid-column: 1 / -1;
    margin: .2rem 0 0;
    font-weight: 800;
    font-size: 1.0rem;
  }

  /* ===== 取り組み方 (#approach) ===== */
  #approach .img-tile{ border-radius: 12px; }
  #approach .img-tile img{
    aspect-ratio: 16/9;
    object-fit: cover;
  }
  #approach .approach-lead{
    font-size: .84rem;        /* さらに小さめに */
    line-height: 1.55;
    margin-top: .45rem;
    color: #555;
  }

  /* ===== 事例カルーセル (#cases) ===== */
  /* ボタンが画面外にはみ出すのを防ぐ */
  #cases .carousel-control-prev{ left: 6px; }
  #cases .carousel-control-next{ right: 6px; }
  #cases .carousel-control-prev, #cases .carousel-control-next{
    width: 40px; height: 40px;
  }

  /* タイトル/サブタイトルの強制一行を解除して折り返し可能にする */
  #casesCarousel .case-card-modern .title,
  #casesCarousel .case-card-modern .sub{
    white-space: normal !important;
  }

  /* カード余白を最適化して可読性UP */
  #casesCarousel .case-card-modern{
    padding: 1rem 1rem;
    border-radius: 14px;
  }

  /* KV行：スマホは1カラムにして読みやすく */
  #casesCarousel .case-card-modern .kv{
    grid-template-columns: 1fr !important;
    gap: .35rem .6rem;
    padding: .6rem .7rem;
  }
  #casesCarousel .case-card-modern .kv .k{
    margin-bottom: .1rem;
    font-weight: 800;
  }
  #casesCarousel .case-card-modern .kv .v{
    white-space: normal;
    line-height: 1.7;
  }

  /* 共通：横スクロール発生の保険 */
  body{ overflow-x: hidden; }
}

/* もう少し広い端末（<= 768px）での見切れ対策 */
@media (max-width: 768px){
  #casesCarousel .case-card-modern .title,
  #casesCarousel .case-card-modern .sub{ white-space: normal; }
}

/* ===== Mobile polish: cases arrows, menu titles, fullwidth card ===== */
@media (max-width: 576px){
  /* 事例カルーセル：矢印を半透明に（タップ時のみ濃く） */
  #cases .carousel-control-prev,
  #cases .carousel-control-next{
    opacity:.40;               /* ← 透明度を上げる（=薄くする） */
    transition: opacity .18s ease;
  }
  #cases .carousel-control-prev:active,
  #cases .carousel-control-next:active{
    opacity:.85;
  }

  /* 提供メニュー：見出しは必ず1行で省略表示 */
  #menu .biz-card h3{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 全幅BizDevカードのときは見た目を整える（余白だけ） */
#menu .biz-card.fullwide{
  margin-left: 0;
  margin-right: 0;
}

/* モバイル時の提供メニューh3修正 */
@media (max-width: 576px) {
  .biz-card .body {
    display: flex;
    flex-direction: column; /* 縦並びにする */
    align-items: flex-start;
  }

  .biz-card .icon {
    margin-bottom: 0.5rem; /* アイコンを上に配置して余白 */
  }

  .biz-card h3 {
    font-size: 1.1rem;  /* 適度に調整 */
    margin: 0 0 0.5rem;
    width: 100%;        /* 幅いっぱいに */
    white-space: normal; /* 折り返し許可 */
  }
}
/* ================================
   marketing.html 提供メニュー h3（モバイル）
   esports.html の表示感に合わせて整形
   ================================ */
@media (max-width: 576px){

  /* アイコン＋テキストを2カラムのグリッドに（幅計算を安定化） */
  #menu .biz-card .body{
    display: grid !important;                 /* 以前のflex指定を上書き */
    grid-template-columns: 44px 1fr;
    gap: .35rem .6rem;
    align-items: start;
  }

  #menu .biz-card .icon{
    width: 44px; height: 44px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: #f6f6f6;
    margin: 0;                                /* 余白をリセット */
    font-size: 1.2rem;
  }

  /* 見出しは右カラムで2行まで表示し、それ以上は省略（三点） */
  #menu .biz-card h3{
    grid-column: 2 / -1;
    margin: .1rem 0 .2rem;
    font-size: 1.02rem;
    line-height: 1.35;
    /* ここが肝：自然な折り返し＋2行でカット（esportsの雰囲気に寄せる） */
    white-space: normal !important;           /* 既存の nowrap を打ち消す */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;                    /* 2行に制限 */
    overflow-wrap: anywhere;                  /* 長い語の食い込みを防ぐ */
    word-break: normal;
  }

  /* 本文・箇条書きは全幅で回す（読みやすさ優先） */
  #menu .biz-card p,
  #menu .biz-card ul,
  #menu .biz-card .price{
    grid-column: 1 / -1;
  }
}
/* ===== Fix: #menu 見出しh3のモバイル見切れ（最終上書き） ===== */
@media (max-width: 576px){
  /* アイコン + テキストの2カラム。右カラムは shrink 可能にする */
  #menu .biz-card .body{
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr); /* ← minmax(0,1fr) が重要 */
    gap: .35rem .6rem;
    align-items: start;
  }

  /* 見出しは右カラムで “最大2行まで” きれいに表示 */
  #menu .biz-card h3{
    grid-column: 2 / -1;
    min-width: 0;                          /* ← Grid 子要素のはみ出し防止 */
    margin: .08rem 0 .18rem;
    font-size: 1.02rem;
    line-height: 1.35;

    /* 2行表示＋それ以上は省略（三点） */
    white-space: normal !important;        /* 以前の nowrap を打ち消す */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    /* 長い英数語の食い込み対策 */
    overflow-wrap: anywhere;
    word-break: normal;
  }
}
/* ===== 提供メニュー h3 を esports.html と同じ見出しスタイルに揃える ===== */
#menu .biz-card h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: .25rem 0 .4rem;
  line-height: 1.4;
  white-space: normal !important;     /* 折り返し許可 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;              /* 最大2行表示 */
  text-overflow: ellipsis;
}
/* ================================
   marketing: 提供メニュー h3 モバイル最終修正
   esports と同じ「自然に2行まで」表示へ
   ================================ */
@media (max-width: 768px){
  /* アイコン+テキストを安定した2カラムに */
  #menu .biz-card .body{
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr); /* ← 右カラムを shrink 可に */
    gap: .35rem .6rem;
    align-items: start;
  }
  #menu .biz-card .icon{
    width: 44px; height: 44px;
    display: grid; place-items: center;
    margin: 0;
  }

  /* 見出しは右カラム。幅つぶれ防止に min-width:0 が重要 */
  #menu .biz-card .body > h3{
    grid-column: 2 / -1;
    min-width: 0;                 /* ← これが無いと潰れます */
    margin: .08rem 0 .2rem;
    font-size: 1.04rem;
    line-height: 1.35;

    /* 2行まで表示（それ以上は…） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 以前の nowrap 指定を確実に無効化 */
    white-space: normal !important;

    /* 長い語の食い込み対策 */
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* 本文・箇条書き・価格は全幅 */
  #menu .biz-card p,
  #menu .biz-card ul,
  #menu .biz-card .price{
    grid-column: 1 / -1;
  }
}

/* =========================================
   marketing: 提供メニュー h3 モバイル崩れ 最終パッチ
   - 右カラムの幅つぶれを防ぐ
   - 2行まで自然に表示（それ以上は…）
   - 576pxを越える端末でも効くよう 768pxまで適用
   ========================================= */
@media (max-width: 768px){
  /* アイコン + テキストの2カラムを強制し、右カラムは shrink 可に */
  #menu .biz-card .body{
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr); /* ★ここが重要 */
    gap: .35rem .6rem;
    align-items: start;
  }
  #menu .biz-card .icon{
    width: 44px; height: 44px;
    display: grid; place-items: center;
    margin: 0;
  }

  /* 見出しは右カラムで幅を確保（min-width:0 が鍵） */
  #menu .biz-card .body > h3{
    grid-column: 2 / -1;
    min-width: 0;                     /* ★Grid子要素のはみ出し防止 */
    margin: .08rem 0 .2rem;
    font-size: 1.04rem;
    line-height: 1.35;

    /* 2行まで表示（それ以上は三点） */
    white-space: normal !important;   /* 既存の nowrap を打ち消す */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

    /* 英数長語の食い込み防止 */
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* 本文・箇条書き等は全幅で */
  #menu .biz-card p,
  #menu .biz-card ul,
  #menu .biz-card .price{
    grid-column: 1 / -1;
  }
}
/* =========================================
   marketing: 提供メニュー h3 モバイル崩れ 最終パッチ
   - 見出しが切れる問題を解消（折り返しを許可）
   - 既存の line-clamp/overflow を無効化
   - 768px以下で適用（576px以下も包含）
   ========================================= */
@media (max-width: 768px){
  /* marketing.html 専用: 提供メニュー内の見出し（h3）が切れる問題を最優先で解消 */
  #menu .biz-card h3,
  #menu .biz-card .body > h3{
    display: block !important;
    white-space: normal !important;   /* nowrap を打ち消す */
    line-height: 1.42 !important;     /* 行高を十分に確保 */
    overflow: visible !important;     /* クリッピングを回避 */
    text-overflow: clip !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
}
/* =========================================
   marketing: 提供メニュー h3 モバイル1行レイアウト（アイコン横）
   ふぁんみ! と同様、モバイル時はアイコンの右に1行表示
   ========================================= */
@media (max-width: 576px){
  /* アイコン+見出しを同一行に配置 */
  #menu .biz-card .body{
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: .35rem .6rem;
  }
  #menu .biz-card .icon{
    grid-column: 1; grid-row: 1;
    margin: 0;
  }
  #menu .biz-card .body > h3{
    grid-column: 2 / -1; grid-row: 1;
    min-width: 0;
    margin: 0;                       /* 行内配置なので上下余白をゼロに */
    display: block !important;       /* -webkit-box を打ち消す */
    white-space: nowrap !important;  /* 1行表示 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
  /* 本文やリストは2列をまたいで次の行に */
  #menu .biz-card p,
  #menu .biz-card ul,
  #menu .biz-card .price{
    grid-column: 1 / -1;
    margin-top: .4rem;
  }
}
/* =========================================
   Hero lead wrap fix: allow wrapping at all widths
   ========================================= */
.page-hero .lead{
  white-space: normal !important;
  max-width: 68ch !important;
}

/* =========================================
   marketing: モバイル〜タブレットでアイコン横にh3を1行表示
   ========================================= */
@media (max-width: 768px){
  #menu .biz-card .body{
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: .35rem .6rem;
  }
  #menu .biz-card .icon{
    grid-column: 1; grid-row: 1;
    margin: 0;
  }
  #menu .biz-card .body > h3{
    grid-column: 2 / -1; grid-row: 1;
    min-width: 0;
    margin: 0;
    display: block !important;
    white-space: nowrap !important;  /* 1行に固定 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
}
/* =========================================
   marketing: h3 をモバイルで確実に1行（flex版・最優先）
   ========================================= */
@media (max-width: 768px){
  #menu .biz-card .body{
    display: flex !important;
    align-items: center !important;
    gap: .6rem !important;
  }
  #menu .biz-card .icon{
    flex: 0 0 44px !important;
    width: 44px !important; height: 44px !important;
    margin: 0 !important;
  }
  #menu .biz-card .body > h3{
    flex: 1 1 auto !important;
    min-width: 0 !important;            /* 省略記号が効くように */
    margin: 0 !important;
    display: block !important;          /* -webkit-box を解除 */
    white-space: nowrap !important;     /* 1行固定 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
    -webkit-box-orient: initial !important;
  }
  #menu .biz-card p,
  #menu .biz-card ul,
  #menu .biz-card .price{
    width: 100% !important;
  }
}
/* =========================================
   marketing: 見出し行の左寄せ（モバイル〜タブレット）
   ========================================= */
@media (max-width: 768px){
  #menu .biz-card .body{
    align-items: flex-start !important;  /* 中央寄せ → 左(上)寄せ */
    justify-content: flex-start !important;
  }
  #menu .biz-card .body > h3{
    text-align: left !important;
  }
}
/* =========================================
   marketing: 577–768px での崩れ修正（1行見出し＋本文は次段）
   ========================================= */
@media (min-width: 577px) and (max-width: 768px){
  #menu .biz-card .body{
    display: flex !important;
    align-items: flex-start !important;
    gap: .35rem .6rem !important;
    flex-wrap: wrap !important;              /* 本文/リストを次段へ */
  }
  #menu .biz-card .icon{
    flex: 0 0 44px !important;
    width: 44px !important; height: 44px !important;
    margin: 0 !important;
  }
  #menu .biz-card .body > h3{
    flex: 1 1 auto !important;               /* アイコン右で伸縮 */
    min-width: 0 !important;
    margin: 0 !important;
    white-space: nowrap !important;          /* 1行固定 */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #menu .biz-card p,
  #menu .biz-card ul,
  #menu .biz-card .price{
    flex: 0 0 100% !important;               /* 次段で全幅 */
    width: 100% !important;
    margin-top: .4rem !important;
  }
}

/* styles.css の末尾に追加 */
.company-logo-block {
  align-items: flex-end;
  margin: 1rem 0 0.5rem;  /* 上 1rem 下 0.5rem で詰める */
}

footer .container {
  display: flex;
  align-items:center;    /* 下寄せにする */
  height: 60px;            /* 高さを固定 */
}