@charset "UTF-8";
/* =========================================================
   トップページ専用スタイル（2026/10 リニューアル）
   - 既存の style.css / style_custom.css / faq.css は変更せず、
     このファイルで新しいトップのスタイルを定義する
   - クラス接頭辞：ot-（owlcast top）
   - ブレイクポイント：既存サイトに合わせ 575px 以下をSPとする
========================================================= */

/* ---------- 共通 ---------- */
.ot-sec {
  position: relative;
  z-index: 2;
  padding: 104px 0
}

.ot-sec--tint {
  background: #EEF6FB
}

.ot-sec--grad {
  background: linear-gradient(180deg, #F5FAFC, #FFFFFF)
}

.ot-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 30px
}

.ot-inner--narrow {
  max-width: 1000px
}

.ot-inner--faq {
  max-width: 920px
}

.ot-head {
  text-align: center;
  margin-bottom: 48px
}

.ot-head__en {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
  color: #2FB3D9;
  line-height: 1.6
}

.ot-head__ttl {
  margin: 0;
  font-size: 32px;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: .06em;
  color: #0C83AA
}

.ot-head__lead {
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .06em;
  color: #212529
}

.ot-head--light .ot-head__en {
  color: #BFE7F3
}

.ot-head--light .ot-head__ttl,
.ot-head--light .ot-head__lead {
  color: #fff
}

.ot-panel {
  background: #EEF6FB;
  border-radius: 28px;
  padding: 48px 40px
}

.ot-panel--purple {
  background: #F3F1FB
}

.ot-card {
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .08)
}

.ot-ttl3 {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #144A6E;
  line-height: 1.5
}

.ot-txt-s {
  font-size: 14px;
  line-height: 1.8;
  color: #4A5560;
  margin: 0
}

.ot-note {
  margin: 20px 0 0;
  text-align: center;
  font-size: 13px;
  color: #4A5560
}

/* アイコンバッジ */
.ot-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #E3F4F9, #D3EEF6);
  width: 64px;
  height: 64px
}

.ot-badge svg {
  width: 30px;
  height: 30px
}

.ot-badge--s {
  width: 52px;
  height: 52px
}

.ot-badge--s svg {
  width: 26px;
  height: 26px
}

.ot-badge--l {
  width: 84px;
  height: 84px
}

.ot-badge--l svg {
  width: 40px;
  height: 40px
}

/* ボタン */
.ot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 36px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  text-align: center;
  transition: background-color .2s, color .2s, opacity .2s
}

.ot-btn:hover {
  text-decoration: none
}

.ot-btn--dl {
  background: #E6B100;
  color: #212529;
  box-shadow: 0 6px 16px rgba(230, 177, 0, .3)
}

.ot-btn--dl:hover {
  background: #F2C21A;
  color: #212529
}

.ot-btn--blue {
  background: #0C83AA;
  color: #fff
}

.ot-btn--blue:hover {
  background: #144A6E;
  color: #fff
}

.ot-btn--line {
  background: #fff;
  color: #0C83AA;
  border: 2px solid #0C83AA
}

.ot-btn--line:hover {
  background: #0C83AA;
  color: #fff
}

.ot-btn--white-line {
  color: #fff;
  border: 2px solid #fff
}

.ot-btn--white-line:hover {
  background: #fff;
  color: #0C83AA
}

.ot-btn--w280 {
  min-width: 280px
}

.ot-btn--w300 {
  min-width: 300px
}

.ot-btn svg {
  flex-shrink: 0
}

.ot-btns {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center
}
.ot-btn :hover,
.ot-scene :hover,
.ot-quote a :hover {
  color: inherit;
}

/* 黄色ボタンの文字色（コントラスト確保のため濃色）。白文字に戻す場合はこのブロックを削除 */
.top .btn-secondary {
  color: #212529 !important
}

/* ラベル */
.ot-label {
  display: inline-block;
  padding: 8px 22px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em
}

.ot-label--teal {
  background: linear-gradient(90deg, #3EC1B8, #3DB4E0)
}

.ot-label--purple {
  background: linear-gradient(90deg, #9B8BE0, #6FA7E8)
}

.ot-label-wrap {
  text-align: center;
  margin-bottom: 18px
}

/* 箇条書き（黄色の丸） */
.ot-dots {
  margin: 0;
  padding: 0;
  list-style: none
}

.ot-dots li {
  position: relative;
  padding-left: 18px;
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 10px
}

.ot-dots li:last-child {
  margin-bottom: 0
}

.ot-dots li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E6B100
}

/* 事例の声 */
.ot-quote {
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: 16px;
  padding: 24px 28px 22px;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .08)
}

.ot-quote:before {
  content: "“";
  position: absolute;
  left: 22px;
  top: -14px;
  font-size: 56px;
  line-height: 1;
  color: #E6B100;
  font-family: Georgia, serif
}

.ot-quote blockquote {
  margin: 6px 0 14px;
  font-size: 14px;
  line-height: 1.95;
  color: #212529
}

.ot-quote figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid #E4EEF2;
  padding-top: 12px;
  font-size: 13px
}

.ot-quote figcaption b {
  color: #144A6E
}

.ot-quote figcaption a {
  color: #0C83AA;
  font-weight: 700
}

.ot-quote--dark {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: none;
  color: #fff
}

.ot-quote--dark:before {
  display: none
}

.ot-quote--dark blockquote {
  margin-top: 0;
  color: #fff
}

.ot-quote--dark figcaption {
  border-top-color: rgba(255, 255, 255, .3)
}

.ot-quote--dark figcaption b,
.ot-quote--dark figcaption a {
  color: #fff
}

.ot-quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px
}

.ot-quotes--stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.ot-placeholder {
  margin-top: 32px;
  border: 2px dashed #B9D7E2;
  border-radius: 16px;
  padding: 18px 24px;
  text-align: center;
  font-size: 13px;
  color: #4A5560;
  background: rgba(255, 255, 255, .6)
}

/* ---------- MV（既存の p-top_mv を利用し、新要素のみ定義） ---------- */
.ot-mv-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 20px;
  padding: 0;
  list-style: none
}

.ot-mv-tags li {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: #EAF5F9;
  color: #144A6E;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6
}

.ot-mv-copy {
  margin: 0 0 14px;
  font-size: 46px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .06em;
  color: #0C83AA;
  text-align: center
}

.ot-mv-product {
  margin: 0 0 24px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #212529;
  text-align: center
}

.p-top_mv .p-top_mv_logo {
  margin-bottom: 40px
}

/* ---------- 導入企業ロゴ帯 ---------- */
.ot-logos {
  position: relative;
  z-index: 2;
  padding: 40px 0 16px
}

/* ---------- CONCEPT ---------- */
.ot-concept__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 40px
}

.ot-concept__item {
  background: #fff;
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px
}

.ot-concept__item h3 {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
  color: #144A6E;
  font-weight: 700
}

.ot-concept__item p {
  text-align: left
}

/* ---------- 対比表・料金表 ---------- */
.ot-table-wrap {
  overflow-x: auto;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(12, 131, 170, .10);
  -webkit-overflow-scrolling: touch
}

.ot-cmp,
.ot-prc {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 15px
}

.ot-prc {
  table-layout: fixed
}

.ot-cmp th,
.ot-cmp td {
  padding: 18px 22px;
  border-bottom: 1px solid #E4EEF2;
  text-align: left;
  vertical-align: top;
  line-height: 1.7
}

.ot-cmp thead th {
  background: #144A6E;
  color: #fff;
  font-weight: 700
}

.ot-cmp thead th.is-oc {
  background: #0C83AA
}

.ot-cmp tbody th {
  width: 160px;
  color: #144A6E;
  background: #F6FAFC;
  font-weight: 700
}

.ot-cmp td.is-oc {
  background: #FFFBEA;
  font-weight: 700;
  color: #144A6E
}

.ot-cmp td.is-oc .ot-check {
  display: flex;
  gap: 10px;
  align-items: flex-start
}

.ot-cmp td.is-oc .ot-check svg {
  flex-shrink: 0;
  margin-top: 2px
}

.ot-cmp td.is-oc small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: #4A5560
}

.ot-prc th,
.ot-prc td {
  padding: 16px 14px;
  border-bottom: 1px solid #E4EEF2;
  text-align: center;
  vertical-align: middle;
  line-height: 1.6
}

.ot-prc thead th {
  background: #144A6E;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 20px 12px;
}

.ot-prc thead th.is-oc {
  background: #0C83AA
}

.ot-prc thead th small {
  display: block;
  font-size: 12px;
  font-weight: 400
}

.ot-prc thead .ot-prc__rec {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #E6B100;
  color: #212529;
  font-size: 12px
}

.ot-prc tbody th {
  text-align: left;
  width: 230px;
  color: #144A6E;
  background: #F6FAFC;
  font-size: 14px;
  font-weight: 700
}

.ot-prc td.is-oc {
  background: #FFFBEA
}

.ot-prc tr.ot-prc__grp th {
  background: #EAF5F9;
  color: #0C83AA;
  font-size: 13px;
  letter-spacing: .08em;
  padding: 9px 18px;
  width: auto
}

.ot-prc .ot-yen {
  font-size: 22px;
  color: #144A6E;
  font-weight: 700
}

.ot-prc small.ot-tax {
  display: block;
  font-size: 11px;
  color: #4A5560
}

.ot-prc .ot-o {
  color: #0C83AA;
  font-size: 20px;
  font-weight: 700
}

.ot-prc .ot-x {
  color: #A9B6BD;
  font-size: 18px
}

.ot-price__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px
}

.ot-price__foot p {
  margin: 0;
  font-size: 15px;
  text-align: center
}

.ot-price__subsidy {
  font-size: 14px !important;
  color: #4A5560;
  text-align: center;
  margin-top: 30px;
}

.ot-price__subsidy a {
  color: #0C83AA;
  font-weight: 700;
  text-decoration: underline
}

/* ---------- BtoC ---------- */
.ot-btoc {
  background: radial-gradient(900px 500px at 100% 0%, #E4F6F4, rgba(228, 246, 244, 0) 70%), #F7FBFD
}

.ot-funnel {
  display: grid;
  grid-template-columns: minmax(0, 5fr) 40px minmax(0, 6fr);
  gap: 14px 8px
}

.ot-funnel__head {
  margin: 0;
  text-align: center;
  font-weight: 700;
  color: #0C83AA;
  font-size: 14px
}

.ot-funnel__band-wrap {
  display: flex;
  justify-content: center
}

.ot-funnel__band {
  min-height: 88px;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 24px;
  color: #144A6E
}

.ot-funnel__band span {
  font-size: 12px;
  font-weight: 700;
  opacity: .9
}

.ot-funnel__band b {
  font-size: 16px
}

.ot-funnel__band--1 {
  width: 100%;
  background: #D6EFF6
}

.ot-funnel__band--2 {
  width: 86%;
  background: #9FD9EA
}

.ot-funnel__band--3 {
  width: 72%;
  background: #3AA9CF;
  color: #fff
}

.ot-funnel__band--4 {
  width: 58%;
  background: #0C6F93;
  color: #fff
}

.ot-funnel__arrow {
  display: flex;
  align-items: center;
  justify-content: center
}

.ot-funnel__func {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 20px;
  min-height: 88px;
  box-shadow: 0 4px 16px rgba(12, 131, 170, .08)
}

.ot-funnel__func b {
  color: #144A6E;
  font-size: 16px
}

.ot-funnel__func span span {
  display: block;
  font-size: 13px;
  color: #4A5560;
  line-height: 1.7
}

.ot-down {
  display: flex;
  justify-content: center;
  margin: 22px 0 12px
}

.ot-repeat {
  background: #fff;
  border-radius: 20px;
  padding: 28px
}

.ot-repeat__en {
  margin: 0 0 2px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  color: #2FB3D9
}

.ot-repeat__ttl {
  margin: 0 0 18px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: #144A6E
}

.ot-repeat__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px
}

.ot-mini {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #fff;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 16px rgba(12, 131, 170, .08)
}

.ot-mini b {
  color: #144A6E
}

.ot-mini p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #4A5560;
  line-height: 1.8
}

.ot-btoc__summary {
  margin: 0 0 24px;
  text-align: center;
  font-size: 15px;
  color: #144A6E
}

.ot-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 40px
}

.ot-two .ot-card h3 {
  margin: 0 0 16px;
  font-size: 20px;
  color: #0C83AA;
  font-weight: 700
}

/* ---------- BtoB ---------- */
.ot-btob {
  background: radial-gradient(900px 500px at 0% 0%, #EEEBFA, rgba(238, 235, 250, 0) 70%), #fff
}

.ot-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

.ot-group {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 16px rgba(12, 131, 170, .10);
  display: flex;
  flex-direction: column
}

.ot-group__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  font-weight: 700;
  color: #fff
}

.ot-group--a .ot-group__head {
  background: #144A6E
}

.ot-group--b .ot-group__head {
  background: #E6B100;
  color: #212529
}

.ot-group--c .ot-group__head {
  background: #0C83AA
}

.ot-group__body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center
}

.ot-group__admin {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F4F9FB;
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  font-size: 12px;
  line-height: 1.6
}

.ot-group__members {
  display: flex;
  gap: 16px
}

.ot-group__member {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: #4A5560
}

.ot-groups__arrow {
  grid-column: 1 / span 3;
  display: flex;
  justify-content: center
}

.ot-course {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  border-radius: 12px;
  padding: 16px;
  background: #fff
}

.ot-course b {
  color: #144A6E
}

.ot-course--all {
  grid-column: 1 / span 3;
  box-shadow: inset 0 0 0 2px #9FD9EA
}

.ot-course--a {
  grid-column: 1 / span 1;
  box-shadow: inset 0 0 0 2px #144A6E
}

.ot-course--bc {
  grid-column: 2 / span 2;
  background: #FFFBEA;
  box-shadow: inset 0 0 0 2px #E6B100
}

.ot-course--bc b {
  color: #5C4700
}

.ot-course small {
  font-size: 13px;
  color: #4A5560
}

.ot-panel__ttl {
  margin: 0 0 6px;
  text-align: center;
  font-size: 20px;
  color: #144A6E;
  font-weight: 700
}

.ot-panel__sub {
  margin: 0 0 28px;
  text-align: center;
  font-size: 14px;
  color: #4A5560
}

.ot-panel__foot {
  margin: 24px 0 0;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #144A6E
}

.ot-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 32px 0 24px
}

.ot-bcard {
  background: #fff;
  border-radius: 20px;
  padding: 32px 28px;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center
}

.ot-bcard .ot-badge {
  margin-bottom: 18px
}

.ot-bcard h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #144A6E;
  font-weight: 700;
  line-height: 1.5
}

.ot-bcard p {
  text-align: left
}

.ot-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  margin-bottom: 18px
}

.ot-flow__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 76px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center
}

.ot-flow__arrow {
  padding-top: 16px
}

.ot-small3 {
  background: #fff;
  border-radius: 20px;
  padding: 28px 32px;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .08);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: 40px
}

.ot-small3__item {
  display: flex;
  gap: 14px
}

.ot-small3__item b {
  display: block;
  margin-bottom: 4px;
  color: #144A6E
}

.ot-small3__item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #4A5560
}

/* ---------- 青帯（両立・その他の活用シーン） ---------- */
.ot-band {
  position: relative;
  z-index: 2;
  background: #0C83AA;
  color: #fff;
  padding: 96px 0 88px
}

.ot-band:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  transform: translateX(-50%);
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 22px solid #fff
}

.ot-both {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
  align-items: center
}

.ot-both__en {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .24em;
  color: #BFE7F3
}

.ot-both__ttl {
  margin: 0 0 18px;
  font-size: 30px;
  line-height: 1.55;
  letter-spacing: .06em;
  font-weight: 700;
  color: #fff
}

.ot-both__txt {
  margin: 0;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .06em
}

.ot-both__quotes {
  display: flex;
  flex-direction: column;
  gap: 18px
}

/* ---------- AIアシスト ---------- */
.ot-ai__main {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 40px;
  align-items: start;
  margin-bottom: 32px
}

.ot-ai__video video {
  display: block;
  width: 100%;
  border-radius: 20px;
  background: #000;
  box-shadow: 0 16px 40px rgba(20, 74, 110, .25)
}

.ot-ai__caption {
  margin: 14px 0 0;
  font-size: 13px;
  color: #4A5560
}

.ot-ai__qttl {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: #144A6E
}

.ot-ai__qs {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px
}

.ot-ai__qs li {
  background: #fff;
  border-radius: 14px;
  padding: 16px 20px;
  box-shadow: 0 4px 16px rgba(12, 131, 170, .08)
}

.ot-ai__qs b {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: #0C83AA
}

.ot-ai__qs p {
  margin: 0;
  font-size: 14px;
  line-height: 1.7
}

.ot-ai__dash {
  background: #fff;
  border-radius: 20px;
  padding: 28px 32px;
  display: flex;
  gap: 22px;
  align-items: center;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .08)
}

.ot-ai__dash b {
  display: block;
  margin-bottom: 6px;
  color: #144A6E;
  font-size: 18px
}

.ot-ai__btn {
  display: flex;
  justify-content: center;
  margin-top: 24px
}

/* ---------- 導入事例（既存の c-caselist を利用） ---------- */
.ot-cases .c-caselist {
  padding-top: 0
}

.ot-cases__btn {
  display: flex;
  justify-content: center;
  margin-top: 8px
}

/* ---------- デモ画面 ---------- */
.ot-demos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px
}

.ot-demo {
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .10);
  display: flex;
  flex-direction: column
}

.ot-demo__thumb {
  padding: 24px 24px 0
}

.ot-demo__thumb img {
  display: block;
  width: 100%;
  border-radius: 10px 10px 0 0
}

.ot-demo--school .ot-demo__thumb {
  background: linear-gradient(90deg, #3EC1B8, #3DB4E0)
}

.ot-demo--btob .ot-demo__thumb {
  background: linear-gradient(90deg, #9B8BE0, #6FA7E8)
}

.ot-demo__body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1
}

.ot-demo__body h3 {
  margin: 0;
  font-size: 20px;
  color: #144A6E;
  font-weight: 700
}

.ot-demo__body p {
  flex-grow: 1
}

.ot-demo__body .ot-btn {
  align-self: flex-start;
  min-height: 46px;
  padding: 0 26px;
  font-size: 14px
}

/* ---------- CTA帯 ---------- */
.ot-cta {
  position: relative;
  z-index: 2;
  padding: 72px 0;
  background: linear-gradient(120deg, #0C83AA 0%, #1C9CC4 55%, #3DB4E0 100%);
  color: #fff;
  text-align: center
}

.ot-cta__ttl {
  margin: 0 0 12px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .06em
}

.ot-cta__txt {
  margin: 0 0 26px;
  font-size: 15px;
  letter-spacing: .06em
}

/* ---------- 機能一覧 ---------- */
.ot-feat {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px
}

.ot-feat__item {
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .08)
}

.ot-feat__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #E4EEF2
}

.ot-feat__head h3 {
  margin: 0;
  font-size: 19px;
  color: #144A6E;
  font-weight: 700
}

.ot-feat__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.ot-feat__list li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.75
}

.ot-feat__list svg {
  flex-shrink: 0;
  margin-top: 3px
}

/* ---------- 料金 ---------- */
.ot-price {
  background: linear-gradient(180deg, #F5FAFC, #EEF6FB)
}

/* ---------- FAQ（faq.css の既存クラスをトップ用に上書き） ---------- */
.ot-faq .faq-list {
  border-top: none;
  display: flex;
  flex-direction: column;
  gap: 14px
}

.ot-faq .faq-item {
  background: #fff;
  border-bottom: none;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(12, 131, 170, .08);
  overflow: hidden
}

.ot-faq .faq-question {
  padding: 22px 64px 22px 28px;
  font-size: 16px;
  color: #144A6E
}

.ot-faq .faq-question:hover {
  background: #F6FAFC
}

.ot-faq .faq-question:before {
  content: "Q";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0 16px 0 0;
  border-radius: 50%;
  background: #0C83AA;
  color: #fff;
  font-size: 15px;
  line-height: 1
}

.ot-faq .faq-content {
  padding: 18px 28px 24px;
  border-top: 1px solid #E4EEF2;
  margin: 0 0 0;
  align-items: flex-start
}

.ot-faq .faq-content:before {
  content: "A";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-right: 16px;
  border-radius: 50%;
  background: #FFF4CC;
  color: #8A6A00;
  font-size: 15px;
  line-height: 1
}

.ot-faq .faq-content p {
  padding-top: 4px;
  font-size: 15px;
  line-height: 1.9
}

.ot-faq__more {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ot-faq__more[hidden] {
  display: none;
}

.ot-faq__toggle {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}

/* ---------- 販売以外の活用シーン ---------- */
.ot-scenes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px
}

.ot-scene {
  display: flex;
  gap: 24px;
  align-items: center;
  text-decoration: none;
  color: #212529;
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 6px 24px rgba(12, 131, 170, .10);
  transition: transform .2s
}

.ot-scene:hover {
  text-decoration: none;
  color: #212529;
  transform: translateY(-3px)
}

.ot-scene__icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0
}

.ot-scene__icon--green {
  background: linear-gradient(90deg, #5CCB8E, #3DB9C9)
}

.ot-scene__icon--teal {
  background: linear-gradient(90deg, #3EC1B8, #3DB4E0)
}

.ot-scene__body {
  flex: 1
}

.ot-scene__body b {
  display: block;
  margin-bottom: 6px;
  color: #144A6E;
  font-size: 20px
}

/* ---------- クロージングCTA ---------- */
.ot-closing {
  position: relative;
  z-index: 2;
  padding: 112px 0;
  text-align: center;
  background: radial-gradient(800px 400px at 15% 20%, #E2F5F7, rgba(226, 245, 247, 0) 70%), radial-gradient(700px 400px at 90% 90%, #E6F1FC, rgba(230, 241, 252, 0) 70%), #fff
}

.ot-closing__copy {
  margin: 0 0 20px;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #0C83AA
}

.ot-closing__txt {
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .06em
}

.ot-closing #pagetop {
  position: absolute;
  right: 0;
  bottom: 0;
  margin: 0
}

.ot-closing #pagetop a {
  display: flex;
  width: 65px;
  height: 65px;
  justify-content: center;
  align-items: center;
  background: #333;
  color: #fff;
  text-decoration: none;
  font-size: 32px;
  transition: opacity .6s
}

.ot-closing #pagetop a:hover {
  opacity: .3
}

/* ---------- フッター ---------- */
/* ナビ項目が増えて幅が広がり、ロゴ・会社情報の列が狭くなるのを防ぐ（現行と同じ幅に固定） */
@media screen and (min-width: 576px) {
  .top .l-footer_nav {
    flex: 0 0 622px;
  }
}

/* ---------- 動きを減らす設定への配慮 ---------- */
@media (prefers-reduced-motion:reduce) {
  .ot-scene {
    transition: none
  }

  .ot-scene:hover {
    transform: none
  }
}

/* =========================================================
   SP（575px以下）
========================================================= */
@media screen and (max-width:575px) {
  .ot-sec {
    padding: 56px 0
  }

  .ot-inner {
    padding: 0 20px
  }

  .ot-head {
    margin-bottom: 28px
  }

  .ot-head__ttl {
    font-size: 20px;
    letter-spacing: .02em;
    font-feature-settings: "palt"
  }

  .ot-head__lead {
    font-size: 14px;
    line-height: 1.9;
    text-align: left
  }

  .ot-panel {
    padding: 28px 16px;
    border-radius: 20px
  }

  .ot-card {
    padding: 24px 20px
  }

  .ot-mv-tags li {
    font-size: 11px;
    padding: 4px 12px
  }

  .ot-mv-copy {
    font-size: 30px
  }

  .ot-mv-product {
    font-size: 16px;
    margin-bottom: 0
  }

  .ot-btn {
    min-height: 50px;
    padding: 0 24px;
    font-size: 15px
  }

  .ot-btn--w280,
  .ot-btn--w300 {
    min-width: 0;
    width: 100%
  }

  .ot-btns {
    flex-direction: column;
    align-items: stretch
  }

  .ot-btn :hover,
  .ot-scene :hover,
  .ot-quote a :hover {
    color: inherit;
  }

  .ot-concept__grid,
  .ot-quotes,
  .ot-two,
  .ot-three,
  .ot-small3,
  .ot-repeat__grid,
  .ot-both,
  .ot-ai__main,
  .ot-demos,
  .ot-feat,
  .ot-scenes {
    grid-template-columns: minmax(0, 1fr)
  }

  .ot-concept__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px
  }

  .ot-concept__item {
    padding: 20px 12px;
    gap: 10px
  }

  .ot-concept__item h3 {
    font-size: 15px
  }

  .ot-concept__item .ot-badge--l {
    width: 56px;
    height: 56px
  }

  .ot-concept__item .ot-badge--l svg {
    width: 28px;
    height: 28px
  }

  .ot-concept__item p {
    font-size: 12px
  }

  .ot-cmp,
  .ot-prc {
    min-width: 640px;
    font-size: 13px
  }

  .ot-cmp th,
  .ot-cmp td {
    padding: 12px 14px
  }

  .ot-cmp tbody th {
    width: 110px
  }

  .ot-prc tbody th {
    width: 150px;
    font-size: 12px
  }

  .ot-prc .ot-yen {
    font-size: 16px
  }

  .ot-funnel {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px
  }

  .ot-funnel__head,
  .ot-funnel__arrow {
    display: none
  }

  .ot-funnel__band {
    min-height: 56px
  }

  .ot-funnel__func {
    min-height: 0;
    margin-bottom: 12px
  }

  .ot-groups {
    gap: 8px
  }

  .ot-group__body {
    padding: 10px 6px
  }

  .ot-group__admin {
    flex-direction: column;
    text-align: center;
    padding: 8px 4px;
    font-size: 10px
  }

  .ot-group__admin span {
    display: none
  }

  .ot-group__members {
    gap: 4px
  }

  .ot-group__member:nth-child(3) {
    display: none
  }

  .ot-group__head {
    font-size: 12px;
    padding: 8px 4px;
    flex-direction: column;
    gap: 2px
  }

  .ot-course {
    padding: 10px;
    font-size: 12px;
    flex-direction: column;
    gap: 4px;
    text-align: center
  }

  .ot-course small {
    display: none
  }

  .ot-band {
    padding: 64px 0 56px
  }

  .ot-both {
    gap: 28px
  }

  .ot-both__ttl {
    font-size: 22px
  }

  .ot-ai__dash {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 20px
  }

  .ot-cta {
    padding: 48px 0
  }

  .ot-cta__ttl {
    font-size: 19px
  }

  .ot-scene {
    padding: 20px;
    gap: 16px
  }

  .ot-scene__icon {
    width: 64px;
    height: 64px
  }

  .ot-scene__icon svg {
    width: 30px;
    height: 30px
  }

  .ot-closing {
    padding: 64px 0 96px
  }

  .ot-closing__copy {
    font-size: 28px
  }

  .ot-closing #pagetop a {
    width: 50px;
    height: 50px;
    font-size: 24px
  }

  .ot-faq .faq-question {
    padding: 18px 48px 18px 16px;
    font-size: 15px
  }

  .ot-faq .faq-content {
    padding: 14px 16px 20px
  }

  .ot-faq .faq-content p {
    font-size: 14px
  }
}

/* =========================================================
   余白ユーティリティ（クラスを付けるだけで余白を調整）
   u-mt-40 → 上マージン40px（PC・SP共通）
   u-sp-mt-20 → SP（575px以下）のみ上マージン20px（PC用の指定を上書き）
   mt=上マージン / mb=下マージン / pt=上パディング / pb=下パディング
   値：0・10・20・30・40・50・60・80・100・120（px）
========================================================= */
.u-mt-0{margin-top:0!important}
.u-mt-10{margin-top:10px!important}
.u-mt-20{margin-top:20px!important}
.u-mt-30{margin-top:30px!important}
.u-mt-40{margin-top:40px!important}
.u-mt-50{margin-top:50px!important}
.u-mt-60{margin-top:60px!important}
/* …以下、mt・mb・pt・pb × 10段階の同じ形の指定が続く… */

@media screen and (max-width:575px){
  .u-sp-mt-0{margin-top:0!important}
  .u-sp-mt-10{margin-top:10px!important}
  .u-sp-mt-20{margin-top:20px!important}
  /* …以下、スマホ用の同じ形の指定が続く… */
}