@charset "UTF-8";
/* CSS Document */
     :root {
      --color-text: #222222;   /* 基本文字 */
      --color-bg:   #f5f7f5;   /* ページ背景 */
      --color-border: #dddddd; /* 枠線 */
    }
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1.6;
      color: var(--color-text);
      /* background: var(--color-bg); */
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    a:hover {
      color: var(--color-main);
    }
    /* img {
      width: 100%;
      height: auto;
      display: block;
    } */

    /* レイアウト共通 */
    .site {
      max-width: 1000px; /* 条件：横幅 */
      width: 100%;
      margin: 0 auto;
      background: #ffffff;
      box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    }
    main {
      padding: 0 5%;
      background: #ffffff;
    }

    /* ヘッダー */
    .site-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      border-bottom: 1px solid #e5e5e5;
      background: #ffffff;
    }
    .logo {
      font-size: 18px;
      font-weight: bold;
      color: var(--color-sub);
    }
    .logo-sub {
      font-size: 11px;
      color: #999999;
    }
    .global-nav {
      display: flex;
      gap: 16px;
      font-size: 14px;
      color: var(--color-sub);
    }
    .global-nav a {
      position: relative;
      padding-bottom: 2px;
    }
    .global-nav a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 0;
      height: 2px;
      background: var(--color-main);
      transition: width 0.2s ease;
    }
    .global-nav a:hover::after {
      width: 100%;
    }

    /* スマホナビ（簡易） */
    .nav-toggle {
      display: none;
      font-size: 14px;
      padding: 6px 10px;
      border-radius: 4px;
      border: 1px solid var(--color-sub);
      background: #ffffff;
      color: var(--color-sub);
    }

    /* ヒーロー */
    .hero {
      border-bottom: 1px solid #f0f0f0;
    }
    .hero-bg{
        background: url(../images/spa-top.png) center / cover no-repeat;
    }
    .hero-inner {
        padding: 60px 40px 56px;
      display: flex;
      gap: 24px;
      align-items: center;
      background: rgba(10, 10, 10, 0.3);
    }
    .hero-main {
      flex: 1.3;
      text-align: center;
    }
    .hero-label {
      font-size: 13px;
      font-weight: bold;
      color: #d10000;
      margin-bottom: 4px;
      letter-spacing: 0.03em;
    }
    .hero-title {
      font-size: 30px;
      font-weight: bold;
      margin-bottom: 8px;
      color: var(--color-bg);
      text-align: center;
    }
    .hero-sub {
      font-size: 20px;
      color: var(--color-bg);
      margin-bottom: 16px;
    }
    .hero-text {
      font-size: 16px;
      color: #fffefe;
      margin-bottom: 20px;
    }
    .hero-ctas {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;
    }
    .btn-primary,
    .btn-secondary,
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 10px 16px;
      font-size: 16px;
      border-radius: 999px;
      border: 1px solid transparent;
      cursor: pointer;
      white-space: nowrap;
      transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
    }
    .btn-primary {
      background: var(--color-main);
      color: #ffffff;
      border-color: var(--color-main);
      box-shadow: 0 2px 6px rgba(195, 72, 31, 0.3);
    }
    .btn-primary:hover {
      background: #aa1b1b;
      border-color: #aa441b;
      box-shadow: 0 3px 8px rgba(195, 31, 31, 0.4);
    }
    .btn-secondary {
      background: #ffffff;
      color: var(--color-main);
      border-color: var(--color-main);
    }
    .btn-secondary:hover {
      background: rgba(143,195,31,0.06);
    }
    .btn-ghost {
      background: #f5f5f5;
      color: var(--color-sub);
      border-color: #cccccc;
    }
    .btn-ghost:hover {
      background: #eeeeee;
    }
    .hero-subinfo {
      margin-top: 12px;
      font-size: 11px;
      color: #999999;
    }
    .hero-visual {
      flex: 1;
      min-height: 180px;
      border-radius: 8px;
      border: 1px dashed rgba(102,102,102,0.4);
      background: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #aaaaaa;
    }

    /* セクション共通 */
    .section {
      padding: 32px 0;
      border-bottom: 1px solid #f0f0f0;
      background: #ffffff;
      margin: 0 auto;
    }
    .section-header {
      margin-bottom: 16px;
    }
    .section-label {
      font-size: 11px;
      color: var(--color-sub);
      margin-bottom: 4px;
      letter-spacing: 0.06em;
    }
    .section-title {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 4px;
      color: var(--color-sub);
    }
    .section-lead {
      font-size: 13px;
      color: #555555;
    }

    /* 課題セクション */
    .problem-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
      font-size: 13px;
    }
    .problem-card {
      padding: 18px;
      border-radius: 10px;
    background: linear-gradient(140deg, #f7ffe9, #ffffff);
    border: 1px solid var(--color-header);
    transition: 0.2s;
    }
    .problem-card-title {
      font-weight: bold;
      margin-bottom: 4px;
      font-size: 16px;
      color: var(--color-sub);
      text-align: left;
    }
    .problem-card-body {
      font-size: 12px;
      color: #666666;
    }

    /* 解決セクション */
    .solution-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
      font-size: 13px;
    }
    .solution-card {
      border-radius: 6px;
      border: 1px solid #e5e5e5;
      padding: 12px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }
    .solution-card-title {
      font-weight: bold;
      margin-bottom: 6px;
      font-size: 18px;
      color: var(--color-main);
      text-align: left;
    }
    .solution-card-body {
      font-size: 12px;
      color: #666666;
    }

    /* 特徴セクション */
    .feature-list {
      display: grid;
      grid-template-columns: repeat(1, minmax(0, 1fr));
      gap: 12px;
      font-size: 13px;
    }
    .feature-item {
      border-radius: 6px;
      border: 1px solid var(--color-main);
      padding: 12px;
      background: #ffffff;
    }
    .feature-title {
      font-weight: bold;
      margin-bottom: 4px;
      font-size: 16px;
      color: var(--color-main);
      border-left: 3px solid var(--color-main);
      padding-left: 6px;
    }
    .feature-body {
      font-size: 12px;
      color: #666666;
    }

    /* デモ・画面セクション */
    .demo-layout {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 16px;
      margin-top: 16px;
    }
    .demo-video {
      border-radius: 6px;
      border: 1px dashed #cccccc;
      min-height: 180px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #999999;
      background: #fafafa;
    }
    .demo-thumbs {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      font-size: 12px;
    }
    .demo-thumb {
      border-radius: 6px;
      border: 1px solid #e5e5e5;
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999999;
      background: #ffffff;
    }

    /* 導入効果セクション */
    .effect-list {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
      font-size: 13px;
    }
    .effect-item {
      border-radius: 6px;
      border: 1px solid #e5e5e5;
      padding: 12px;
      background: #ffffff;
    }
    .effect-label {
      font-size: 11px;
      color: var(--color-main);
      margin-bottom: 4px;
    }
    .effect-body {
      font-size: 12px;
      color: #666666;
    }

    /* 導入の流れ・補助金 */
    .flow-layout {
      /* display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 16px; */
      margin-top: 16px;
      font-size: 13px;
    }
    .flow-steps {
      margin: 0 auto;
      max-width: 500px;
      border-radius: 6px;
      border: 1px solid var(--brand-ink);
      padding: 12px;
      font-size: 12px;
      background: #ffffff;
      text-align: left;
    }
    .flow-step {
      border-bottom: 1px dashed #eeeeee;
      padding: 6px 0;
    }
    .flow-step:last-child {
      border-bottom: none;
    }
    .flow-step-title {
      font-weight: bold;
      margin-bottom: 2px;
      font-size: 16px;
      color: var(--color-sub);
    }
    .flow-step-body {
      color: #666666;
    }
    .subsidy-box {
      border-radius: 6px;
      border: 1px solid #d5e3b3;
      padding: 12px;
      font-size: 14px;
      background: #fbfff6;
    }
    .subsidy-title {
      font-weight: bold;
      margin-bottom: 4px;
      font-size: 13px;
      color: var(--color-sub);
    }
    .subsidy-body {
      color: #666666;
      margin-bottom: 8px;
    }

    /* CTA セクション */
    .cta-section {
      text-align: center;
      background:linear-gradient(90deg, var(--color-main), #d47a3192);
      border-radius: 6px;
    }
    .cta-box {
      display: inline-block;
      text-align: center;
      padding: 20px 16px;
      border-radius: 8px;
      border: 1px solid #d5e3b3;
      background: #ffffff;
      max-width: 640px;
      width: 100%;
      margin-top: 16px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.03);
    }
    .cta-text {
      font-size: 16px;
      margin-bottom: 16px;
      color: #555555;
      font-weight: bold;
    }
    .cta-buttons {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
    }

    /* フッター */
    .site-footer {
      padding: 16px;
      font-size: 11px;
      color: #f3f3f3;
      text-align: center;
      border-top: 1px solid #e5e5e5;
      background: var(--color-sub);
    }

    /* レスポンシブ */
    @media (max-width: 768px) {
      main,
      footer {
        padding: 0 5%;
      }
      .global-nav {
        display: none;
      }
      .nav-toggle {
        display: block;
      }
      .hero-inner {
        flex-direction: column;
      }
      .problem-grid,
      .solution-grid,
      .feature-list,
      .effect-list {
        grid-template-columns: minmax(0, 1fr);
      }
      .demo-layout,
      .flow-layout {
        grid-template-columns: minmax(0, 1fr);
      }
      .demo-thumbs {
        grid-template-columns: minmax(0, 1fr);
      }
      .cta-box {
        margin-top: 12px;
      }
    }
.effect-section {
  padding: 40px 0;
}

.effect-title {
  font-size: 22px;
  font-weight: bold;
  color: #666;
  margin-bottom: 20px;
  text-align: center;
}

.effect-block {
  margin-bottom: 32px;
}

.effect-block > h3 {
  font-size: 18px;
  font-weight: bold;
  color: #8FC31F;
  margin-bottom: 12px;
}

.effect-card {
  border: 1px solid #d5e3b3;
  background: #fbfff6;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  transition: 0.2s;
}

.effect-card:hover {
  border-color: #8FC31F;
  box-shadow: 0 3px 12px rgba(143,195,31,0.15);
}

.effect-card h4 {
  font-size: 15px;
  font-weight: bold;
  color: #666;
  margin-bottom: 6px;
}

.effect-card p {
  font-size: 13px;
  color: #555;
}
/* 追加した親要素に横並び設定 */
.effect-block-wrapper {
  display: flex;
  gap: 24px;
  justify-content: space-between;
  margin-top: 24px;
}

/* 各 block が均等幅で並ぶ */
.effect-block {
  flex: 1;
}

/* スマホは縦並びに切り替え */
@media (max-width: 768px) {
  .effect-block-wrapper {
    flex-direction: column;
  }
}

/* 左：課題　右：解決　の横並び */
.problem-solution-wrapper {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  /* margin: 40px 0; */
}

/* それぞれ50%幅で表示 */
.problem-solution-wrapper > section {
  flex: 1;
}

/* スマホでは縦並びに切り替え */
@media (max-width: 768px) {
  .problem-solution-wrapper {
    flex-direction: column;
    gap: 24px;
  }
}
/* 横並びレイアウト（全体） */
.arrow-layout {
  display: flex;
  gap: 40px;
  align-items: center;
  /* margin: 40px 0; */
}

/* 左（課題）と右（解決）の幅 */
.arrow-layout > section {
  flex: 1;
}

/* --- 中央矢印 --- */
.arrow-center {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.arrow-icon {
  font-size: 48px;
  font-weight: bold;
  color: var(--brand);
  line-height: 1;
  display: inline-block;
}

/* スマホは縦並び&矢印の向きを下に */
@media (max-width: 768px) {
  .arrow-layout {
    flex-direction: column;
    gap: 16px;
  }

  .arrow-center {
    width: auto;
  }

  .arrow-icon {
    font-size: 40px;
    transform: rotate(90deg); /* → を ↓ にする */
  }
}
/* -----------------------------------
   グリッドを使わないように上書きする
----------------------------------- */

/* 課題カードの並びをブロック化 */
.problem-grid {
  display: block !important;
}

.problem-card {
  margin-bottom: 20px;
}

/* 解決カードの並びをブロック化 */
.solution-grid {
  display: block !important;
}

.solution-card {
  margin-bottom: 20px;
}

/* -----------------------------------
   課題（左）→ 矢印（中央）→ 解決（右）
   横並びレイアウト（flexのみ）
----------------------------------- */

.problem-solution-wrapper,
.arrow-layout {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  /* margin: 40px 0; */
}

.arrow-layout > section {
  flex: 1;
}

/* 矢印（中央） */
.arrow-center {
  width: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (min-width: 769px){
    .arrow-icon {
  font-size: 55px;
  font-weight: bold;
  color: var(--accent);
  line-height: 10;
}
}
/* スマホでは縦並びに変更&矢印を下向きに */
@media (max-width: 768px) {
  /* 全体の縦の余白を少し減らす */
  .arrow-layout {
    margin: 24px 0;
    gap: 8px; /* 24px → 8px などに縮める */
  }

  /* 矢印上下の余白をほぼゼロに */
  .arrow-center {
    margin: 0 auto;
  }

  /* 問題・解決セクションの上下paddingを減らす */
  .arrow-layout > section {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* 見出し下の余白も少し詰める */
  .arrow-layout .section-header {
    margin-bottom: 8px;
  }
}




.arrow-layout > section:nth-of-type(1) {
  flex: 0 0 50%;
}

.arrow-layout > section:nth-of-type(3) {
  flex: 0 0 49%;
}
/* 特徴セクション：左右レイアウト */
.features-wrapper {
  display: flex;
  gap: 32px;
  /* align-items: flex-start; */
}

/* 左側：画像エリア */
.features-visual {
  flex: 0 0 40%; /* 画像：4割、テキスト：6割くらいの比率 */
}

/* ダミー用：実際は img に差し替え */
.features-visual-dummy {
  width: 100%;
  min-height: 220px;
  border-radius: 8px;
  border: 1px dashed #cccccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #777;
  background: #fafafa;
}

/* 右側：テキストエリア */
.features-content {
  flex: 1;
}

/* セクション見出しの下余白を少し詰める（任意） */
#features .section-header {
  margin-bottom: 16px;
}

/* スマホ・タブレットで縦並びに切り替え */
@media (max-width: 768px) {
  .features-wrapper {
    flex-direction: column;
  }

  .features-visual {
    flex: 0 0 auto;
  }

  .features-visual-dummy {
    min-height: 180px;
  }
}

/* 新セクション全体 */
.koutei-level-section {
  background: #ffffff;
  /* margin-top: 60px; */
}

/* 目的一覧（図解化） */
.purpose-block {
  margin: 32px 0;
  background: #f7fff1;
  border: 1px solid #d7eab7;
  padding: 20px;
  border-radius: 10px;
}

.purpose-title {
  font-size: 14px;
  font-weight: bold;
  color: #666;
  margin-bottom: 12px;
}

.purpose-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.purpose-item {
  background: #ffffff;
  border: 1px solid #d5e3b3;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #444;
}

/* レベル比較（図解） */
.level-compare {
  margin-top: 40px;
}

.level-title {
  font-size: 18px;
  font-weight: bold;
  color: #666;
  margin-bottom: 16px;
  text-align: left;
}

.level-grid {
  display: flex;
  gap: 20px;
}

/* 各レベルBOX */
.level-box {
  flex: 1;
  background: #ffffff;
  border: 1px solid var(--color-main);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(143,195,31,0.1);
}

.level-head {
  padding: 12px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-align: center;
}

.level-1 { background: #8FC31F; }
.level-2 { background: #6BA11A; }
.level-3 { background: #4F7C11; }

.level-body {
  padding: 16px;
}

.level-desc {
  font-size: 13px;
  margin-bottom: 12px;
  color: #444;
}

.level-ok-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 6px;
}

.level-ok-list {
  font-size: 13px;
  margin-bottom: 12px;
  padding-left: 16px;
}

.level-ok-list li {
  margin-bottom: 4px;
}

.level-target {
  font-size: 12px;
  color: #555;
  padding: 10px;
  background: #f6fff0;
  border-radius: 6px;
  border: 1px solid #d5e3b3;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .level-grid {
    flex-direction: column;
  }
  .purpose-list {
    flex-direction: column;
  }
}
/* サクっと工程SP共通カラー */
:root {
  --color-main: #FF2B2B;
  --color-sub:  #666666;
  --color-border: #dddddd;
  --color-header: #666666;
}

/* ラッパー：小さい画面では横スクロール */
.prodtype-table-wrapper {
  max-width: 1000px;
  margin: 24px auto;
  overflow-x: auto;
}

/* テーブル本体 */
.prodtype-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 13px;
  background: #ffffff;
}

/* 見出し行 */
.prodtype-table thead th {
  padding: 10px 12px;
  background: var(--color-header);
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  border: 1px solid var(--color-border);
}

/* 通常セル */
.prodtype-table td,
.prodtype-table tbody th {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.6;
}

/* 左端の「生産形態」列 */
.prodtype-table .row-head {
  background: #f4f4f4;
  color: var(--color-sub);
  text-align: center;
  white-space: nowrap;
}
.prodtype-table .row-head-alt {
  background: #eeeeee;
}

/* 対応ソフト表示 */
.prodtype-table .soft {
  text-align: center;
  white-space: nowrap;
}
.prodtype-table .soft-name {
  font-weight: bold;
  color: var(--color-sub);
}
.prodtype-table .soft-name.soft-sp {
  color: var(--color-main);
}
.prodtype-table .soft-level {
  font-size: 12px;
  color: #999999;
}

/* 行ホバー */
.prodtype-table tbody tr:hover {
  background: #f9fff3;
}

/* スマホ向けフォント微調整 */
@media (max-width: 768px) {
  .prodtype-table {
    font-size: 12px;
  }
}
/* 生産方式（2列目）の横線を消す */
.prodtype-table td:nth-child(2) {
  border-top: none !important;

}
/* インラインCTAエリア（ページの途中に挿入する） */
.cta-inline {
  background: linear-gradient(135deg,#f71010 0%, #ea9685 100%);
  border: 1px solid #d5e3b3;
  padding: 32px 20px;
  margin: 0 0 48px 0;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(143,195,31,0.08);
}

.cta-inline-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.cta-inline-text {
  font-size: 16px;
  color: #ffffff;
  margin-bottom: 16px;
  line-height: 1.6;
  font-weight: bold;
}

.cta-inline-text span {
  display: block;
  font-weight: normal;
  color: #ffffff;
  font-size: 14px;
  margin-top: 4px;
}

/* ボタン */
.cta-inline-btn {
  display: inline-block;
  background: #fff;
  color: var(--brand);
  padding: 12px 32px;
  font-size: 15px;
  font-weight: bold;
  border-radius: 999px;
  text-decoration: none;
  transition: 0.2s;
  box-shadow: 0 3px 10px rgba(195, 110, 31, 0.24);
}

.cta-inline-btn:hover {
  background: #b5b6b3;
  box-shadow: 0 4px 12px rgba(195, 99, 31, 0.3);
}

/* スマホ対応 */
@media (max-width: 768px) {
  .cta-inline {
    padding: 20px 10px;
  }
  .cta-inline-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }
}


.cta-split {
  flex-direction: column;
  gap: 50px;
  /* justify-content: space-between; */
  align-items: center;
  background: #ffffff;
  padding: 28px;
  margin: 8px 0;
  border: 1px solid #dcdcdc;
  border-left: 6px solid var(--brand);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(143,195,31,0.06);
}

.cta-split-text h3 {
  font-size: 14px;
  color: #666;
}

.cta-split-text p {
  font-size: 14px;
  color: #555;
  margin-top: 4px;
}

.cta-split-btn {
  background: var(--brand);
  color: #fff;
  padding: 10px 26px;
  text-decoration: none;
  border-radius: 999px;
  font-weight: bold;
  transition: 0.2s;
}

.cta-split-btn:hover {
  background: #f45757d1;
}

/* SP対応 */
@media (max-width: 768px) {
  .cta-split {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  .cta-split-btn {
    width: 100%;
    padding: 14px;
  }
}
.option-link-section {
  background: #f9fff3;
  border: 1px solid #d7eab7;
  padding: 32px 20px;
  margin: 0 0 48px 0;
  border-radius: 10px;
  text-align: center;
}

.option-link-title {
  font-size: 16px;
  font-weight: bold;
  color: #666;
  margin-bottom: 8px;
}

.option-link-lead {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.option-link-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.option-link-card {
  background: #ffffff;
  border: 1px solid #d5e3b3;
  border-radius: 8px;
  padding: 18px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(143,195,31,0.08);
  transition: 0.2s;
  text-align: center;
}

.option-link-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(143,195,31,0.12);
}

.option-link-name {
  font-size: 16px;
  font-weight: bold;
  color: #8FC31F;
  margin-bottom: 6px;
}

.option-link-desc {
  font-size: 13px;
  color: #555;
}

/* スマホ対応 */
@media (max-width: 600px) {
  .option-link-cards {
    flex-direction: column;
    gap: 16px;
  }
  
  .option-link-card {
    width: 100%;
  }
}

.option-sec{
   display: flex;
  /* justify-content: space-between; */
  gap: 20px;
  align-items: center;
  background: #ffffff;
  padding: 28px;
  margin: 8px 0;
}

@media (max-width: 768px) {
.option-sec {
    flex-direction: column;
    gap: 16px;
  }
}
/* option-sec 内の要素を均等幅にする */
.option-sec {
  display: flex;
  gap: 20px;
  align-items: stretch; /* ← 高さも揃う */
}

.option-sec > * {
  flex: 1 1 0;         /* ← 2つのブロックを完全に均等幅にする */
  max-width: 100%;
}
/* 関連動画セクション */
.related-movie-section {
  margin: 48px 0;
  background: #ffffff;
  padding: 20px 0;
}

.related-movie-title {
  font-size: 20px;
  text-align: center;
  color: #666666;
  font-weight: bold;
}

.related-movie-lead {
  text-align: center;
  font-size: 14px;
  color: #555555;
  margin-bottom: 24px;
}

/* グリッド（PCは3カラム） */
.related-movie-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(3, 1fr);
}

/* 動画カード */
.movie-card {
  text-align: center;
  margin: 0 auto;
}

/* サムネイル枠 */
.movie-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #f0f0f0;
  border: 1px solid #dcdcdc;
  border-radius: 8px;
  overflow: hidden;
  max-width: 350px;
}

/* iframeのサイズ調整 */
.movie-thumb iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.movie-caption {
  margin-top: 8px;
  font-size: 13px;
  color: #444;
}

/* SP（1カラム） */
@media (max-width: 768px) {
  .related-movie-grid {
    grid-template-columns: 1fr;
  }
}

.center1{
  text-align: center;
  display: block;
}
.center1-left{
  text-align: left;
    display: inline-block;
}

/* 2つの cta-split を横並びにする */
.cta-split-wrapper {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: stretch; /* 高さ揃え */
  margin: 40px 0;
}

/* 各 CTA ボックスの幅 */
.cta-split-wrapper .cta-split {
  flex: 1;
}

@media (max-width: 550px) {
 .cta-split-wrapper {
   display: block;
  }
}
/* 派手めLP仕様の補助金エリア */
.subsidy-box-lp {
  background: linear-gradient(135deg,#1F8EC2 0%, #8b9bb7 100%);
  color: #fff;
  padding: 32px 24px;
  border-radius: 14px;
  /* margin: 50px 0; */
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(143,195,31,0.25);
  max-width: 350px;
  margin: 0 auto;
}

/* 左上のバッジ */
.subsidy-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: #fff;
  color: #1F8EC2 ;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* 左右レイアウト */
.subsidy-main {
  /* display: flex; */
  gap: 28px;
  align-items: center;
}

/* 左側（金額の強調） */
.subsidy-left {
  flex: 0 0 40%;
  text-align: center;
}

.subsidy-main-top {
  font-size: 16px;
  margin-bottom: 4px;
  opacity: 0.95;
}

.subsidy-main-amount {
  font-size: 24px;
  font-weight: bold;
  line-height: 1.3;
  margin-bottom: 8px;
}

.subsidy-main-amount span {
  font-size: 30px;
  background: #fff;
  color: #1F8EC2 ;
  padding: 0 6px;
  border-radius: 6px;
  font-weight: 900;
}

.subsidy-main-sub {
  font-size: 15px;
  opacity: 0.95;
}


/* 右側（説明＋ボタン） */
.subsidy-right {
  flex: 1;
}

.subsidy-detail {
  font-size: 14px;
  margin-bottom: 16px;
  line-height: 1.7;
  opacity: 0.95;
}

/* ボタン */
.subsidy-btn {
  display: inline-block;
  background: #fff;
  color: #1F8EC2 ;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.2s;
  font-size: 15px;
  box-shadow: 0 4px 12px rgba(255,255,255,0.25);
}

.subsidy-btn:hover {
  background: #f5f5f5;
  transform: translateY(-2px);
}

/* SP対応 */
@media (max-width: 768px) {
  .subsidy-main {
    flex-direction: column;
    text-align: center;
  }
  .subsidy-left {
    flex: none;
    width: 100%;
  }
}

.cta-section-label{
  font-size: 22px;
    font-weight: bold;
    color: #f6fff0;
    margin-bottom: 4px;
    letter-spacing: 0.06em;
}
.cta-section-title{
  font-size: 18px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #f6fff0;
}

.related-products {
  background: #f9fff3;
  border: 1px solid #d7eab7;
  padding: 32px 20px;
  margin: 50px 0;
  border-radius: 10px;
  text-align: center;
}

.related-products-title {
  font-size: 20px;
  font-weight: bold;
  color: #666;
  margin-bottom: 8px;
}

.related-products-lead {
  font-size: 14px;
  color: #555;
  margin-bottom: 22px;
}

.related-products-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  gap: 20px;
}

.related-product-card {
  flex: 0 0 220px;
  background: #ffffff;
  border: 1px solid #d5e3b3;
  border-radius: 8px;
  padding: 18px 16px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(143,195,31,0.08);
  transition: 0.2s;
}

.related-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(143,195,31,0.15);
}

.rp-name {
  color: #8FC31F;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 6px;
}

.rp-desc {
  color: #444;
  font-size: 13px;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .related-products-cards {
    display: grid;
  grid-template-columns: repeat(1, 1fr);
  justify-content: center;
  gap: 16px;
  }
  .related-product-card {
    width: 100%;
  }
}
:root{
  --brand:#FF2B2B; --brand-ink:#666; --accent:#f05a5a;
  --ink:#111827; --sub:#6b7280; --line:#e5e7eb; --bg:#ffffff;
  --radius:16px; --shadow:0 12px 28px rgba(0,0,0,.08);
}
.fullform__wrap{
  width:min(1200px,100%);
  display:grid; grid-template-columns:1.05fr 1fr; gap:24px;
}
@media (max-width:980px){ .fullform__wrap{ grid-template-columns:1fr } }

.fullform__aside{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(20px,3vw,28px);
}
.fullform__aside h1{ margin:0 0 8px; font-size:clamp(22px,3vw,28px); color:var(--brand-ink) }
.fullform__aside p{ margin:0 0 10px; color:#374151 }
.fullform__aside ul{ margin:0; padding-left:18px; color:#4b5563; line-height:1.8 }

.fullform__card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:clamp(20px,3vw,28px);
}
.fullform__form{ width:100% }

.ff__grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
@media (max-width:640px){ .ff__grid{ grid-template-columns:1fr } }

.ff__row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px }
.ff__label{ font-weight:700; color:var(--ink); font-size:.95rem }
.req{
  display:inline-block; font-size:.75rem; color:#fff; background:var(--brand);
  border-radius:999px; padding:.1rem .45rem; margin-right:.4rem; vertical-align:middle
}
.ff__input,.ff__textarea{
  width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px;
  font-size:1rem; font-family:inherit; background:#fff;
}
.ff__input:focus,.ff__textarea:focus{ outline:2px solid var(--accent); outline-offset:2px }

.ff__note{ color:var(--sub); font-size:.9rem; margin:4px 0 12px }

.ff__actions{ display:flex; gap:10px; flex-wrap:wrap }
.ff__submit{
  background:var(--brand); color:#fff; border:none; border-radius:999px;
  padding:.9rem 1.4rem; font-weight:800; cursor:pointer;
}
.ff__submit:hover{ background:var(--brand-ink) }
.ff__reset{
  background:#f1f5f9; color:var(--ink); border:none; border-radius:999px;
  padding:.9rem 1.4rem; cursor:pointer;
}

@media (max-width:860px){
  .fullform{ padding:12px }
  .fullform__aside{ display:none } /* モバイルはフォームに集中 */
}
/* ===== Full-screen Request Form (説明上 / フォーム下) ===== */
.fullform{background:linear-gradient(180deg,#f7f5ff 0%,#fff 40%);display:flex;justify-content:center;padding:clamp(16px,3vw,32px)}
.fullform__wrap{width:min(800px,100%);display:flex;flex-direction:column;gap:24px}
.fullform__desc,.fullform__card{background:#fff;border:1px solid var(--brand-ink);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(20px,3vw,28px)}
.fullform__desc h1{margin:0 0 8px;font-size:clamp(22px,3vw,28px);color:var(--brand-ink)}
.fullform__desc p{margin:0 0 10px;color:#374151;line-height:1.7}
.fullform__desc ul{margin:0;padding-left:18px;color:#4b5563;line-height:1.8}
.ff__form{width:100%}
.ff__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.ff__grid{grid-template-columns:1fr}}
.ff__row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.ff__label{font-weight:700;color:var(--ink);font-size:.95rem;text-align: left;}
.ff__label::before{content: "　";}
.req{display:inline-block;font-size:.95rem;color:#fff;background:var(--brand);border-radius:999px;padding:.3rem .65rem;margin-right:.4rem;vertical-align:middle}
.ff__input,.ff__textarea{width:100%;border:1px solid var(--brand);border-radius:10px;padding:12px 14px;font-size:1rem;font-family:inherit;background:#fff}
.ff__input:focus,.ff__textarea:focus{outline:2px solid var(--accent);outline-offset:2px}
.ff__note{color:var(--sub);font-size:.9rem;margin:4px 0 12px}
.ff__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content: center;}
.ff__submit{background:var(--brand);color:#fff;border:none;border-radius:999px;padding:.9rem 1.4rem;font-weight:800;cursor:pointer}
.ff__submit:hover{background:var(--brand-ink)}
.ff__reset{background:#f1f5f9;color:var(--ink);border:none;border-radius:999px;padding:.9rem 1.4rem;cursor:pointer}
@media (max-width:860px){.fullform__wrap{gap:16px}.fullform__desc,.fullform__card{padding:16px}}
/* ===== スマホ画面イメージ一覧 ===== */
.appshots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 24px 0;
}
.appshots__item {
  /* background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius); */
  /* box-shadow: var(--shadow); */
  padding: 12px;
  text-align: center;
}
.appshots__caption {
  font-weight: 700;
  color: var(--brand-ink);
  margin-bottom: 8px;
  font-size: 1rem;
}
.appshots__item img {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* レスポンシブ */
@media (max-width:980px) {
  .appshots {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width:640px) {
  .appshots {
    grid-template-columns: 1fr;
  }
}

/* ================================
   Spalysis 比較表セクションデザイン
   #spa-diff
================================ */

/* セクション全体 */
#spa-diff .inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 説明文 */
#spa-diff p {
  font-size: 14px;
  color: #444;
  line-height: 1.7;
}

/* テーブル全体ラッパー */
#spa-diff .compare-table {
  margin-top: 20px;
  overflow-x: auto;       /* PC / SP 共通で横スクロール許可 */
  -webkit-overflow-scrolling: touch;
}

/* 表本体 */
#spa-diff .compare-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;       /* SP でつぶれないように */
  background: #fff;
  font-size: 14px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* ヘッダー */
#spa-diff .compare-table thead th {
  background: var(--color-header);  /* サクスマのブランド色に合わせる */
  color: #fff;
  text-align: center;
  padding: 12px 10px;
  font-weight: bold;
  font-size: 14px;
  border-right: 1px solid rgba(255,255,255,0.3);
}
#spa-diff .compare-table thead th:last-child {
  border-right: none;
}

/* ボディ */
#spa-diff .compare-table tbody th {
  background: var(--line);
  color: #333;
  text-align: left;
  padding: 12px 12px;
  white-space: nowrap;
  font-weight: bold;
  border-bottom: 1px solid #e2e8ee;
  border-right: 1px solid #a9a9a9;
}

#spa-diff .compare-table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid #a9a9a9;
  border-right: 1px solid #a9a9a9;
  color: #444;
  line-height: 1.6;
}

/* #spa-diff .compare-table tbody tr:last-child th,
#spa-diff .compare-table tbody tr:last-child td {
  border-bottom: none;
} */

/* ホバー（PCのみ） */
@media (hover:hover) {
  #spa-diff .compare-table tbody tr:hover td {
    background: #f8fcff;
  }
}

/* スマホ表示調整 */
@media screen and (max-width: 768px) {
  #spa-diff p {
    font-size: 13px;
  }
  #spa-diff .compare-table table {
    font-size: 13px;
  }
  #spa-diff .compare-table thead th {
    font-size: 13px;
    padding: 10px 8px;
  }
  #spa-diff .compare-table tbody th,
  #spa-diff .compare-table tbody td {
    padding: 10px 8px;
  }
}

/* =======================================
   Spalysis 料金（カード型）
======================================= */

#spa-price .inner {
  max-width: 1120px;
  margin: 0 auto;
}

/* リード文 */
.spa-price-lead {
  font-size: 14px;
  color: #444;
  margin-bottom: 20px;
  line-height: 1.7;
}

/* カードの並び */
.spa-price-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
}

/* カード本体 */
.spa-price-card {
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(99, 99, 99, 0.755);
  width: 300px;
  display: flex;
  flex-direction: column;
  border-top: 6px solid var(--brand); /* 赤アクセント */
}

/* ヘッダー（プラン名） */
.spa-price-header {
  font-size: 18px;
  font-weight: bold;
  color: #444;
  padding: 14px 20px 6px;
  text-align: center;
}

/* カード本文 */
.spa-price-body {
  padding: 10px 20px 0;
  text-align: center;
}

.spa-price-main {
  font-size: 26px;
  font-weight: bold;
  color: var(--brand);
  margin-bottom: 4px;
}

.spa-price-sub {
  font-size: 12px;
  color: #666;
  margin-bottom: 16px;
}

.spa-price-list {
  text-align: left;
  padding-left: 1.2em;
  margin: 0;
  font-size: 14px;
  color: #444;
  line-height: 1.6;
}

.spa-price-list li {
  margin-bottom: 6px;
}

/* フッター（ボタン部分） */
.spa-price-footer {
  padding: 16px 20px 20px;
  margin-top: auto;
  text-align: center;
}

/* グレー・赤のカスタムボタン */
.spa-btn-gray {
  background: #666;
  border: 2px solid #666;
  color: #fff !important;
  padding: 8px 24px;
  border-radius: 999px;
}
.spa-btn-gray:hover {
  background: #777;
  border-color: #777;
}

.spa-btn-red {
  background: #d40000;
  border: 2px solid #d40000;
  color: #fff !important;
  padding: 8px 24px;
  border-radius: 999px;
}
.spa-btn-red:hover {
  background: #e60000;
  border-color: #e60000;
}

/* スマホ調整 */
@media screen and (max-width: 768px) {
  .spa-price-card {
    width: 100%;
    max-width: 360px;
  }
}