@charset "UTF-8";

/* =========================================
   1. Design Tokens (CSS Variables)
========================================= */
:root {
  --color-base: #f4f4f4;         
  --color-accent: #002b6b;       /* BlueBeanベースカラー */
  --mainbisual-color-base: #f7f9fc;
  --color-accent-hover: #002050;
  --color-sub: #005FAB;          
  --color-white: #ffffff;
  --color-text: #333333;

  --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px;
  --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px;

  --rad-1: 4px; --rad-2: 8px; --rad-3: 16px;

  --transition: 0.3s ease;
  
  /* Z-index階層 */
  --z-base: 1;
  --z-dropdown: 50;
  --z-header: 100;
  --z-drawer-bg: 105;
  --z-drawer: 110;
}

/* =========================================
   2. Base Styles & Typography
========================================= */
body {
  margin: 0; padding: 0;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  color: var(--color-text);
  line-height: 1.6;
  background-color: var(--color-white);
  scroll-behavior: smooth;
}

*:focus-visible { outline: 2px solid var(--color-sub); outline-offset: 2px; }

a.inline-link { color: var(--color-sub); text-decoration: underline; transition: opacity var(--transition); font-weight: 700; }
a.inline-link:hover, a.inline-link:focus { opacity: 0.6; }

p { font-size: 14px; margin-top: 0; margin-bottom: var(--sp-2); text-align: left; }

h1 { font-size: 24px; margin-top: 0; margin-bottom: var(--sp-3); }
h2 { font-size: 20px; margin-top: 0; margin-bottom: var(--sp-3); text-align: center; }
h3 { font-size: 18px; margin-top: 0; margin-bottom: var(--sp-2); }
h4 { font-size: 16px; margin-top: 0; margin-bottom: var(--sp-2); }
h5 { font-size: 14px; margin-top: 0; margin-bottom: var(--sp-1); }
h6 { font-size: 12px; margin-top: 0; margin-bottom: var(--sp-1); }

@media (min-width: 1280px) {
  h1 { font-size: 32px; margin-bottom: var(--sp-4); }
  h2 { font-size: 28px; margin-bottom: var(--sp-4); }
  h3 { font-size: 24px; margin-bottom: var(--sp-3); }
  h4 { font-size: 20px; margin-bottom: var(--sp-2); }
  h5 { font-size: 16px; margin-bottom: var(--sp-2); }
  h6 { font-size: 12px; margin-bottom: var(--sp-1); }
  p  { font-size: 16px; margin-bottom: var(--sp-3); }
}

.text-content { width: 100%; max-width: 960px; margin-left: auto; margin-right: auto; }

/* =========================================
   3. Layout & Containers
========================================= */
.container { width: 100%; margin-left: auto; margin-right: auto; padding: var(--sp-4) var(--sp-2); box-sizing: border-box; }
.bg-base { background-color: var(--color-base); }
.section-pad { padding: var(--sp-8) 0; }

@media (max-width: 833px) { .container { max-width: 480px; } }
@media (min-width: 834px) { .container { max-width: 768px; padding: var(--sp-6) var(--sp-4); } }
@media (min-width: 1280px) { .container { max-width: 1440px; padding: var(--sp-8) var(--sp-4); } }
@media (min-width: 1920px) { .container { max-width: 1440px; padding: var(--sp-10) var(--sp-4); } }

.grid-2, .grid-3 { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-4); }
.grid-card { background: var(--color-white); padding: var(--sp-3); border-radius: var(--rad-2); border: 1px solid #ddd; }
@media (min-width: 834px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); align-items: center; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

.icon-svg { fill: var(--color-sub); width: var(--sp-4); height: var(--sp-4); }

/* =========================================
   4. Buttons & Forms
========================================= */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px var(--sp-3); border-radius: var(--rad-1); font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; text-align: center; box-sizing: border-box; transition: all var(--transition); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-cta { width: 100%; }
@media (min-width: 834px) { .btn-cta { width: 320px; } }

.btn-primary { background-color: var(--color-accent); color: var(--color-white) !important; border: 2px solid var(--color-accent); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); opacity: 1; }

.btn-secondary { background-color: var(--color-white); color: var(--color-accent) !important; border: 2px solid var(--color-accent); }
.btn-secondary:hover, .btn-secondary:focus { background-color: #ddd; color: var(--color-accent-hover) !important; border-color: var(--color-accent-hover); opacity: 1; }

.btn-demo {
  width: 100%; padding: 16px var(--sp-3); border-radius: 50px;
  background-color: var(--color-sub); color: var(--color-white) !important; font-size: 18px; font-weight: 700;
  border: none; box-shadow: 0 4px 12px rgba(0,95,171,0.3);
  cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; display: inline-flex;
  justify-content: center; align-items: center; box-sizing: border-box;
  margin-bottom: 16px !important;
}
.btn-demo:hover { transform: scale(1.02); box-shadow: 0 6px 16px rgba(0,95,171,0.4); opacity: 1; }
.btn-demo svg { width: 24px; height: 24px; fill: #fff; margin-right: 8px; flex-shrink: 0; }

/* フォーム要素 */
.form-grid-pc { display: flex; flex-direction: column; gap: 0; }
@media (min-width: 834px) { .form-grid-pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }

.form-group { margin-bottom: var(--sp-2); }
.form-label { display: flex; align-items: center; margin-bottom: var(--sp-1); font-weight: 700; font-size: 14px; }
.badge-req { background-color: var(--color-accent); color: var(--color-white); border-radius: 2px; font-size: 12px; padding: 2px 6px; margin-left: var(--sp-1); font-weight: 400; }
.badge-opt { background-color: #999; color: var(--color-white); border-radius: 2px; font-size: 12px; padding: 2px 6px; margin-left: var(--sp-1); font-weight: 400; }

.form-input, .form-select, .form-textarea { width: 100%; padding: 14px var(--sp-2); border: 1px solid #ccc; border-radius: var(--rad-1); font-family: inherit; font-size: 16px; box-sizing: border-box; transition: border var(--transition); }
.form-textarea { resize: vertical; min-height: 140px; }
.is-error { border: 2px solid var(--color-sub) !important; background-color: rgba(0, 95, 171, 0.05); }

/* =========================================
   5. Header & Navigation
========================================= */
.header-bar {
  max-width: 1440px;
  margin: var(--sp-3) auto 0;
  width: calc(100% - var(--sp-4));
  background-color: var(--color-accent);
  border-radius: var(--rad-2);
  position: sticky;
  top: var(--sp-3);
  z-index: var(--z-header);
  box-shadow: 0 4px 16px rgba(190, 52, 85, 0.3);
}

.header-inner {
  height: 80px;
  padding: 0 var(--sp-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left { display: flex; align-items: center; gap: var(--sp-6); height: 100%; }
.header-logo { display: flex; align-items: center; text-decoration: none; font-size: 28px; font-weight: 700; font-family: 'Inter', sans-serif; color: var(--color-white) !important; }
.header-logo-img { height: 36px; width: auto; }

.nav-pc { display: flex; gap: var(--sp-4); height: 100%; align-items: center; }
.nav-item { color: var(--color-white) !important; font-weight: 700; text-decoration: none; font-size: 18px; transition: opacity var(--transition); }
.nav-item:hover { opacity: 0.7; }

.header-right { display: flex; align-items: center; gap: var(--sp-2); }

.header-tel { 
  display: flex; align-items: center; font-size: 20px; font-weight: 700; color: var(--color-white) !important; font-family: 'Inter', sans-serif; margin-right: var(--sp-2); text-decoration: none; transition: opacity var(--transition); white-space: nowrap !important;
}
.header-tel:hover { opacity: 0.7; }
.header-tel svg { width: 24px !important; height: 24px !important; fill: #ffffff !important; margin-right: 4px; flex-shrink: 0 !important; }

.btn-header { background-color: var(--color-white); color: var(--color-accent) !important; padding: 10px 16px; border-radius: var(--rad-1); font-weight: 700; font-size: 14px; text-decoration: none; transition: background-color var(--transition); display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.btn-header:hover { background-color: #eeeeee; }

.badge-free { background-color: var(--color-accent); color: var(--color-white) !important; padding: 2px 6px; border-radius: 3px; font-size: 11px; line-height: 1; margin-left: 8px; display: inline-block; }

.hamburger-btn { display: none; }

/* スマホ用ドロワー */
.drawer-backdrop, .drawer-menu { display: none; }

@media (max-width: 1366px) {
  .header-bar { margin: var(--sp-2) auto 0; top: var(--sp-2); width: calc(100% - var(--sp-2)); }
  .header-inner { padding: 0 var(--sp-2); height: 64px; }
  .header-logo-img { height: 28px; }
  .nav-pc, .header-right { display: none; }

  .hamburger-btn { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: var(--sp-1); }
  .hamburger-btn svg { width: 32px !important; height: 32px !important; fill: #ffffff !important; }

  .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: var(--z-drawer-bg); opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
  .drawer-backdrop.is-active { opacity: 1; visibility: visible; }

  .drawer-menu { display: flex; position: fixed; top: 0; right: 0; width: 60%; min-width: 280px; height: 100vh; background: var(--color-white); z-index: var(--z-drawer); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); flex-direction: column; box-shadow: -4px 0 16px rgba(0,0,0,0.1); overflow-y: auto; }
  .drawer-menu.is-active { transform: translateX(0); }

  .drawer-header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid #eee; }
  .drawer-header .header-logo { color: var(--color-accent) !important; font-size: 24px; font-weight: 700; text-decoration: none; }
  .drawer-header .close-btn { background: none; border: none; cursor: pointer; padding: 4px; }
  .drawer-header .close-btn svg { width: 28px !important; height: 28px !important; fill: var(--color-text) !important; }

  .drawer-body { padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; }
  .drawer-link { display: block; padding: var(--sp-2) 0; font-size: 15px; font-weight: 700; color: var(--color-text) !important; text-decoration: none; border-bottom: 1px solid #eee; }
  
  .drawer-tel { display: flex; align-items: center; font-size: 22px; font-weight: 700; color: var(--color-accent) !important; font-family: 'Inter', sans-serif; margin-top: var(--sp-4); margin-bottom: var(--sp-3); text-decoration: none; white-space: nowrap; }
  .drawer-tel svg { width: 24px !important; height: 24px !important; fill: var(--color-accent) !important; margin-right: 8px; flex-shrink: 0; }
  
  .btn-drawer { display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-accent); color: var(--color-white) !important; padding: 14px var(--sp-2); border-radius: var(--rad-1); font-weight: 700; font-size: 14px; text-decoration: none; margin-bottom: var(--sp-2); transition: background-color var(--transition); }
  .btn-drawer:hover { background-color: var(--color-accent-hover); }
  .btn-drawer .badge-free { background-color: var(--color-white); color: var(--color-accent) !important; }
}

/* =========================================
   6. Footer Component
========================================= */
.footer { background-color: #002b6b !important; color: #ffffff !important; padding: 64px 0 32px 0 !important; font-family: 'Inter', 'Noto Sans JP', sans-serif !important; text-align: left; }
.footer-inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr 1.5fr; gap: 32px; }

.f-heading { display: flex !important; align-items: center !important; font-size: 16px !important; font-weight: 700 !important; color: #ffffff !important; margin: 0 0 32px 0 !important; }
.f-heading svg { width: 24px !important; height: 24px !important; fill: #ffffff !important; margin-right: 8px !important; flex-shrink: 0 !important; }

.f-list { list-style: none !important; margin: 0 !important; padding: 0 0 0 32px !important; }
.f-list li { margin-bottom: 16px !important; line-height: 1.15 !important; }
.f-list a { color: rgba(255, 255, 255, 0.85) !important; text-decoration: none !important; font-size: 14px !important; transition: color 0.3s ease; }
.f-list a:hover { color: #ffffff !important; }

.f-logo-img { height: 40px !important; width: auto !important; display: block !important; margin-bottom: 24px !important; }
.f-message { font-size: 16px !important; font-weight: 700 !important; line-height: 1.6 !important; margin-bottom: 24px !important; color: #ffffff !important; }

.f-tel { display: inline-flex !important; align-items: center !important; font-size: 20px !important; font-weight: 700 !important; color: #ffffff !important; font-family: 'Inter', sans-serif !important; text-decoration: none !important; transition: opacity 0.3s ease; white-space: nowrap !important; }
.f-tel:hover { opacity: 0.8; }
.f-tel svg { width: 24px !important; height: 24px !important; fill: #ffffff !important; margin-right: 8px !important; flex-shrink: 0 !important; }

.f-copyright { text-align: center !important; font-size: 12px !important; color: rgba(255, 255, 255, 0.5) !important; padding: 32px 0 0 0 !important; border-top: 1px solid rgba(255, 255, 255, 0.2) !important; margin-top: 64px !important; }

@media (max-width: 1279px) {
  .footer-inner { padding: 0 16px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 48px 16px; }
  .f-col-1 { grid-column: 1 / -1; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 32px; }
  .f-col-4 { grid-column: 1 / -1; margin-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 32px; }
}
@media (max-width: 599px) {
  .footer-grid { grid-template-columns: 1fr; } 
  .f-col-4 { margin-top: 0; border-top: none; padding-top: 0; }
}

/* =========================================
   7. Top Page: Hero Section
========================================= */
.hero-wrapper { 
  background: linear-gradient(to right, #32309d 0%, #6465fe 100%) !important; 
  overflow: hidden; 
  color: #ffffff !important; 
  margin-top: calc(-80px - var(--sp-3));
  padding-top: calc(80px + var(--sp-3) + var(--sp-8));
  padding-bottom: var(--sp-8);
}
@media (max-width: 1279px) {
  .hero-wrapper { 
    margin-top: calc(-64px - var(--sp-2));
    padding-top: calc(64px + var(--sp-2) + var(--sp-8));
  }
}

.hero-inner { display: flex; flex-direction: column; gap: var(--sp-6); align-items: center; }
.hero-text-box { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; }

.hero-title { color: #ffffff !important; white-space: nowrap; font-size: clamp(24px, 4.5vw, 44px); margin-bottom: var(--sp-3); }

.hero-list-wrapper { display: inline-block; text-align: left; margin-bottom: var(--sp-4); }
.hero-list { list-style: none; padding: 0; margin: 0; }
.hero-list li { position: relative; padding-left: 28px; margin-bottom: 8px; font-weight: 700; font-size: 20px; color: #ffffff; }
.hero-list li::before { content: "✓"; position: absolute; left: 0; color: #ffffff; font-weight: bold; }

.hero-btn-group { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; }
.hero-sub-btns { display: flex; gap: var(--sp-2); width: 100%; }
.hero-sub-btns > * { flex: 1; padding: 16px 8px; font-size: 16px; }

.hero-video-box { width: 100%; max-width: 800px; }
.video-box { aspect-ratio: 16 / 9; background-color: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: var(--rad-2); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; width: 100%; position: relative; overflow: hidden; }

@media (min-width: 1280px) {
  .hero-inner { flex-direction: row; justify-content: space-between; }
  .hero-text-box { width: 50%; align-items: flex-start; text-align: left; }
  .hero-video-box { width: 45%; max-width: none; }
  .hero-list-wrapper { margin-bottom: var(--sp-5); }
}

/* =========================================
   8. Specific Components (Tabs, Marquee, Merit, FAQ, etc.)
========================================= */
/* タブ */
.tabs-nav { display: flex; gap: var(--sp-1); margin-bottom: 0; overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 0; }
.tabs-nav::-webkit-scrollbar { display: none; }
.tab-btn { padding: 12px var(--sp-4); cursor: pointer; border: none; background: transparent; font-weight: 700; color: #999; transition: all var(--transition); font-size: 16px; border-radius: var(--rad-2) var(--rad-2) 0 0; }
.tab-btn.is-active { color: var(--color-accent); background-color: var(--color-base); }

.tab-content { display: none; animation: fadeIn 0.4s ease; }
.tab-content.is-active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

.tab-pane-wrapper { background-color: var(--color-base); padding: var(--sp-5); border-radius: 0 0 var(--rad-2) var(--rad-2); }
.tab-pane-content { display: flex; flex-direction: column; justify-content: center; }
.tab-pane-title { color: var(--color-sub); font-size: 24px; margin-bottom: var(--sp-4); }
.tab-pane-list { font-size: 20px; font-weight: 700; line-height: 1.15; margin-bottom: var(--sp-4); }
.tab-pane-list-item { margin-bottom: 12px; }
.tab-pane-badges { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.tab-pane-action { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--sp-2); }
.tab-pane-btn-demo { margin-bottom: 0 !important; padding: 12px 24px; font-size: 16px; width: 100%; }
.tab-pane-btn-demo svg { width: 20px; height: 20px; fill: #fff; margin-right: 8px; flex-shrink: 0; }
.tab-pane-btn-link { font-size: 14px; padding: 12px 24px; background: #fff; width: 100%; box-sizing: border-box; }
.tab-pane-image-wrapper { display: flex; align-items: center; justify-content: center; }
.tab-pane-image-box { aspect-ratio: 4/3; background-color: #fff; color: var(--color-text); border: 1px solid #ddd; width: 100%; }
.tab-pane-image-icon { width: 64px; height: 64px; fill: #aaa; margin-bottom: 8px; flex-shrink: 0; }
.tab-pane-image-text { display: block; width: 100%; text-align: center; position: absolute; color: #666; }

/* メリットセクション */
.merit-section { padding-top: var(--sp-10); padding-bottom: var(--sp-10); width: 100%; box-sizing: border-box; }
.merit-title { text-align: center; color: var(--color-accent); margin-bottom: var(--sp-2); }
.merit-lead { text-align: center !important; font-weight: 700; margin-bottom: 48px; font-size: 18px; color: var(--color-text); }
.merit-card { text-align: center; padding: var(--sp-4) var(--sp-3); border-top: 4px solid var(--color-sub); }
.merit-icon { width: 48px; height: 48px; fill: var(--color-sub); margin-bottom: var(--sp-2); flex-shrink: 0; }
.merit-card-title { color: var(--color-text); margin-bottom: var(--sp-3); }
.merit-card-body { background: var(--color-base); padding: var(--sp-3); border-radius: var(--rad-1); text-align: left !important; box-sizing: border-box; }
.merit-list { margin: 0 0 16px 0; padding-left: 20px; font-weight: 700; font-size: 14px; color: var(--color-text); }
.merit-list li { margin-bottom: 4px; }
.merit-list li:last-child { margin-bottom: 0; }
.merit-desc { font-size: 13px; line-height: 1.6; margin: 0; color: #444; }

/* 取りこぼしゼロ業界 */
.industry-wrapper { margin-top: var(--sp-10); }
.industry-title { text-align: center; margin-bottom: var(--sp-4); }
.industry-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
@media(min-width: 834px) { .industry-grid { grid-template-columns: repeat(6, 1fr); } }
.ind-card { background: var(--color-white); padding: var(--sp-3) var(--sp-2); text-align: center; border-radius: var(--rad-2); border: 1px solid #ddd; transition: transform 0.2s; display: flex; flex-direction: column; justify-content: flex-start; }
.ind-card:hover { transform: translateY(-3px); border-color: var(--color-sub); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.ind-card svg { width: 32px; height: 32px; fill: var(--color-sub); margin: 0 auto 8px; flex-shrink: 0; display: block; }
.ind-card .ind-title { display: block; font-size: 18px; font-weight: 700; color: var(--color-text); }
.ind-card .ind-desc { font-size: 14px; font-weight: normal; color: #666; margin: 8px 0 0; line-height: 1.4; }

.text-badge { background-color: transparent; color: var(--color-text); border: 2px solid var(--color-text); padding: 6px 16px; border-radius: var(--rad-1); font-size: 16px; font-weight: 700; line-height: 1; display: inline-block; }

/* マーキー */
.marquee-wrapper { margin-top: var(--sp-10); }
.marquee-title { text-align: center; color: var(--color-accent); font-size: 22px; }
.marquee-container { width: 100%; overflow: hidden; background: rgba(0, 95, 171, 0.05); padding: 64px 0 32px 0; border-radius: var(--rad-2); margin: var(--sp-4) 0; position: relative; }
.marquee-content { display: flex; width: max-content; animation: marqueeScroll 25s linear infinite; }
.marquee-content:hover { animation-play-state: paused; }
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.marquee-group { display: flex; flex-shrink: 0; }
.marquee-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 40px; color: var(--color-sub); position: relative; cursor: pointer; }
.marquee-item svg { width: 36px; height: 36px; fill: var(--color-sub); margin-bottom: 8px; transition: transform 0.3s ease; flex-shrink: 0; }
.marquee-item:hover svg { transform: scale(1.1); }
.marquee-item span { font-size: 16px; font-weight: bold; }
.marquee-dot { display: flex; align-items: center; color: #ccc; font-size: 16px; }
.marquee-tooltip { position: absolute; top: -64px; left: 50%; transform: translateX(-50%) translateY(10px); background-color: rgba(51, 51, 51, 0.95); color: #fff; padding: 10px 16px; border-radius: var(--rad-1); font-size: 12px; line-height: 1.5; width: max-content; max-width: 220px; text-align: left; opacity: 0; visibility: hidden; transition: all 0.3s ease; pointer-events: none; box-shadow: 0 4px 12px rgba(0,0,0,0.15); z-index: 10; }
.marquee-tooltip::after { content: ''; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); border-width: 5px 5px 0; border-style: solid; border-color: rgba(51, 51, 51, 0.95) transparent transparent transparent; }
.marquee-item:hover .marquee-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.marquee-action { text-align: center; margin-top: var(--sp-4); }
.marquee-btn-link { font-size: 14px; padding: 10px 32px; }

/* 料金・進め方（フローグリッド） */
.flow-grid-wrapper { margin-top: var(--sp-6); }
.flow-step-title { color: var(--color-sub); text-align: center; border-bottom: 1px solid #eee; padding-bottom: 8px; }
.flow-step-calc { text-align: center; margin-top: var(--sp-2); }
.flow-step-calc-item { font-weight: bold; margin-bottom: 4px; }
.flow-step-calc-plus { font-size: 20px; color: var(--color-accent); margin-bottom: 4px; }
.flow-step-ui-image { background: #f9f9f9; border: 1px dashed #ccc; height: 80px; border-radius: 4px; margin: 16px 0; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #999; }
.flow-step-desc { font-size: 12px; text-align: center; }
.flow-step-icon-wrapper { text-align: center; padding-top: var(--sp-2); margin-bottom: 8px; }
.flow-step-icon { width: 64px; height: 64px; fill: var(--color-accent); flex-shrink: 0; }
.step-box { position: relative; padding: var(--sp-4) var(--sp-3); background: #fff; border-radius: var(--rad-2); border: 1px solid #ddd; height: 100%; box-sizing: border-box; }
.step-num { position: absolute; top: -16px; left: var(--sp-3); background: var(--color-sub); color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; }

/* FAQ（よくある質問） */
dl.faq-list { max-width: 900px; margin: 0 auto; padding: 0; }
.faq-item { margin-bottom: var(--sp-5); }
.faq-item:last-child { margin-bottom: 0; }
dt.faq-q { background-color: rgba(0, 43, 107, 0.05); color: var(--color-accent); padding: var(--sp-3) var(--sp-4); border-radius: 8px 8px 8px 0; margin: 0 10% 16px 0; font-weight: 700; font-size: 16px; display: flex; gap: 16px; }
dt.faq-q::before { content: "Q"; color: var(--color-sub); font-size: 24px; line-height: 1; font-family: 'Inter', sans-serif; }
dd.faq-a { background-color: var(--color-white); border: 1px solid #ddd; padding: var(--sp-3) var(--sp-4); border-radius: 8px 8px 0 8px; margin: 0 0 0 10%; display: flex; gap: 16px; font-size: 15px; line-height: 1.6; }
dd.faq-a::before { content: "A"; color: var(--color-accent); font-weight: 700; font-size: 24px; line-height: 1; font-family: 'Inter', sans-serif; }
@media (max-width: 833px) { dt.faq-q { margin: 0 5% 16px 0; } dd.faq-a { margin: 0 0 0 5%; } }

/* お問い合わせフォーム */
.contact-container { max-width: 1440px; }
.contact-title { margin-bottom: var(--sp-6); }
.contact-card { box-shadow: 0 8px 32px rgba(0,0,0,0.05); padding: var(--sp-6) var(--sp-4); }
.contact-col { display: flex; flex-direction: column; }
.contact-textarea-wrapper { flex-grow: 1; display: flex; flex-direction: column; }
.contact-textarea { flex-grow: 1; }
.contact-submit-wrapper { text-align: center; margin-top: var(--sp-6); }

/* =========================================
   9. Integration CTA Component
========================================= */
.bb-integrated-cta { font-family: 'Noto Sans JP', sans-serif !important; background-color: #002b6b !important; border-radius: 16px; width: 100%; max-width: 1024px; margin: 64px auto !important; overflow: hidden; box-sizing: border-box; color: #ffffff !important; padding: 0 !important; }
.bb-integrated-header { padding: 32px 24px 24px 24px; text-align: center !important; border-bottom: 1px solid rgba(255, 255, 255, 0.2); }
.bb-integrated-header-lead { display: block; font-size: 16px; margin-bottom: 16px; color: rgba(255, 255, 255, 0.9) !important; text-align: center !important; }
.bb-integrated-header-title { font-size: 28px !important; font-weight: 700 !important; margin: 0 !important; line-height: 1.4 !important; color: #ffffff !important; text-align: center !important; }
.bb-integrated-content { display: flex !important; padding: 48px !important; gap: 24px; align-items: stretch; box-sizing: border-box; }
.bb-cta-card { background: #ffffff !important; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); color: #333333 !important; box-sizing: border-box; text-align: left !important; }
.bb-cta-card :focus-visible { outline: 2px solid var(--color-sub); }
.bb-cta-icon-group { display: flex; gap: 16px; align-items: center; margin-bottom: 24px; }
.bb-cta-icon-circle { flex-shrink: 0; width: 64px; height: 64px; background-color: #002b6b !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff !important; overflow: hidden; }
.bb-cta-icon-img { width: 36px !important; height: 36px !important; object-fit: contain !important; display: block; margin: 0; }
img[alt="BlueBean2週間無料デモ"].bb-cta-icon-img { width: 40px !important; height: 40px !important; }
.bb-cta-label-group { display: flex; flex-direction: column; gap: 4px; text-align: left !important; }
.bb-cta-label-title { font-size: 18px !important; font-weight: 700 !important; margin: 0 !important; color: #002b6b !important; text-align: left !important; }
.bb-cta-label-sub { font-size: 14px; margin: 0 !important; color: #555555 !important; line-height: 1.4 !important; text-align: left !important; }
.bb-integrated-phone-card { flex: 1; padding: 32px !important; display: flex; transition: opacity 0.3s; flex-direction: column; justify-content: flex-start; text-decoration: none !important; }
.bb-integrated-phone-number { font-size: 40px !important; font-weight: 900 !important; margin: 8px 0 16px 80px !important; line-height: 1 !important; color: #002b6b !important; text-align: left !important; white-space: nowrap; }
.bb-integrated-phone-time { font-size: 14px; color: #555555 !important; opacity: 0.8; text-align: left !important; margin-left: 80px !important; }
.bb-integrated-links-container { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.bb-integrated-link-card { text-decoration: none !important; display: block; transition: opacity 0.3s; padding: 24px !important; box-sizing: border-box; }
.bb-integrated-link-card:hover, .bb-integrated-phone-card:hover { opacity: 0.8; }
.bb-integrated-links-container .bb-cta-icon-group { margin-bottom: 0 !important; }

@media (max-width: 896px) {
  .bb-integrated-cta { margin: 40px auto !important; width: calc(100% - 32px); }
  .bb-integrated-content { flex-direction: column !important; padding: 24px !important; }
  .bb-cta-icon-circle { width: 48px; height: 48px; }
  .bb-integrated-phone-number { font-size: 32px !important; margin-left: 64px !important; }
  .bb-integrated-phone-time { margin-left: 64px !important; }
  .bb-integrated-header-title { font-size: 22px !important; }
  .bb-cta-icon-img { width: 30px !important; height: 30px !important; }
}

/* =========================================
   10. Terms Page Styles (利用規約用)　
========================================= */
.terms-wrapper { padding: var(--sp-8) var(--sp-2); }
.terms-content { max-width: 800px; margin: 0 auto; background-color: var(--color-white); padding: var(--sp-8) var(--sp-6); border-radius: var(--rad-2); box-shadow: 0 4px 24px rgba(0,0,0,0.05); }
@media (max-width: 833px) { .terms-content { padding: var(--sp-6) var(--sp-3); } }
.terms-title { font-size: 28px; font-weight: 700; text-align: center; color: var(--color-accent); margin-top: 0; margin-bottom: var(--sp-6); border-bottom: 2px solid #ccc; padding-bottom: var(--sp-3); }
.terms-text-base { font-size: 15px; color: var(--color-text); }
.terms-preamble { margin-bottom: var(--sp-8); }
.terms-chapter { font-size: 20px; font-weight: 700; color: var(--color-sub); margin-top: var(--sp-8); margin-bottom: var(--sp-4); border-left: 4px solid var(--color-sub); padding-left: 12px; }
.terms-article { font-size: 16px; font-weight: 700; margin-top: var(--sp-6); margin-bottom: var(--sp-2); }
.terms-item { margin-top: 0; margin-bottom: 8px; padding-left: 1.5em; text-indent: -1.5em; }
.terms-box { background-color: #f7f7f7; border-radius: var(--rad-1); padding: var(--sp-3); margin-top: var(--sp-2); margin-bottom: var(--sp-3); }
.terms-subitem { margin-top: 0; margin-bottom: 12px; padding-left: 2em; text-indent: -2em; }
.terms-box .terms-subitem:last-child { margin-bottom: 0; }
.terms-subsubitem { margin-top: 0; margin-bottom: 8px; padding-left: 4em; text-indent: -2em; }
.terms-box .terms-subsubitem:last-child { margin-bottom: 0; }
.terms-date { margin-top: var(--sp-8); text-align: right; font-size: 14px; color: #666; }

/* =========================================
   10-1. 利用規約用 対応表 (3:7 レスポンシブ対応) add cord 270730
========================================= */
.terms-table-wrapper {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-4);
  width: 100%;
}

.terms-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #ccc;
  font-size: 14px;
  line-height: 1.6;
}

.terms-table th,
.terms-table td {
  border-bottom: 1px solid #ccc;
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

/* ヘッダー行と左側（用語）の背景色 */
.terms-table thead th,
.terms-table tbody th {
  background-color: #f7f7f7; /* terms-boxと同じトーンのグレー */
  font-weight: 700;
  color: var(--color-text);
}

.terms-table tbody td {
  background-color: var(--color-white);
  color: var(--color-text);
}

/* PC・タブレット時のカラム幅（左3：右7）と縦線 */
@media (min-width: 769px) {
  .terms-table th,
  .terms-table td {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
  .terms-col-term {
    width: 30%;
  }
  .terms-col-def {
    width: 70%;
  }
}

/* スマホ時の縦積みレイアウト */
@media (max-width: 768px) {
  .terms-table,
  .terms-table thead,
  .terms-table tbody,
  .terms-table tr,
  .terms-table th,
  .terms-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* スマホ時は「用語 / 定義」という大見出し行を隠す */
  .terms-table thead {
    display: none;
  }
  
  /* 1行を1つのカードのように見せる */
  .terms-table tbody tr {
    margin-bottom: 16px;
    border: 1px solid #ccc;
    border-radius: var(--rad-1);
    overflow: hidden;
  }
  
  .terms-table tbody tr:last-child {
    margin-bottom: 0;
  }
  
  .terms-table tbody th {
    border-bottom: 1px solid #ccc;
    /* 用語部分を少し目立たせるため、BlueBeanのベースカラーを薄く敷く */
    background-color: rgba(0, 43, 107, 0.05);
  }
  
  .terms-table tbody td {
    border-bottom: none;
  }
}


/* =========================================
   11. Price Page Styles (料金プラン用)
========================================= */

.flow-wrapper { background-color: var(--color-base); border-radius: var(--rad-3); padding: var(--sp-6) var(--sp-4); max-width: 1024px; margin: 0 auto; }
@media (max-width: 833px) { .flow-wrapper { padding: var(--sp-4) var(--sp-2); } }
.flow-list { list-style: none; padding: 0; margin: 0 auto; position: relative; max-width: 800px; }
.flow-list::before { content: ""; position: absolute; top: 0; bottom: 0; left: 20px; width: 2px; background-color: var(--color-sub); }
@media (max-width: 833px) { .flow-list::before { left: 16px; } }
.flow-item { position: relative; padding-left: 64px; margin-bottom: var(--sp-4); }
.flow-item:last-child { margin-bottom: 0; }
@media (max-width: 833px) { .flow-item { padding-left: 48px; } }
.flow-num { position: absolute; left: 0; top: 0; width: 42px; height: 42px; border-radius: 50%; background-color: var(--color-sub); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; z-index: 2; box-shadow: 0 0 0 4px var(--color-base); }
@media (max-width: 833px) { .flow-num { width: 34px; height: 34px; font-size: 14px; left: 0; top: 4px; } }
.flow-content { background-color: var(--color-white); border: 1px solid #ddd; border-radius: var(--rad-2); padding: var(--sp-3); box-shadow: 0 4px 12px rgba(0,0,0,0.03); }
.flow-title { color: var(--color-accent); font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.flow-desc { font-size: 14px; color: var(--color-text); margin: 0; }

/* メインビジュアルのサブコピー（LLMO対策テキスト） */
.hero-subcopy {
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  margin-top: 12px;
  margin-bottom: 40px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

/* =========================================
   12. Lower Pages Elements (復活・パンくずリスト共通)
========================================= */
.ind-breadcrumbs {
  background-color: transparent !important;
  padding: var(--sp-4) 0 0; /* 上の余白をデザインシステム(32px)に微調整 */
}

/* ★最重要：ヘッダーバーの横幅・最大幅・中央配置のルールと100%完全同期させる */
.ind-breadcrumbs .container {
  max-width: 1440px !important;                 /* ヘッダーのmax-widthと統一 */
  width: calc(100% - var(--sp-4)) !important;    /* ヘッダーバーの外側余白と統一 */
  padding: 0 var(--sp-4) !important;            /* ヘッダーロゴの内側余白と統一 */
  margin-left: auto !important;
  margin-right: auto !important;
}

.ind-breadcrumbs ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 12px;
  color: #666666;
}
.ind-breadcrumbs li {
  display: flex;
  align-items: center;
}
.ind-breadcrumbs li:not(:last-child)::after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
  transform: rotate(45deg);
  margin: 0 12px;
}
.ind-breadcrumbs a {
  color: var(--color-sub);
  text-decoration: none;
  transition: opacity var(--transition);
  font-weight: 700;
}
.ind-breadcrumbs a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* =========================================
   ★新設：タブレット・スマホ表示（1366px以下）への追従設定
========================================= */
@media (max-width: 1366px) {
  .ind-breadcrumbs .container {
    width: calc(100% - var(--sp-2)) !important; /* スマホ用ヘッダーの外側余白と同期 */
    padding: 0 var(--sp-2) !important;         /* スマホ用ヘッダーの内側余白と同期 */
  }
}

/* =========================================
   画像クリック拡大（CSS Lightbox）
========================================= */

/* 通常時の画像ラッパー */
.img-zoom-wrapper {
  display: block;
  position: relative;
  border-radius: var(--rad-3);
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  overflow: hidden;
  text-decoration: none;
  cursor: zoom-in; /* カーソルを虫眼鏡に */
  background-color: #fff;
}

/* 通常時の画像 */
.demo-thumb-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

/* ホバー時の「拡大」ヒント */
.zoom-hint {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 95, 171, 0.85); /* BlueBeanカラー */
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.zoom-hint svg {
  width: 20px;
  height: 20px;
  fill: #fff;
}

/* ホバー時のアクション */
.img-zoom-wrapper:hover .demo-thumb-img {
  transform: scale(1.02);
}
.img-zoom-wrapper:hover .zoom-hint {
  opacity: 1;
}

/* --- ここから拡大モーダル --- */

/* モーダルの全体背景（デフォルトは非表示） */
.css-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

/* :target になったら表示する（これがJS不要の要） */
.css-modal-overlay:target {
  display: flex;
}

/* 背景クリック用（透明な閉じるボタン） */
.modal-close-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: zoom-out;
}

/* 拡大画像を入れる箱 */
.css-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  z-index: 10000;
}

/* 拡大画像本体 */
.css-modal-content img {
  width: 100%;
  height: auto;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 16px 64px rgba(0,0,0,0.3);
}

/* 右上の「✕ 閉じる」ボタン */
.modal-close-btn {
  position: absolute;
  top: -40px;
  right: 0;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  font-weight: bold;
  background: rgba(255,255,255,0.2);
  padding: 6px 16px;
  border-radius: 20px;
  transition: background 0.2s;
}
.modal-close-btn:hover {
  background: rgba(255,255,255,0.4);
}



/* =========================================
   下層ページ共通スタイル (料金・サポート・その他汎用)
========================================= */

/* 1. ヒーローエリアの背景とタイトル */
.page-top-bg, .ind-top-bg { 
  background-color: var(--color-base); 
  margin-top: calc(-80px - var(--sp-3)); 
  padding-top: calc(80px + var(--sp-3)); 
}
@media (max-width: 1279px) { 
  .page-top-bg, .ind-top-bg { 
    margin-top: calc(-64px - var(--sp-2)); 
    padding-top: calc(64px + var(--sp-2)); 
  } 
}
/* タイトルの上書き設定（スマホでの右ズレ防止＆中央揃え） */
.page-top-bg .hero-title { 
  color: var(--color-accent) !important; 
  white-space: normal !important; /* スマホ右ズレ防止 */
  line-height: 1.4;
}
.page-top-bg .hero-list li { color: var(--color-text) !important; }
.page-top-bg .hero-list li::before { color: var(--color-sub) !important; }

@media (max-width: 1279px) {
  .page-top-bg .hero-title {
    text-align: left;
  }
}

/* 2. 下層ページ用グリッド（タブレットまで1カラム、PCで2カラム） */
.page-hero-grid {
  display: grid;
  gap: var(--sp-4);
  align-items: center;
}
@media (min-width: 1280px) {
  .page-hero-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* 3. ページ内リンクなどのナビゲーションボックス */
.page-feature-box { 
  background-color: var(--color-white); 
  padding: var(--sp-4); 
  border-radius: var(--rad-2); 
  border: 2px solid var(--color-accent); 
  box-shadow: 0 8px 24px rgba(0, 43, 107, 0.08); 
}
.page-feature-box h2 { 
  color: var(--color-accent); 
  text-align: left; 
  border-bottom: 2px solid #eee; 
  padding-bottom: var(--sp-1); 
  margin-bottom: var(--sp-3); 
  font-size: 22px; 
}
.page-feature-box .hero-list-wrapper { margin-bottom: 0; }
@media (max-width: 833px) { 
  .page-feature-box { margin-top: var(--sp-4); } 
}

/* 4. セクションタイトル */
.page-section-title { 
  color: var(--color-accent); 
  font-size: 28px; 
  margin-bottom: var(--sp-6); 
  text-align: center; 
}

/* 5. 汎用テーブル（100%幅） */
.page-table-wrapper {
  width: 100%;
  margin-bottom: var(--sp-4);
}
.page-table { 
  width: 100%; 
  border-collapse: collapse; 
  background-color: var(--color-white); 
  border-radius: var(--rad-2); 
  overflow: hidden; 
  box-shadow: 0 4px 16px rgba(0,0,0,0.05); 
}
.page-table th, .page-table td { 
  border: 1px solid #ddd; 
  padding: var(--sp-4) var(--sp-3); 
  text-align: left; 
  vertical-align: middle; 
}
.page-table th { 
  background-color: rgba(0, 43, 107, 0.05); 
  color: var(--color-accent); 
  font-weight: 700; 
  width: 25%; 
  font-size: 16px; 
}
.page-table td { 
  font-size: 16px; /* 料金ページで数字を大きくしたい場合はHTML側で調整可能 */
  font-weight: 700; 
  color: var(--color-text); 
}
.page-table a.inline-link {
  color: var(--color-sub); 
  text-decoration: underline; 
  transition: opacity var(--transition); 
}
.page-table a.inline-link:hover { opacity: 0.7; }
.page-table .page-small { 
  font-size: 14px; 
  font-weight: normal; 
  color: #666; 
  display: inline-block; 
  margin-left: 12px; 
}

/* 6. 注意事項・注釈エリア */
.page-citation-area { 
  width: 100%; 
  box-sizing: border-box; 
  margin-top: var(--sp-6); 
  background: var(--color-base); 
  padding: 32px; 
  border-radius: var(--rad-2); 
  text-align: left; 
}
.page-citation-area h5 { 
  font-size: 15px; 
  color: var(--color-text); 
  margin-top: 0; 
  margin-bottom: 16px; 
  font-weight: bold; 
  border-left: 4px solid var(--color-accent); 
  padding-left: 10px; 
}
.page-citation-list { list-style: none; padding: 0; margin: 0; }
.page-citation-list li { margin-bottom: 8px; font-size: 13px; color: #444; line-height: 1.6; }
.page-citation-list li:last-child { margin-bottom: 0; }

/* =========================================
   下層ページ共通：テーブルの1:2レイアウト（左BOX・右テーブル）
========================================= */

/* PCでは左1:右2の割合で並べるグリッド */
.page-table-grid {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}
@media (min-width: 834px) {
  .page-table-grid {
    grid-template-columns: 1fr 2fr;
    align-items: stretch; /* 左右の高さをピタッと揃える */
  }
}

/* 左側の補足ボックス（料金構成や概要テキストなど） */
.page-structure-box {
  background: var(--color-white);
  border: 1px solid #ddd;
  border-radius: var(--rad-2);
  padding: var(--sp-4) var(--sp-3);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.page-structure-box h4 {
  color: var(--color-sub);
  text-align: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  margin-top: 0;
  font-size: 18px;
}

/* ボックス内の計算式（＋）などの装飾 */
.page-calc-container {
  text-align: center;
  margin-top: var(--sp-3);
}
.page-calc-item {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 16px;
  color: var(--color-text);
}
.page-calc-plus {
  font-size: 20px;
  color: var(--color-accent);
  margin-bottom: 4px;
  font-weight: bold;
}



/* =========================================
   Contactform7 関連
========================================= */

/* CF7の自動追加タグによるレイアウト崩れを防ぐ */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* CF7特有の見えない箱をレイアウトに馴染ませる */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  height: 100%; /* 親のフレックスに合わせて伸びるようにする */
}

/* テキストエリア（内容）を親の箱いっぱいまで広げる */
.wpcf7-form-control-wrap textarea.form-textarea {
  height: 100%;
  min-height: 160px; /* 最低限の高さを担保 */
}

/* 送信ボタンの中央揃え修正 */
.contact-submit-wrapper input[type="submit"],
.wpcf7 form input[type="submit"] {
  display: block !important;
  margin: 0 auto !important;
}



/* =========================================
   CV thankyou page 関連
========================================= */

.thanks-hero {
  text-align: center;
  padding: 64px 20px 40px;
}
.thanks-hero img {
  max-width: 100%;
  height: auto;
  margin-bottom: 32px;
  width: 480px; /* 本家の画像サイズ感に合わせる */
}
.thanks-title {
  font-size: clamp(20px, 4vw, 28px);
  color: var(--color-accent);
  margin-bottom: 24px;
  font-weight: bold;
}
.thanks-desc {
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 40px;
}
.thanks-btn-wrapper {
  margin-bottom: 64px;
}

/* ▼ 他の資料のサジェストエリア（クロスセル） ▼ */
.suggest-sec {
  background: #f8f9fb;
  padding: 64px 20px 80px;
}
.suggest-title {
  text-align: center;
  font-size: clamp(15px, 3vw, 18px);
  color: var(--color-accent);
  margin-bottom: 40px;
  font-weight: bold;
  line-height: 1.6;
}
.suggest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.suggest-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
}
.suggest-card-img {
  background: #e0e6ed;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}
.suggest-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.suggest-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}
.suggest-card-title {
  font-size: 18px;
  font-weight: bold;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 12px;
}
.suggest-card-text {
  font-size: 13px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 24px;
  flex-grow: 1;
}
.suggest-card-link {
  color: #005FAB; /* BlueBeanのリンクカラー */
  text-decoration: none;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  transition: opacity 0.3s;
}
.suggest-card-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* =========================================
   thankyouページ_Style
========================================= */

  /* 全体のリセットとベース設定（他のページに影響しないようスコープ化） */
  .thanks-page-wrapper {
    font-family: sans-serif;
    color: #333;
    line-height: 1.6;
  }
  .thanks-page-wrapper img {
    max-width: 100%;
    height: auto;
  }
  .thanks-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* --- ヒーローセクション（上部） --- */
  .thanks-hero {
    padding: 60px 0 40px;
    text-align: center;
  }
  .thanks-title {
    font-size: 24px;
    font-weight: bold;
    color: #0f256e; /* BlueBeanのブランドカラーに近い濃い青 */
    line-height: 1.5;
    margin: 24px 0 20px;
  }
  .thanks-desc {
    font-size: 15px;
    margin-bottom: 32px;
  }
  .thanks-btn-wrapper .btn-cta {
    display: inline-block;
    width: 100%;
    max-width: 320px;
    padding: 16px;
    text-decoration: none;
    border-radius: 30px;
    background: #5c6fff;
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(92, 111, 255, 0.3);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .thanks-btn-wrapper .btn-cta:hover {
    opacity: 0.8;
    transform: translateY(-2px);
  }

  /* --- サジェストセクション（下部） --- */
  .suggest-sec {
    background-color: #f4f7fb; /* 少し背景色を敷いて区切る */
    padding: 60px 0;
  }
  .suggest-title {
    font-size: 18px;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #0f256e;
    font-weight: bold;
  }
  
  /* 🌟 グリッドレイアウト（ここで1カラム/2カラムを制御） */
  .suggest-grid {
    display: grid;
    grid-template-columns: 1fr; /* スマホ：1カラム */
    gap: 24px;
  }

  /* カードのデザイン */
  .suggest-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column; /* 中身を縦並びにして高さを揃える */
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
  }
  .suggest-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    transform: translateY(-4px);
  }
  .suggest-card-img {
    background: #e9ecef;
    aspect-ratio: 16 / 9; /* 画像の比率を固定 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    overflow: hidden;
  }
  .suggest-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .suggest-card-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* テキスト量が違ってもボタンが一番下に揃う魔法 */
  }
  .suggest-label {
    display: inline-block;
    background: #e8ebfc;
    color: #5c6fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 12px;
    width: fit-content;
  }
  .suggest-card-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    color: #1a1a1a;
  }
  .suggest-card-text {
    font-size: 14px;
    color: #555;
    margin-bottom: 24px;
    flex-grow: 1; /* 余白をここで吸収 */
  }
  .suggest-card-link {
    color: #5c6fff;
    font-weight: bold;
    font-size: 14px;
  }

  /* --- PC向けレスポンシブ設定 --- */
  @media (min-width: 768px) {
    .sp-only { 
      display: none; /* PCではスマホ用改行を消す */
    }
    .thanks-title {
      font-size: 32px;
    }
    .thanks-desc {
      font-size: 16px;
    }
    .suggest-title {
      font-size: 22px;
    }
    .suggest-grid {
      grid-template-columns: repeat(2, 1fr); /* PC：2カラム */
      gap: 32px;
    }
  }


/* =========================================
   header - ハンバーガーメニュー
========================================= */

  /* ドロワーメニュー内のナビゲーション専用スタイル */
.drawer-nav-item {
  display: block;        /* ブロック要素にして縦に並べる */
  color: #333333;        /* 白背景で見えるように暗い文字色にする */
  font-size: 16px;       /* お好みの文字サイズ */
  font-weight: bold;     /* 太字（お好みで） */
  padding: 15px 20px;    /* 上下左右の余白でタップしやすくする */
  text-decoration: none; /* 下線を消す */
  border-bottom: 1px solid #eeeeee; /* 項目の間に薄い区切り線を引く（お好みで） */
}

/* 最後の項目の下線を消したい場合 */
.drawer-nav-item:nth-of-type(3) {
  margin-bottom: 20px; /* 電話番号との間に少し隙間を空ける */
}


/* =========================================
   メインビジュアル：絶対に消えないフワフワUIカード装飾
========================================= */

/* --- カードの基本デザイン（絶対に表示させる安全設定） --- */
.ui-card {
  position: absolute;
  background-color: #fff;
  padding: 12px 20px; /* アイコンがない分、少し余白を広めに */
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); /* 影を少し濃くして目立たせる */
  display: flex;
  align-items: center;
  z-index: 10; /* 確実に画像の上に重ねる */
  line-height: 1.3;
  
  /* 【重要】アニメーションが失敗しても必ず表示されるよう、基本を不透明(1)にする */
  opacity: 1;
  transform: translateY(0);
}

/* --- テキストのデザイン --- */
.ui-card-text {
  font-size: 14px;
  color: #333;
  margin: 0;
}
.ui-card-text b {
  font-weight: bold;
}

/* --- 各カードの配置と、アニメーションの個別設定 --- */
/* backwards を指定することで、「出現するまでの待機時間」だけ透明にしています */
.card-1 {
  bottom: calc(10% + 130px);
  left: -5%;
  animation: 
    cardEntrance 0.6s ease-out 0.2s backwards, 
    floatingSmall 5s ease-in-out 0.8s infinite;
}

.card-2 {
  bottom: calc(10% + 65px);
  left: -5%;
  animation: 
    cardEntrance 0.6s ease-out 0.4s backwards, 
    floatingSmall 5s ease-in-out 1.0s infinite;
}

.card-3 {
  bottom: 10%;
  left: -5%;
  animation: 
    cardEntrance 0.6s ease-out 0.6s backwards, 
    floatingSmall 5s ease-in-out 1.2s infinite;
}

/* --- スマホ表示時のカード位置微調整 --- */
@media screen and (max-width: 768px) {
  .card-1 { left: 2%; bottom: calc(5% + 110px); }
  .card-2 { left: 2%; bottom: calc(5% + 55px); }
  .card-3 { left: 2%; bottom: 5%; }
  
  .ui-card {
    padding: 8px 16px;
  }
  .ui-card-text {
    font-size: 12px;
  }
}

/* =========================================
   アニメーションの設計図（Keyframes）
========================================= */

/* アニメーション1：下からフワッと出現 */
@keyframes cardEntrance {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* アニメーション2：上品に小さくフワフワ動き続ける */
@keyframes floatingSmall {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* ==========================================
 * 記事詳細ページ（single.php）用のスタイル
 * ========================================== */
 .news-article {
  padding: 60px 0;
  max-width: 800px; /* 文章が散らばらずに読みやすい横幅に制限 */
  margin: 0 auto;
}
.news-article-header {
  border-bottom: 2px solid #002a66;
  padding-bottom: 20px;
  margin-bottom: 40px;
}
.news-article-meta {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.news-article-title {
  font-size: 28px;
  color: #333;
  line-height: 1.4;
  margin: 0;
  font-weight: bold;
}
.news-article-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
/* 記事本文内の各HTML要素の最低限のビジュアル調整 */
.news-article-body p {
  margin-bottom: 24px;
}
.news-article-body h2 {
  font-size: 22px;
  color: #002a66;
  border-left: 4px solid #002a66;
  padding-left: 12px;
  margin: 40px 0 20px;
}
.news-article-body h3 {
  font-size: 18px;
  color: #333;
  margin: 30px 0 15px;
}
.news-article-body img {
  max-width: 100%;
  height: auto;
  margin-bottom: 24px;
}


/* ==========================================
 * TOPページニュースセクション（レイアウト・レスポンシブ）
 * ========================================== */
 .top-news-section {
  padding: 60px 0 80px;
  background-color: #fff;
}
.top-news-section .section-title {
  text-align: center;
  color: #002b6b; /* BlueBeanのベースカラー */
  font-size: 26px;
  margin-bottom: 40px;
  font-weight: bold;
  letter-spacing: 0.1em;
}

/* リスト全体の枠組み（黒丸を消して中央寄せ） */
.news-list {
  list-style: none !important; /* 箇条書きの「・」を強制的に消去 */
  padding: 0 !important;
  margin: 0 auto !important;
  max-width: 1000px; /* フォームの幅に合わせる */
  border-top: 1px solid #e0e0e0; /* 一番上の罫線 */
}

/* 1行ごとの設定（上下に罫線を引く） */
.news-item {
  display: flex;
  align-items: center;
  padding: 20px 15px;
  border-bottom: 1px solid #e0e0e0; /* 1行ごとの区切り罫線 */
  font-size: 15px;
}

/* 日付のスタイル */
.news-date {
  color: #666;
  font-family: 'Inter', sans-serif;
  margin-right: 30px;
  flex-shrink: 0; /* 画面が狭くなっても日付を潰さない */
}

/* カテゴリのラベル（未分類などの箱） */
.news-category {
  display: inline-block;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  margin-right: 30px;
  flex-shrink: 0;
  min-width: 90px;
  box-sizing: border-box;
}

/* カテゴリ別の背景色設定（スラッグ名と連動） */
.news-category.cat-info { background-color: #7f8c8d; }        /* お知らせ: グレー */
.news-category.cat-release { background-color: #002b6b; }     /* リリース: 濃紺 */
.news-category.cat-maintenance { background-color: #df473c; } /* 障害情報: 赤 */
.news-category.cat-media { background-color: #2e8b57; }       /* 掲載情報: 緑 */
.news-category.cat-blog { background-color: #d35400; }        /* ブログ更新: オレンジ */
.news-category.cat-default { background-color: #95a5a6; }     /* 未分類（初期状態）: 薄いグレー */

/* 記事タイトル（リンク）のスタイル */
.news-title {
  color: #333 !important;
  text-decoration: none !important;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 文字が長すぎる場合は1行に収めて右側を「...」にする */
  flex-grow: 1; /* 残りの横幅をいっぱいに使う */
  transition: color 0.2s ease;
  text-align: left;
}
.news-title:hover {
  color: #005FAB !important; /* ホバー時にBlueBeanのサブカラーに変身 */
  text-decoration: underline !important;
}

/* ==========================================
 * スマホ用レスポンシブ対応（画面幅768px以下）
 * ========================================== */
@media screen and (max-width: 768px) {
  .news-item {
    flex-wrap: wrap; /* 横並びが限界になったら折り返す */
    padding: 15px 10px;
  }
  .news-date {
    margin-right: 15px;
    margin-bottom: 8px;
    font-size: 14px;
  }
  .news-category {
    margin-right: 0;
    margin-bottom: 8px;
    font-size: 11px;
    padding: 3px 10px;
    min-width: 80px;
  }
  .news-title {
    width: 100%; /* タイトルを2行目にストンと落とす */
    white-space: normal; /* スマホでは折り返しを許可 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* スマホ画面でも最悪2行までに収めてスマートに見せる */
    font-size: 14px;
  }
}

/* ==========================================
 * FV専用：H1の上でふわふわ浮かぶ汎用吹き出し（他業種使い回し対応）
 * ========================================== */
/* 親要素（左側のテキストエリア） */
.ind-fv-text {
  position: relative !important;
  padding-top: var(--sp-10) !important; /* ★ 64pxから80px (8×10) に広げてH1との間隔を確保！ */
}

.ui-balloon {
  position: absolute;
  background: linear-gradient(135deg, #005FAB 0%, #007ae6 100%);
  color: #fff;
  padding: var(--sp-2) var(--sp-4); /* 16px × 32px (8の倍数) */
  border-radius: var(--sp-4); /* 32px (8の倍数) */
  box-shadow: 0 8px 24px rgba(0, 95, 171, 0.35);
  z-index: 12;
  font-weight: bold;
  font-size: var(--sp-2); /* 16px (8の倍数) */
  white-space: nowrap;
  letter-spacing: 0.05em;
  
  /* 初期表示の安全設定 */
  opacity: 1;
  transform: translateY(0);
}

/* 吹き出しの「ツノ」（下向きの三角形） */
.ui-balloon::after {
  content: '';
  position: absolute;
  bottom: -8px; /* 8px (8×1) */
  left: var(--sp-4); /* 32px (8の倍数) */
  border-width: 8px 8px 0; /* 8px (8×1) */
  border-style: solid;
  border-color: #007ae6 transparent transparent transparent;
}

/* H1の真上に位置を指定（リネーム完了） */
.card-solution {
  top: 0;
  left: 0;
  animation: 
    cardEntrance 0.6s ease-out 0s backwards, 
    floatingBalloon 4.5s ease-in-out 0.5s infinite;
}

/* 吹き出し専用のフワフワアニメーション */
@keyframes floatingBalloon {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); } /* 8px移動 (8×1) */
  100% { transform: translateY(0); }
}

/* ==========================================
 * スマホ用レスポンシブ対応（画面幅768px以下）
 * ========================================== */
@media screen and (max-width: 768px) {
  .ind-fv-text {
    padding-top: var(--sp-8) !important; /* ★ スマホも48pxから64px (8×8) に広げて間隔をキープ */
  }
  .card-solution {
    top: 0;
    left: 0;
  }
  .ui-balloon {
    padding: var(--sp-1) var(--sp-3); /* 8px × 24px */
    font-size: var(--sp-2); /* 16pxを維持 */
    border-radius: var(--sp-3); /* 24px */
  }
  .ui-balloon::after {
    bottom: -8px;
    left: var(--sp-3); /* 24px */
    border-width: 8px 8px 0;
  }
}

/* ==========================================
 * 料金ページ：テーブル・見出しリニューアル（画像完全同期版）
 * ========================================== */

/* 料金全体のコンテナ最大幅 */
.price-page-wrapper {
  max-width: 1000px;
  margin: 0 auto;
}

/* 各テーブルの上の中見出し：「初期料金（税別）」など */
.price-sub-title {
  color: var(--color-accent);
  font-size: 20px;
  font-weight: 700;
  margin-top: var(--sp-6);   /* 48px (8×6) */
  margin-bottom: var(--sp-2);/* 16px (8×2) */
  text-align: left;
  border-left: 4px solid var(--color-accent); /* 左側にアクセントの縦線をいれて引き締め */
  padding-left: var(--sp-1); /* 8px (8×1) */
}
/* 最初の見出しだけ上部の余白をリセットして綺麗に */
.price-page-wrapper .price-sub-title:first-of-type {
  margin-top: 0;
}

/* 縦型料金テーブルの基本構造 */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--color-white);
  border-radius: var(--rad-2);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  margin-bottom: var(--sp-1); /* 8px (8×1) */
}

/* テーブルヘッダー（内容 / 費用）の青帯 */
.price-table th {
  background-color: var(--color-accent); /* BlueBeanベースの濃い紺色 */
  color: var(--color-white);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-3); /* 16px × 24px */
  text-align: left;
  font-size: 15px;
  border: 1px solid var(--color-accent);
}

/* テーブルのデータセル */
.price-table td {
  border: 1px solid #ddd;
  padding: var(--sp-3) var(--sp-3); /* 24px × 24px */
  text-align: left;
  vertical-align: middle;
  background-color: var(--color-white);
}

/* カラムごとの横幅の黄金比率（PC時） */
.price-table th:first-child,
.price-table td:first-child {
  width: 30%; /* 「内容」カラム */
}
.price-table th:last-child,
.price-table td:last-child {
  width: 70%; /* 「費用」カラム */
}

/* 内容テキスト（初期料金、システム基本料金など） */
.price-name {
  font-weight: 700;
  color: var(--color-text);
  font-size: 15px;
}

/* 費用（金額数値）の強調スタイル */
.price-value {
  font-weight: 700;
  color: #111111;
  font-size: 18px; /* 数字を一回り大きくして目立たせる */
}

/* 単位・補足テキスト（／ 1契約：月額固定費用 など） */
.price-unit {
  font-size: 14px;
  font-weight: normal;
  color: #555555;
  margin-left: var(--sp-2); /* 金額との間を 16px (8×2) 離す */
}

/* 初期費用テーブル直下の単行注意書き */
.price-table-note {
  font-size: 13px;
  color: #666666;
  margin-top: 0;
  margin-bottom: var(--sp-5); /* 下のテーブルとの間隔を 40px (8×5) 確保 */
  text-align: left;
  line-height: 1.5;
}

/* 最下部の複数行注意書きリスト */
.price-table-note-list {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0 0; /* 上に 16px (8×2) の余白 */
}
.price-table-note-list li {
  font-size: 13px;
  color: #666666;
  margin-bottom: var(--sp-1); /* 項目間を 8px (8×1) 離す */
  line-height: 1.6;
  text-align: left;
}
.price-table-note-list li:last-child {
  margin-bottom: 0;
}

/* ==========================================
 * スマホ用レスポンシブ対応（画面幅768px以下）
 * ========================================== */
@media screen and (max-width: 768px) {
  .price-table th, .price-table td {
    padding: var(--sp-2) var(--sp-2); /* スマホ用にパディングを16pxに縮小 */
  }
  .price-table th:first-child,
  .price-table td:first-child {
    width: 35%; /* スマホでは左側の比率をわずかに広げて文字の折り返しを防止 */
  }
  .price-name, .price-value {
    font-size: 14px;
  }
  /* ★最重要：スマホでは「／ 1契約：〜」の補足を金額の下に落として、横潰れを絶対に防ぐ */
  .price-unit {
    display: block; 
    margin-left: 0;
    margin-top: 4px; /* 金額との縦の間隔 */
    font-size: 12px;
  }
}

/* ==========================================
 * 改良版B案：動画から放たれる太い波紋
 * ========================================== */
 .video-ripple-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%; 
  aspect-ratio: 1 / 1; /* 正円を作るための黄金比 */
  transform: translate(-50%, -50%);
  z-index: 1; /* 動画の後ろに配置 */
  pointer-events: none;
}
.v-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(255, 255, 255, 0.25); /* 線の太さを4pxにしてくっきりさせる */
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  animation: videoRippleExpand 6s cubic-bezier(0.25, 0.8, 0.25, 1) infinite;
}
.v-ring-1 { animation-delay: 0s; }
.v-ring-2 { animation-delay: 2s; }
.v-ring-3 { animation-delay: 4s; }

@keyframes videoRippleExpand {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* ==========================================
 * 料金ページ：中見出し(H4) / 小見出し(H5)
 * ========================================== */

/* ==========================================
 * 注意事項・注釈エリア（AEO最適化＆デザイン調整版）
 * ========================================== */

/* エリア全体を囲む箱 */
.page-citation-area { 
  width: 100%; 
  box-sizing: border-box; 
  margin-top: var(--sp-6); 
  background: var(--color-base); 
  padding: 32px; 
  border-radius: var(--rad-2); 
  text-align: left; 
}

/* 中見出し（H4用）: 左に青いライン */
.page-citation-heading {
  font-size: 16px;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: var(--sp-2);
  font-weight: bold;
  border-left: 4px solid var(--color-accent);
  padding-left: 10px;
}

/* 小見出し（H5用）: 上の余白をしっかり取る（詰まりすぎ解消） */
.page-citation-subheading {
  font-size: 15px;
  color: var(--color-accent);
  margin-top: 40px; 
  margin-bottom: 12px;
  font-weight: bold;
}

/* ★例外ルール: H4のすぐ下に来る最初のH5だけは、間延びしないよう余白を少し詰める */
.page-citation-heading + .page-citation-subheading {
  margin-top: var(--sp-3); /* 24px */
}

/* ▼などの条件テキスト */
.page-condition-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
}

/* 補足（※）のテキスト: サイズを小さく控えめに */
.page-disclaimer {
  font-size: 12px !important;
  color: #666666;
  line-height: 1.5;
  margin: 0 0 8px 0;
}

/* リスト: 先頭に自動で中黒（・）を付与 */
.page-citation-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}
.page-citation-list li {
  position: relative;
  padding-left: 1.2em; /* 中黒のスペース分を下げる */
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--color-text);
}
.page-citation-list li::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-text);
}

/* ==========================================
 * FAQはこちらに置き換え！
 * ========================================== */

/* FAQ（よくある質問） */
dl.faq-list { max-width: 900px; margin: 0 auto; padding: 0; } /* dlのデフォルトpaddingをリセット */
.faq-item { margin-bottom: var(--sp-5); }
.faq-item:last-child { margin-bottom: 0; }

dt.faq-q { 
  background-color: rgba(0, 43, 107, 0.05); 
  color: var(--color-accent); 
  padding: var(--sp-3) var(--sp-4); 
  border-radius: 8px 8px 8px 0; 
  /* dtの標準marginをリセットしつつ右に10%、下に16pxの余白を指定 */
  margin: 0 10% 16px 0; 
  font-weight: 700; 
  font-size: 16px; 
  display: flex; 
  gap: 16px; 
}
dt.faq-q::before { content: "Q"; color: var(--color-sub); font-size: 24px; line-height: 1; font-family: 'Inter', sans-serif; }

dd.faq-a { 
  background-color: var(--color-white); 
  border: 1px solid #ddd; 
  padding: var(--sp-3) var(--sp-4); 
  border-radius: 8px 8px 0 8px; 
  /* ddタグ特有の標準左余白(40px等)を上書きしつつ、左に10%の余白を指定 */
  margin: 0 0 0 10%; 
  display: flex; 
  gap: 16px; 
  font-size: 15px; 
  line-height: 1.6; 
}
dd.faq-a::before { content: "A"; color: var(--color-accent); font-weight: 700; font-size: 24px; line-height: 1; font-family: 'Inter', sans-serif; }

@media (max-width: 833px) {
  dt.faq-q { margin: 0 5% 16px 0; }
  dd.faq-a { margin: 0 0 0 5%; }
}


/* ==========================================
 * お問い合わせフォーム左側のスタイル
 * ========================================== */

.slide-viewer-wrapper {
  width: 100%;
  max-width: 500px;
  margin: 0 auto 32px auto;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}
.slide-viewport {
  background-color: #ffffff;
  display: flex;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 !important;
  padding: 0 !important;
}
.slide-viewport::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
.slide-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  scroll-snap-align: start;
  display: block;
  margin: 0 !important;
  padding: 0 !important;
}
.slide-footer {
  background-color: var(--color-accent);
  padding: 8px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slide-nav-btn {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 5px 15px;
  border-radius: 4px;
  transition: background 0.3s;
}
.slide-nav-btn:hover {
  background: rgba(255, 255, 255, 0.4);
}


/* =========================================
   下層ページ専用：ヘッダー上の白い隙間を塞ぐ修正
========================================= */
/* 1. パンくずリストがグレー背景に埋もれないよう、前面に出す */
.ind-breadcrumbs {
  position: relative;
  z-index: 10;
}

/* 2. グレー背景の「引っ張り上げ量」を増やして、上の余白まで完全に届かせる */
body:not(.home) .ind-top-bg,
body:not(.home) .page-top-bg {
  margin-top: -160px !important;
  padding-top: 160px !important;
}


/* =========================================
   無料デモページ：左側バナーの中央寄せ（決定版）
========================================= */
/* オレンジの背景箱：横幅いっぱいに広げつつ、中身を中央に寄せる */
.dl-left-banner {
  display: flex;
  justify-content: center;   /* 中の箱をど真ん中に配置 */
  width: 100%;               /* 背景は親枠に合わせて100%に広げる */
  box-sizing: border-box;
}

/* 新しく追加した「テキストをまとめる透明な箱」 */
.dl-left-banner-inner {
  width: fit-content;        /* 箱の横幅を文字の長さにピッタリ合わせる */
  text-align: left;          /* 中の文字は左揃えをキープ！ */
  
  /* スマホ対策：画面が狭いときに端にくっつくのを防ぐ安全装置 */
  max-width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}