/* ===================================================================
   SES向けページ（/ses/）専用スタイル
   - fde.css の共通部品（.fde-sec / .fde-hero / .fde-btn / .fde-step 等）を土台にする
   =================================================================== */

/* ---------- ヒーロー ---------- */
.ses-hero { padding-bottom: 72px; }
.ses-hero-sub { display: inline-block; margin: .2rem 0 1rem; padding: .35rem .9rem; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font-weight: 700; font-size: .9rem; }
.ses-hero-img { display: block; margin-left: auto; max-height: 420px; width: auto; }
.ses-stats { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.ses-stats li { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 18px 20px; text-align: center; }
.ses-stats span { display: block; color: rgba(255,255,255,.8); font-size: .85rem; font-weight: 700; }
.ses-stats strong { display: block; color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; margin-top: .2rem; font-family: 'Roboto', 'Noto Sans JP', sans-serif; }

/* ---------- 導入企業ロゴ ---------- */
.ses-logos { background: #fff; padding: 36px 0; border-bottom: 1px solid var(--fde-line); }
.ses-logos-ttl { text-align: center; color: var(--fde-muted); font-size: .85rem; font-weight: 700; letter-spacing: .08em; margin-bottom: 18px; }

/* ---------- 課題 ---------- */
.ses-problems { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.ses-problem { display: grid; grid-template-columns: 160px 1fr; gap: 20px; align-items: center; background: #fff; border: 1px solid var(--fde-line); border-radius: 18px; padding: 20px; }
.ses-problem img { width: 100%; height: auto; border-radius: 12px; }
.ses-problem h3 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .5rem; }
.ses-problem p { margin: 0; line-height: 1.85; font-size: .94rem; }

/* ---------- SOCRATESとは（ステップ画像） ---------- */
.ses-step-img { display: block; width: 100%; height: auto; border-radius: 12px; margin-bottom: 16px; }

/* ---------- 特徴 ---------- */
.ses-features { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
.ses-feature { background: #fff; border: 1px solid var(--fde-line); border-radius: 18px; padding: 20px; }
.ses-feature img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 16px; }
.ses-feature .no { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--fde-gold); }
.ses-feature h3 { font-size: 1.3rem; font-weight: 700; margin: .3rem 0 .7rem; }
.ses-feature h3 em { font-style: normal; color: #0875ad; }
.ses-feature p { margin: 0; line-height: 1.85; font-size: .93rem; }
.ses-funcs { margin-top: 32px; background: var(--fde-navy); border-radius: 18px; padding: 28px; }
.ses-funcs h3 { color: #fff; font-size: 1.1rem; font-weight: 700; text-align: center; margin: 0 0 18px; }
.ses-funcs ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.ses-funcs li { background: rgba(255,255,255,.08); border-radius: 10px; padding: 12px 14px; color: #fff; font-weight: 700; font-size: .9rem; display: flex; gap: .5rem; align-items: center; }
.ses-funcs li i { color: var(--fde-gold); }

/* ---------- 表（導入効果・料金） ---------- */
.ses-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--fde-line); border-radius: 16px; background: #fff; }
.ses-table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: .92rem; }
.ses-table th, .ses-table td { padding: 14px 16px; border-bottom: 1px solid var(--fde-line); vertical-align: top; color: var(--fde-text); }
.ses-table thead th { background: var(--fde-navy); color: #fff; font-weight: 700; text-align: left; }
.ses-table tbody th { color: var(--fde-ink); font-weight: 700; white-space: nowrap; background: #f8fafc; }
.ses-table td small { display: block; color: var(--fde-muted); font-size: .78rem; margin-top: .3rem; line-height: 1.6; }
.ses-table td.em { color: #0875ad; font-weight: 700; }
.ses-plan thead th span { display: block; font-size: .85rem; font-weight: 700; color: var(--fde-gold); margin-top: .2rem; }
.ses-plan thead th small { display: block; font-size: .75rem; font-weight: 400; color: rgba(255,255,255,.75); margin-top: .2rem; }
.ses-plan td { text-align: center; vertical-align: middle; }
.ses-plan td.ok i { color: #008a83; font-size: 1.1rem; }
.ses-plan td.na { color: #b8c2cf; }
.ses-plan tbody th { white-space: normal; }

/* ---------- お客様の声 ---------- */
.ses-case { display: grid; grid-template-columns: 360px 1fr; gap: 28px; background: #fff; border: 1px solid var(--fde-line); border-radius: 18px; padding: 24px; }
.ses-case + .ses-case { margin-top: 20px; }
.ses-case-img img { width: 100%; height: auto; border-radius: 12px; }
.ses-case .no { font-size: .78rem; font-weight: 700; letter-spacing: .12em; color: var(--fde-gold); }
.ses-case h3 { font-size: 1.2rem; font-weight: 700; margin: .3rem 0 .6rem; line-height: 1.6; }
.ses-case .who { font-weight: 700; color: var(--fde-ink); margin-bottom: .8rem; }
.ses-case .who span { display: block; font-weight: 400; font-size: .84rem; color: var(--fde-muted); }
.ses-case dl { margin: 0; }
.ses-case dt { font-size: .8rem; font-weight: 700; color: #0875ad; margin-top: .7rem; }
.ses-case dd { margin: .2rem 0 0; line-height: 1.85; font-size: .93rem; color: var(--fde-text); }

/* ---------- おすすめ ---------- */
.ses-recos { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.ses-reco { background: #fff; border: 1px solid var(--fde-line); border-radius: 18px; padding: 18px; }
.ses-reco img { width: 100%; height: auto; border-radius: 12px; margin-bottom: 12px; }
.ses-reco h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .5rem; }
.ses-reco p { margin: 0; font-size: .88rem; line-height: 1.8; }

/* ---------- FAQ ---------- */
.ses-faq { max-width: 880px; margin: 0 auto; }
.ses-faq-item { border: 1px solid var(--fde-line); border-radius: 14px; background: #fff; padding: 0 20px; }
.ses-faq-item + .ses-faq-item { margin-top: 12px; }
.ses-faq-item summary { cursor: pointer; padding: 18px 0; font-weight: 700; color: var(--fde-ink); list-style: none; position: relative; padding-right: 28px; }
.ses-faq-item summary::-webkit-details-marker { display: none; }
.ses-faq-item summary::after { content: "\F4FE"; font-family: "bootstrap-icons"; position: absolute; right: 0; top: 18px; color: var(--fde-muted); }
.ses-faq-item[open] summary::after { content: "\F2EA"; }
.ses-faq-item p { margin: 0 0 18px; line-height: 1.9; color: var(--fde-text); }

/* ---------- 問い合わせ ---------- */
.ses-contact { background: var(--fde-navy); color: #fff; padding: 88px 0; }
.ses-contact h2 { color: #fff; font-weight: 700; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.5; margin: .4rem 0 1rem; }
.ses-contact p { color: rgba(255,255,255,.85); line-height: 1.9; }
.ses-contact-notes { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.ses-contact-notes li { color: rgba(255,255,255,.85); margin-bottom: .5rem; display: flex; gap: .6rem; }
.ses-contact-notes i { color: var(--fde-gold); }
.ses-form { background: #fff; border-radius: 18px; padding: 28px; color: var(--fde-text); }
.ses-form .form-label { color: var(--fde-ink); font-weight: 700; font-size: .88rem; }
.ses-form .req { display: inline-block; background: #fff1e5; color: #c2410c; font-size: .7rem; padding: .05rem .45rem; border-radius: 4px; margin-left: .3rem; }
.ses-form .form-control, .ses-form .form-select { color: var(--fde-ink); background-color: #fff; border-color: #cfd8e3; }
.ses-form .form-check-label { color: var(--fde-text); font-size: .9rem; }
.ses-form .form-check-label a { color: #0875ad; }
.ses-form button.fde-btn { border: 0; }
.ses-form .loading, .ses-form .error-message, .ses-form .sent-message { display: none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 991px) {
  .ses-problems, .ses-features { grid-template-columns: 1fr; }
  .ses-funcs ul { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ses-case { grid-template-columns: 1fr; }
  .ses-recos { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ses-hero-img { margin: 0 auto; max-height: 320px; }
}
@media (max-width: 575px) {
  .ses-stats { grid-template-columns: 1fr; }
  .ses-problem { grid-template-columns: 1fr; }
  .ses-funcs ul, .ses-recos { grid-template-columns: 1fr; }
  .ses-form { padding: 20px; }
}
.ses-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.ses-hero .fde-eyebrow { display: block; }

/* ---------- 導入企業ロゴ：横スクロール（同じ並びを2回つなげて無限ループ） ---------- */
.ses-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.ses-marquee-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: ses-marquee 40s linear infinite; }
.ses-marquee-track li { flex: 0 0 auto; padding: 0 14px; }
.ses-marquee-track img { display: block; height: 56px; width: auto; }
.ses-marquee:hover .ses-marquee-track { animation-play-state: paused; }
@keyframes ses-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 575px) {
  .ses-marquee-track img { height: 44px; }
  .ses-marquee-track { animation-duration: 30s; }
}
@media (prefers-reduced-motion: reduce) {
  .ses-marquee { -webkit-mask-image: none; mask-image: none; }
  .ses-marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 12px; }
  .ses-marquee-track li[aria-hidden="true"] { display: none; }
}

/* ---------- 料金（Standard主役＋Professional上位プラン） ---------- */
.ses-plans { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: stretch; }
.ses-plan-main, .ses-plan-sub { border-radius: 20px; padding: 28px; }
.ses-plan-main { background: #fff; border: 2px solid #008a83; box-shadow: 0 16px 40px rgba(27,45,75,.08); }
.ses-plan-sub { background: #f1f4f9; border: 1px solid var(--fde-line); }
.ses-plans h3 { font-size: 1.35rem; font-weight: 700; margin: .6rem 0 .3rem; }
.ses-plans .price { color: var(--fde-ink); margin: 0 0 1rem; }
.ses-plans .price strong { font-size: 2rem; font-family: 'Roboto', 'Noto Sans JP', sans-serif; margin: 0 .2rem; }
.ses-plans .price small { color: var(--fde-muted); }
.ses-plans .desc { font-size: .9rem; line-height: 1.8; }
.badge-rec, .badge-up { display: inline-block; font-size: .75rem; font-weight: 700; padding: .25rem .75rem; border-radius: 999px; }
.badge-rec { background: #e5f8f4; color: #008a83; }
.badge-up { background: #e7f0ff; color: #1f3a8a; }
.ses-plan-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ses-plan-main .ses-plan-list { grid-template-columns: 1fr 1fr; }
.ses-plan-list li { display: flex; gap: .5rem; align-items: flex-start; font-size: .92rem; color: var(--fde-ink); line-height: 1.6; }
.ses-plan-list li i { color: #008a83; margin-top: .15rem; }
.ses-plan-list.plus li i { color: #3b6fd8; }
.ses-plan-sub .links { margin-top: 1.2rem; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; }
.ses-plan-sub .links a { color: #0875ad; font-weight: 700; text-decoration: none; font-size: .9rem; }

/* ---------- エンタープライズへの導線 ---------- */
.ses-cross { background: var(--fde-white); padding: 0 0 72px; }
.ses-cross-box { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; border: 1px solid var(--fde-line); border-left: 5px solid #7250b5; border-radius: 16px; padding: 22px 26px; background: #faf8fe; }
.ses-cross-box .lbl { font-size: .78rem; font-weight: 700; color: #7250b5; letter-spacing: .08em; }
.ses-cross-box p { margin: .3rem 0 0; color: var(--fde-ink); font-weight: 700; line-height: 1.7; }
@media (max-width: 991px) {
  .ses-plans { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
  .ses-plan-main .ses-plan-list { grid-template-columns: 1fr; }
}
.ses-plan-main { display: flex; flex-direction: column; }
.ses-plan-main .trial { margin-top: auto; padding-top: 1.4rem; border-top: 1px dashed var(--fde-line); }
.ses-plan-main .ses-plan-list { margin-bottom: 1.4rem; }
.ses-plan-main .trial p { font-size: .9rem; margin-bottom: .8rem; }
.ses-plan-main .badge-rec, .ses-plan-main .trial .fde-btn { align-self: flex-start; }

/* ---------- 導入効果（カード） ---------- */
.ses-effects { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.ses-effect { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--fde-line); border-top: 4px solid #0875ad; border-radius: 16px; padding: 22px 22px 20px; }
.ses-effect .item { font-size: .82rem; font-weight: 700; color: var(--fde-muted); letter-spacing: .04em; }
.ses-effect .result { display: block; font-size: clamp(1.4rem, 2.4vw, 1.75rem); font-weight: 800; color: #0875ad; line-height: 1.3; margin: .35rem 0 1rem; }
.ses-effect .ba { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 8px; margin-top: auto; }
.ses-effect .ba > div { border-radius: 10px; padding: 10px 12px; font-size: .88rem; font-weight: 700; line-height: 1.5; }
.ses-effect .ba span { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; margin-bottom: .2rem; }
.ses-effect .before { background: #f1f4f9; color: var(--fde-muted); }
.ses-effect .before span { color: #8a96a8; }
.ses-effect .after { background: #e7f5fc; color: var(--fde-ink); }
.ses-effect .after span { color: #0875ad; }
.ses-effect .ba i { align-self: center; color: #0875ad; font-size: 1.1rem; }
.ses-effect .note { margin: .8rem 0 0; font-size: .8rem; color: var(--fde-muted); line-height: 1.7; }
@media (max-width: 991px) { .ses-effects { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px) { .ses-effects { grid-template-columns: 1fr; } }
.ses-effect .ba { margin-top: 0; }
.ses-effect .ba > div { display: flex; flex-direction: column; justify-content: center; }

/* ---------- お客様の声（見出し・ブロック化） ---------- */
.ses-case { grid-template-columns: 340px 1fr; align-items: start; padding: 28px; }
.ses-case h3 { font-size: 1.3rem; margin: .4rem 0 .8rem; }
.ses-case .who { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: 1.1rem; }
.ses-case .who strong { font-size: .98rem; color: var(--fde-ink); margin-right: .2rem; }
.ses-case .who .tag { display: inline-block; font-size: .76rem; font-weight: 700; color: var(--fde-muted); background: #f1f4f9; border-radius: 999px; padding: .15rem .7rem; }
.case-blocks { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.case-blocks .cb { border-radius: 12px; padding: 14px 16px; background: #f6f8fb; }
.case-blocks .cb .lbl { display: flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: var(--fde-muted); margin-bottom: .4rem; }
.case-blocks .cb p { margin: 0; font-size: .9rem; line-height: 1.8; color: var(--fde-text); }
.case-blocks .cb.result { background: #e7f5fc; }
.case-blocks .cb.result .lbl { color: #0875ad; }
.case-blocks .cb.result p { color: var(--fde-ink); font-weight: 700; }
@media (max-width: 991px) { .ses-case { grid-template-columns: 1fr; } }

/* 料金：共通の標準機能（2026-10-27） */
.ses-plan-common { margin-top: 20px; padding: 24px 28px; border-radius: 20px; background: #fff; border: 1px solid var(--fde-line); }
.ses-plan-common h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .9rem; }
.ses-plan-common .ses-plan-list { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ses-plans .ses-plan-main .desc, .ses-plans .ses-plan-sub .desc { margin-top: -.4rem; }

/* 料金：2パッケージを同じ幅・同じ構成に（2026-10-27） */
.ses-plans-eq { grid-template-columns: 1fr 1fr; }
.ses-plan-card { display: flex; flex-direction: column; border-radius: 20px; padding: 28px; background: #fff; border: 2px solid #008a83; box-shadow: 0 16px 40px rgba(27,45,75,.08); }
.ses-plan-card .cond { font-size: .9rem; color: var(--fde-muted); background: #f1f4f9; border-radius: 10px; padding: .5rem .8rem; margin: 0 0 1.1rem; }
.ses-plan-card .ses-plan-list { grid-template-columns: 1fr; margin-bottom: 1.4rem; }
.ses-plan-card .trial { margin-top: auto; padding-top: 1.4rem; border-top: 1px dashed var(--fde-line); }
.ses-plan-card .trial p { font-size: .88rem; }
.ses-plan-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2rem; margin-top: 1.2rem; }
.ses-plan-links a { color: #0875ad; font-weight: 700; text-decoration: none; font-size: .9rem; }
@media (max-width: 991px) { .ses-plans-eq { grid-template-columns: 1fr; } }
.ses-plan-card .badge-rec { align-self: flex-start; }
.ses-plan-common .ses-plan-list { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) { .ses-plan-common .ses-plan-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .ses-plan-common .ses-plan-list { grid-template-columns: 1fr; } }