/* =============================
   0) Base
============================= */
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  color: #1a2c45;
}

/* 汎用ボタン（全CTA共通：ヒーロー/下部CTA/ヘッダー専用以外） */
.btn {
  display: flex;
  align-items: center;          /* テキストとアイコンを縦中央 */
  justify-content: center;
  gap: 12px;                    /* テキストとアイコンの間隔 */
  flex-wrap: nowrap;            /* 改行させない（アイコンが下に落ちない） */
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  max-width: 320px;
  width: 100%;
  box-sizing: border-box;
  transition: opacity .2s ease-in-out;
}
.btn:hover { opacity: 0.9; }

.btn img {                      /* すべてのボタン内アイコン */
  width: 20px;
  height: 20px;
  flex-shrink: 0;               /* テキストに押しつぶされない */
}

/* ボタン内テキストレイアウト（上段/下段） */
.btn-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.3;
  text-align: center;
}
.btn-top   { font-size: 12px;   opacity: 1; }
.btn-bottom{ font-size: 18px; }

/* カラーバリエーション */
.btn-orange { background-color: #FF7A00; color: #fff; }
.btn-white  { background-color: #fff; border: 2px solid #FF7A00; color: #FF7A00; }
.btn-white:hover { background-color: #fff0e0; }

/* =============================
   1) Header
============================= */
.fixed-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
  min-height: 70px;             /* はみ出し防止（height→min-height） */
  display: flex;
  align-items: center;
}
.header-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 20px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo img { height: 40px; }

/* ヘッダー内CTA（ヘッダー専用スコープ） */
.header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.header-cta .btn {
  display: inline-flex;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  white-space: nowrap;
  border: 2px solid #ff7f00;
}
.header-cta .btn.trial    { background-color: #ff7f00; color: #fff; }
.header-cta .btn.download { background-color: #fff; color: #ff7f00; }

/* ≤768px：ヘッダーCTAを非表示（ロゴのみ） */
@media (max-width: 768px) {
  .fixed-header .header-cta { display: none; }
  .fixed-header .header-inner { justify-content: flex-start; }
}

/* =============================
   2) Hero (ファーストビュー)
============================= */
.hero {
  background: url("../images/fv_pc.png") no-repeat center center / cover;
  padding: 120px 20px 40px;
}
.hero-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.hero-text        { flex: 1 1 45%; }
.hero-text .subheading { font-size: 24px; font-weight: bold; color: #1a2c45; margin-bottom: -20px; }
.hero-text .subheading span { font-size: 24px; color: #ff7f00; }
.hero-text h1     { font-size: 44px; line-height: 1.4; margin-bottom: 20px; font-weight: bold; color: #1a2c45; }
.hero-text h1 span{ font-size: 44px; color: #0a2c4c; }

.hero-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.hero-image { position: relative; flex: 1 1 45%; text-align: center; }
.demo-img   { width: 100%; border-radius: 24px; }

.hero-subtext { font-size: 12px; font-weight: bold; color: #1a2c45; margin-bottom: 0px; }

/* 導入実績バッジ */
.badge {
  position: absolute;
  top: -20px; right: -20px;
  background-color: #00b1a9; color: #fff;
  border-radius: 50%;
  padding: 20px 16px;
  font-size: 14px; font-weight: bold; text-align: center;
  box-shadow: 0 0 0 6px #e0f2f1;
  width: 100px; height: 100px;
  display: flex; flex-direction: column; justify-content: center;
  line-height: 1.2;
}
.badge span { font-size: 18px; }


@media screen and (max-width: 768px) {
  .hero { padding: 80px 20px 40px;}
  .hero-inner { flex-direction: column; text-align: center; }
  .hero-text h1     { font-size: 36px;}
  .hero-text h1 span{ font-size: 40px;}
  .hero-text .subheading { font-size: 20px;}
  .hero-text .subheading span { font-size: 20px;}
  .hero-buttons { align-items: center; }
  .btn { justify-content: center; }       /* ボタン内テキストの中央寄せ */
  .hero-image { margin-top: 0px; }
}

/* =============================
   3) 実績ロゴセクション
============================= */
.logo-section { padding: 60px 20px; background-color: #fff; text-align: center; }
.logo-section h2 { font-size: 28px; font-weight: bold; color: #102b52; margin-bottom: 0; }
.logo-section p  { font-size: 20px; font-weight: bold; color: #102b52; margin-bottom: 40px; }

.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  justify-items: center;
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}
.logo-grid img { max-width: 100%; height: auto; object-fit: contain; max-height: 48px; }

@media screen and (max-width: 768px) {
  .logo-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* =============================
   4) 動画セクション
============================= */
.video-section { background-color: #f3f3f3; padding: 60px 20px; text-align: center; }
.video-heading { font-size: 28px; font-weight: bold; color: #102b52; margin-bottom: 40px; }
.video-wrapper { aspect-ratio: 16 / 9; width: 100%; max-width: 800px; margin: 0 auto; overflow: hidden; border-radius: 12px; }
.video-wrapper iframe { width: 100%; height: 100%; border: none; }

/* =============================
   5) CTA セクション（中段/下部 共通）
============================= */
.cta-section { background-color: #00a9a2; color: #fff; text-align: center; padding: 20px 20px; }
.cta-inner { max-width: 960px; margin: 0 auto; }
.cta-section h2 { font-size: 28px; font-weight: bold; margin-bottom: 12px; }
.cta-section p  { font-size: 18px; font-weight: bold; margin-bottom: 20px; }

.cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
@media screen and (max-width: 600px) {
  .cta-buttons { flex-direction: column; align-items: center; }
  .btn { width: 90%; }
}

/* =============================
   6) 特徴セクション
============================= */
.features-section { padding: 60px 20px; background-color: #fff; max-width: 1080px; margin: 0 auto; }
.features-heading { text-align: center; font-size: 28px; font-weight: bold; color: #102b52; margin-bottom: 60px; }

.feature { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 60px; gap: 40px; }
.feature.reverse { flex-direction: row-reverse; }
.feature-text { flex: 1 1 50%; }
.feature-text h3 { font-size: 24px; font-weight: bold; color: #102b52; margin-bottom: 12px; }
.feature-text p  { font-size: 15px; line-height: 1.8; color: #2c2c2c; }
.feature-image { flex: 1 1 40%; text-align: center; }
.feature-image img { width: 100%; max-width: 400px; height: auto; border-radius: 16px; background: #eee; }

/* =============================
   7) 機能一覧
============================= */
.functions { background-color: #f1f1f1; padding: 40px 20px; text-align: center; }
.functions h2 { font-size: 28px; margin-bottom: 40px; color: #0b284d; }
.function-list { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; max-width: 800px; margin: 0 auto; }
.function-item {
  display: flex; align-items: center; background: #fff; padding: 10px; border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05); gap: 16px; text-align: left;
}
.function-item img { width: 72px; height: 72px; }
.function-item h3 { font-size: 16px; font-weight: bold; margin: 0 0 4px; color: #0b284d; }
.function-item p  { font-size: 14px; margin: 0; color: #333; }
@media screen and (max-width: 640px) {
  .function-list { grid-template-columns: 1fr; }
}

/* =============================
   8) 価格・比較表
============================= */
.comparison { padding: 60px 20px; overflow-x: auto; box-sizing: border-box; }
.comparison h2 { font-size: 28px; text-align: center; }

.comparison-table {
  min-width: 800px; max-width: 1080px; margin: 0 auto; box-sizing: border-box;
  display: block; overflow-x: auto;
}
.comparison-table .table-head,
.comparison-table .table-row {
  display: grid; grid-template-columns: 180px 1fr 1fr 1fr;
}

.cell { display: block; }

.comparison-table .cell {
  flex: 1; padding: 16px; border: 1px solid #ddd; text-align: center; background-color: #fff;
  white-space: normal; display: flex; justify-content: center; align-items: center; flex-direction: column;
  min-height: 60px; box-sizing: border-box;
}

.comparison-table .cell.title {
  position: sticky; left: 0; background-color: #fff; font-weight: bold; text-align: left;
  justify-content: flex-start; align-items: flex-start; z-index: 2; min-width: 180px; max-width: 180px;
}
.comparison-table .table-head .cell { font-weight: bold; background-color: #f7f7f7; }
.comparison-table .table-head .cell:nth-child(2),
.comparison-table .table-row  .cell:nth-child(2) { background-color: #c6fbf3; font-weight: bold; }
.comparison-table .table-head .cell:nth-child(3),
.comparison-table .table-head .cell:nth-child(4) { background-color: #333; color: #fff; font-weight: bold; }

/* =============================
   9) 事例セクション（修正版）
============================= */
.case-section {  max-width: 960px; margin: 0 auto; padding: 60px 20px;}
.case-section > h2 {text-align: center; margin: 0 0 32px; font-size: 28px; font-weight: bold; color: #102b52;}
.case-box {  display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 48px; flex-wrap: nowrap;}
.case-text {  flex: 1 1 auto; min-width: 0;}
.case-number {  font-weight: bold; color: #0f172a; font-size: 24px; margin-bottom: 12px;}
.case-description {  font-size: 15px; color: #0f172a; line-height: 1.8;}
.case-image {  flex: 0 0 400px; max-width: 400px;}
.case-image img {  display: block; width: 100%; height: auto; border-radius: 16px;}
.case-image img:hover { opacity: 0.7; }

@media (max-width: 768px) {
  .case-box {flex-direction: column; align-items: center;text-align: left;}
  .case-image {flex: 0 0 auto; max-width: 360px; width: 100%;}
  .case-image img {margin: 0 auto;}
}

/* =============================
   10) 関連サービス
============================= */
.related-services { padding: 80px 5%; background-color: #f7f7f7; }
.related-services h2 { text-align: center; font-size: 1.5rem; margin-bottom: 40px; font-weight: bold; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; }
.service-item { background:#fff; padding:24px; border-radius:8px; box-shadow:0 0 10px rgba(0,0,0,.05); text-align:left; }
.service-item img { width: 100%; height: auto; margin-bottom: 16px; }
.service-item h3 { font-size: 1rem; font-weight: bold; margin-bottom: 8px; color: #1a1a1a; }
.service-item p  { font-size: .9rem; color: #333; line-height: 1.6; }

/* =============================
   11) Footer
============================= */
.footer { background-color: #5c5c5c; color: #fff; padding: 40px 5%; font-family: 'Helvetica Neue', sans-serif; font-size: 16px; }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; max-width: 1200px; margin: 0 auto; }
.footer-left { flex: 1; min-width: 300px; }
.footer-logo { width: 160px; margin-bottom: 20px; }
.footer-company { font-size: 20px; font-weight: bold; margin-bottom: 20px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 10px; }
.footer-links a { color: #2de0d3; text-decoration: none; font-weight: bold; }
.footer-right { flex: 1; min-width: 300px; text-align: left; }
.footer-right a { color: #fff; text-decoration: none; }