/* ========================================
   SP Styles (max-width: 768px)
   ======================================== */

/* ── Display Toggle ── */
.pc-only { display:none !important; }
.sp-only { display:block !important; }

/* ── Header ── */
.header { padding:12px 16px; height:80px; box-shadow:0 1px 4px rgba(0,0,0,0.06); background:#fff; }
.logo-img { width:80px; }
.hamburger {
  display:flex;
}
.header-nav {
  position:fixed; top:0; right:-280px; width:260px; height:100vh;
  background:#fff; z-index:200;
  display:flex; flex-direction:column; gap:0;
  padding:72px 24px 24px;
  box-shadow:-4px 0 20px rgba(0,0,0,0.1);
  transition:right 0.3s ease;
}
.header-nav.open { right:0; }
.header-nav a {
  font-size:15px; padding:14px 0;
  border-bottom:1px solid #eee;
}
.header-nav a:last-child { border-bottom:none; }
.btn-green-gradient { font-size:14px; padding:10px 20px; border-radius:10px; }
.menu-overlay {
  display:block;
  position:fixed; top:0; left:0; bottom:0; right:260px;
  background:rgba(0,0,0,0.35);
  z-index:190; opacity:0; pointer-events:none;
  transition:opacity 0.3s;
}
.menu-overlay.open { opacity:1; pointer-events:auto; }

/* ── Hero ── */
.hero-buttons {
  position:absolute; bottom:6%; left:50%; transform:translateX(-50%);
  flex-direction:row; justify-content:center; gap:10px; width:88%;
}
.btn-orange {
  width:auto; flex:1; height:48px; font-size:15px; font-weight:800;
  border-radius:10px; box-shadow:0 3px 12px rgba(140,76,0,0.5);
}
.btn-white-border {
  width:auto; flex:1; height:48px; font-size:15px; font-weight:600;
  border-radius:10px; box-shadow:0 3px 12px rgba(0,0,0,0.2);
}

/* ── Section Title ── */
.section-title { padding:40px 20px 16px; }
.section-title h2 { font-size:24px; letter-spacing:-0.48px; line-height:1.4; }

/* ── Arrow ── */
.arrow-divider { height:70px; margin-top:-1px; margin-bottom:-1px; line-height:0; overflow:hidden; }
.arrow-divider img { width:140px; transform:rotate(180deg); display:block; margin:0 auto; }

/* ========================================
   SP Problem (simplified text)
   ======================================== */
.sp-problem {
  padding:36px 20px;
  background:rgba(35,178,83,0.05);
}
.sp-problem-label {
  font-size:14px; font-weight:600; color:#ff8d0c;
  text-align:center; letter-spacing:2px; text-transform:uppercase;
  margin-bottom:8px;
}
.sp-problem-title {
  font-size:22px; font-weight:800; text-align:center;
  color:#333; margin-bottom:24px; line-height:1.4;
}
.sp-problem-title span { color:#23b253; }
.sp-problem-list {
  display:flex; flex-direction:column; gap:0;
}
.sp-problem-item {
  background:#fff; border-radius:0; padding:20px 16px;
  border-bottom:1px solid #e0e0e0;
}
.sp-problem-item:last-child { border-bottom:none; }
.sp-problem-item h3 {
  font-size:16px; font-weight:700; color:#555;
  line-height:1.45; margin-bottom:6px;
}
.sp-problem-item h3 span { color:#23b253; }
.sp-problem-item:nth-child(even) h3 span { color:#ff8d0c; }
.sp-problem-item p {
  font-size:13px; color:#888; line-height:1.6;
}

/* ========================================
   SP Feature: AI受託開発
   ======================================== */
.sp-feature {
  padding:32px 20px 40px;
  background:#fff;
}
.sp-feature-catch {
  text-align:center; font-size:15px; font-weight:600;
  color:#555; line-height:1.6; margin-bottom:28px;
  padding:0;
}
.sp-feature-catch strong { color:#23b253; }
.sp-feature-title {
  font-size:28px; font-weight:800;
  color:#23b253; margin-bottom:10px;
}
.sp-feature-desc {
  font-size:15px; font-weight:500; color:#888;
  line-height:1.65; margin-bottom:28px;
}
.sp-compare {
  display:grid; grid-template-columns:1fr 1fr; gap:12px;
  margin-bottom:28px;
}
.sp-compare-col { padding:16px; overflow:hidden; }
.sp-compare-label {
  font-size:13px; font-weight:700; text-align:center;
  padding:6px 0; margin-bottom:12px; border-bottom:2px solid #ddd;
}
.sp-compare-general { background:#fafafa; }
.sp-compare-general .sp-compare-label { color:#ff8d0c; border-bottom-color:#ff8d0c; }
.sp-compare-general ul { color:#888; }
.sp-compare-ours { background:#fff; }
.sp-compare-ours .sp-compare-label { color:#23b253; border-bottom-color:#23b253; }
.sp-compare-ours ul { color:#23b253; font-weight:600; }
.sp-compare-col ul {
  list-style:none; display:flex; flex-direction:column; gap:8px;
  font-size:14px; line-height:1.4;
}
.sp-compare-col ul li::before { content:"\2022\00a0"; font-weight:700; }
.sp-strengths {
  display:flex; flex-direction:column; gap:12px; margin-bottom:28px;
}
.sp-strength-card {
  background:#fff; border-radius:0; padding:20px 0;
  border-bottom:1px solid #e0e0e0;
}
.sp-strength-card:last-child { border-bottom:none; }
.sp-strength-card h4 {
  font-size:17px; font-weight:700; color:#23b253;
  margin-bottom:8px; text-align:left;
}
.sp-strength-card:nth-child(2) h4 { color:#ff8d0c; }
.sp-strength-card p {
  font-size:14px; color:#555; line-height:1.6; text-align:left;
}
.sp-feature-bottom {
  font-size:14px; font-weight:500; color:#555; line-height:1.7;
  padding:0; margin-top:8px;
}

/* ========================================
   SP Usecase
   ======================================== */
.usecase-section { padding:0 20px 32px; }
.usecase-lead {
  font-size:15px; text-align:left; margin-bottom:28px;
  line-height:1.7; color:#888;
}
.usecase-grid {
  grid-template-columns:1fr 1fr; gap:24px;
}
.usecase-icon { width:80px; height:80px; }
.usecase-card h4 { font-size:15px; }
.usecase-card p { font-size:13px; color:#888; }

/* ── CTA Green ── */
.cta-green {
  flex-direction:column; align-items:stretch;
  gap:14px; padding:20px 24px;
}

/* ── Pill Buttons (all) ── */
.btn-green-pill,
.btn-green-outline-pill,
.btn-orange-pill {
  width:100%; padding:18px 0; font-size:17px; font-weight:700;
  text-align:center; box-sizing:border-box;
  box-shadow:0 8px 24px rgba(35,178,83,0.15);
  white-space:normal;
}

/* ── Flow Steps (with color) ── */
.flow-steps { padding:0 20px 48px; gap:0; }
.flow-step { border-radius:14px; }
.flow-step-number {
  min-width:56px; width:56px;
  border-radius:14px 0 0 14px; padding:16px 0;
}
/* flow-step-number uses solid #23b253 from PC style.css (no per-step overrides) */
.flow-step-number .step-label { font-size:9px; }
.flow-step-number .step-num { font-size:20px; }
.flow-step-body { padding:16px 20px; }
.flow-step-body h4 { font-size:16px; margin-bottom:6px; letter-spacing:-0.32px; }
/* flow-step h4 uses #23b253 from PC style.css (no per-step overrides) */
.flow-step-body p { font-size:13px; line-height:1.55; }
.flow-arrow { font-size:18px; padding:4px 0; }

/* ── Cases ── */
.cases-section { padding:36px 0 16px; gap:14px; }
.cases-content h2 .big { font-size:24px; }
.cases-content h2 .small { font-size:18px; }
.cases-content > p { font-size:15px; padding:0 24px; }
.cases-carousel-wrap { padding:16px 0 28px; }
.cases-track { gap:14px; }
.carousel-card { width:260px; border-radius:14px; }
.carousel-card:hover {
  transform:none;
  box-shadow:0 2px 8px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.04);
}
.carousel-card-img { height:150px; }
.carousel-card h3 { font-size:16px; padding:14px 16px 6px; line-height:1.4; }
.carousel-card p { font-size:13px; padding:0 16px 16px; line-height:1.55; }

/* ========================================
   SP Chatbot
   ======================================== */
.sp-chatbot {
  background:rgba(35,178,83,0.05);
  padding:36px 20px;
}
.sp-chatbot-inner {
  background:#fff;
  border-radius:16px;
  padding:28px 20px;
  box-shadow:0 2px 12px rgba(0,0,0,0.05);
}
.sp-chatbot-example {
  display:flex; align-items:center; gap:10px;
  margin-bottom:2px;
}
.sp-chatbot-label {
  color:#23B253; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:5px;
  border:2px solid #23B253; flex-shrink:0;
}
.sp-chatbot-example p {
  font-size:16px; font-weight:700; line-height:1.4; margin:0;
}
.sp-chatbot-line {
  display:block; width:80%; height:20px; margin-bottom:20px;
}
.sp-chatbot h3 {
  font-size:26px; font-weight:800; line-height:1.3;
  letter-spacing:-0.52px; margin-bottom:20px;
}
.sp-chatbot-img {
  width:60%; max-width:240px; height:auto;
  display:block; margin:0 auto 20px;
}
.sp-chatbot-desc {
  font-size:14px; font-weight:500; color:rgba(0,0,0,0.55);
  line-height:1.75;
}

/* ========================================
   SP CTA Green Banner
   ======================================== */
.sp-cta-green {
  background:#23b253;
  padding:32px 24px; text-align:center;
}
.sp-cta-sub {
  display:inline-block; font-size:13px; font-weight:700; color:#fff;
  background:rgba(255,255,255,0.2); border-radius:8px;
  padding:8px 16px; margin-bottom:16px;
}
.sp-cta-main {
  font-size:22px; font-weight:800; color:#fff;
  margin-bottom:32px; line-height:1.4;
}
.sp-cta-main strong { font-size:28px; }
.sp-cta-green .btn-orange-pill {
  width:100%; padding:16px 0; font-size:17px; box-sizing:border-box;
}

/* ========================================
   SP Training
   ======================================== */
.sp-training {
  padding:32px 20px 40px;
  background:#fff;
}
.sp-training-badge {
  display:inline-block; background:#23b253; color:#fff;
  font-size:13px; font-weight:700; padding:6px 14px;
  border-radius:20px; margin-bottom:12px;
}
.sp-training-title { font-size:26px; font-weight:800; color:#23b253; margin-bottom:6px; }
.sp-training-sub { font-size:14px; color:#666; margin-bottom:20px; }
.sp-training-courses {
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:24px;
}
.sp-course-card { border-radius:12px; padding:16px; min-height:120px; }
.sp-course-a { background:#fff; border:1px solid rgba(0,0,0,0.08); }
.sp-course-b { background:rgba(255,141,12,0.06); border:1px solid rgba(255,141,12,0.15); }
.sp-course-badge-a, .sp-course-badge-b {
  display:inline-block; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:4px; margin-bottom:8px;
}
.sp-course-badge-a { background:#ff8d0c; color:#fff; }
.sp-course-badge-b { background:#ff8d0c; color:#fff; }
.sp-course-card h4 { font-size:14px; font-weight:700; color:#222; line-height:1.4; margin-bottom:8px; }
.sp-course-card p { font-size:12px; color:#666; line-height:1.55; }
.sp-training-buttons { display:flex; flex-direction:column; gap:12px; }
.sp-training-buttons .btn-green-pill,
.sp-training-buttons .btn-green-outline-pill {
  width:100%; padding:16px 0; font-size:16px; box-sizing:border-box;
}

/* ── Q&A ── */
.qa-section { padding:40px 20px; gap:28px; }
.qa-header h2 { font-size:24px; }
.qa-header p { font-size:15px; }
.qa-list { gap:10px; }
.qa-item { border-radius:10px; }
.qa-summary { padding:16px 18px; font-size:15px; line-height:1.55; }
.qa-icon { width:14px; height:14px; margin-left:12px; }
.qa-icon::before { width:14px; }
.qa-icon::after { height:14px; }
.qa-body-inner { padding:14px 18px 18px; font-size:14px; line-height:1.7; }

/* ── Contact ── */
.contact-section { padding:40px 20px; gap:28px; }
.contact-header h2 { font-size:24px; }
.contact-header p { font-size:15px; line-height:1.6; }
.form-row { grid-template-columns:1fr; gap:0; }
.form-group input,
.form-group select,
.form-group textarea { font-size:15px; padding:12px 14px; }

/* ── Company Overview (width:85%) ── */
.company-overview { padding:32px 0; width:85%; margin:0 auto; }
.company-overview-inner { flex-direction:column; gap:28px; }
.company-overview-left { padding:0; gap:20px; width:85%; margin:0 auto; }
.company-overview-logo { width:120px; }
.company-table { max-width:100%; }
.company-table th,
.company-table td {
  font-size:15px; padding:14px 4px;
  letter-spacing:-0.3px; line-height:1.4;
}
.company-table th { width:25%; text-align:center; padding-left:0; }
.company-table td { width:75%; word-break:keep-all; }
.company-overview-right { padding:0; width:100%; }
.company-overview-right iframe { height:260px; border-radius:12px; }

/* ── Representatives ── */
.representatives {
  flex-direction:row; justify-content:center;
  gap:20px; padding:40px 20px; flex-wrap:wrap;
}
.rep-card { width:calc(50% - 10px); max-width:180px; gap:6px; }
.rep-photo { width:110px; height:106px; border-radius:50%; }
.rep-name { font-size:16px; line-height:1.4; }
.rep-title { font-size:11px; line-height:1.6; }

/* ── Footer ── */
.footer { padding:0 20px 60px; }
.footer-inner { flex-direction:column; gap:36px; padding-top:36px; }
.footer-brand { gap:20px; }
.footer-brand h4 { font-size:20px; }
.footer-brand-desc { font-size:14px; }
.social-links { gap:20px; }
.footer-nav { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.footer-col { width:auto; gap:8px; }
.footer-col h5 { font-size:14px; padding-bottom:10px; }
.footer-col a { font-size:14px; }

/* ── SP Fixed CTA ── */
.sp-fixed-cta {
  position:fixed; bottom:0; left:0; width:100%;
  z-index:200;
  padding:0;
  transform:translateY(100%);
  transition:transform 0.3s ease;
}
.sp-fixed-cta.is-visible {
  transform:translateY(0);
}
.sp-fixed-cta a {
  display:block; width:100%; text-align:center;
  padding:16px 0 calc(16px + env(safe-area-inset-bottom));
  font-size:15px; font-weight:700;
  text-decoration:none; letter-spacing:0.5px;
  background:linear-gradient(135deg,#23B253,#1a9642);
  color:#fff;
}
.footer { padding-bottom:90px !important; }