@charset "UTF-8";
/*
 * 段階的差し替えフェーズの追加スタイル。レガシーCSS(テーマのstyle.css)の"後"に読み込む。
 *
 * ここに書くのは「画像焼き込みコピーをテキスト化した箇所」の見た目だけ。
 * 寸法は元画像を実測して算出している(scripts/measure-image-text.mjs 相当の解析)。
 * 元画像と同じ比率で拡縮させるため、コンテナクエリ(cqw)で指定する
 *   cqw値 = 元画像内の文字サイズpx / 元画像の幅px * 100
 */

/* ===== トップMV: キャッチコピー ===== */
/* 旧: mv-txt_pc.png(788x317) / mv-txt_sp.png(447x242) */

/* 画像を外すとflexアイテムが内在幅を失って縮むため、
   元の見え方(max-width 525pxの画像が入っていた状態)と同じ幅基準を与える */
.mv__left:has(.ov-mv-txt) {
  flex: 0 1 525px;
  min-width: 0;
}

.ov-mv-txt {
  container-type: inline-size;
  width: 100%;
}

.ov-mv-txt p {
  font-family: "Zen Kaku Gothic New", sans-serif;
}

/* --- PC(元画像788px幅を基準) --- */
.ov-mv-txt__lead {
  color: #858585;
  /* 実測は3.82cqwだが、ブラウザのフォント描画は元画像よりわずかに広く
     525px幅で折り返すため微調整(見た目の差は感知できない範囲) */
  font-size: 3.72cqw;
  font-weight: 500;
  line-height: 1.4;
}

.ov-mv-txt__catch {
  color: #3e3e3e;
  font-size: 6.3cqw; /* 49.7px / 788 */
  font-weight: 700;
  line-height: 1.335;
  margin-top: 4.75cqw;
}

.ov-mv-txt__catch em {
  color: #a61527;
  font-style: normal;
}

.ov-mv-txt__note {
  color: #3e3e3e;
  font-size: 3.03cqw; /* 23.9px / 788 */
  font-weight: 500;
  line-height: 1.465;
  margin-top: 4.12cqw;
}

/* --- SP(元画像447px幅を基準。中央揃え・リードは2行) --- */
@media screen and (max-width: 767px) {
  .ov-mv-txt {
    text-align: center;
  }

  .ov-mv-txt__lead {
    font-size: 4.47cqw; /* 20.0px / 447 */
    line-height: 1.5;
  }

  .ov-mv-txt__catch {
    font-size: 7.47cqw; /* 33.4px / 447 */
    line-height: 1.3;
    margin-top: 3.87cqw;
  }

  .ov-mv-txt__note {
    font-size: 4.67cqw; /* 20.9px / 447 */
    line-height: 1.39;
    margin-top: 4.12cqw;
  }

  /* SPはリードが2行(元画像 mv-txt_sp.png と同じ折返し) */
  .ov-mv-txt__lead span {
    display: block;
  }
}

/* ===== 404ページ(現行は白紙だったため新規作成) ===== */
.ov-notfound {
  margin: 0 auto;
  max-width: 720px;
  padding: 120px 20px 100px;
  text-align: center;
}

.ov-notfound__code {
  color: #dbd5c2;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 8rem;
  font-weight: 700;
  line-height: 1;
}

.ov-notfound__title {
  color: #bd5050;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.4rem;
  font-weight: 500;
  margin-top: 24px;
}

.ov-notfound__text {
  font-size: 1.4rem;
  line-height: 2;
  margin-top: 20px;
}

.ov-notfound__links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 40px;
}

.ov-notfound__btn {
  align-items: center;
  background-color: #a96363;
  border: 1.5px solid #a96363;
  border-radius: 32px;
  color: #ffffff;
  display: flex;
  font-size: 1.6rem;
  font-weight: 500;
  justify-content: center;
  min-width: 220px;
  padding: 14px 32px;
  text-decoration: none;
  transition: opacity 0.3s;
}

.ov-notfound__btn:hover {
  opacity: 0.7;
}

.ov-notfound__btn--sub {
  background-color: #ffffff;
  color: #a96363;
}

@media screen and (max-width: 767px) {
  .ov-notfound {
    padding: 90px 20px 70px;
  }
  .ov-notfound__code {
    font-size: 6rem;
  }
  .ov-notfound__title {
    font-size: 1.9rem;
  }
}

/* ===== サービスの分類表示(ツール / 制作・支援サービス) ===== */
/*
 * 提供物は「オンラインで運用するシステム(ツール)」と
 * 「人が手を動かして提供する制作・支援サービス」の2種類。
 * 現行は8枚を1グリッドに並べていて区別がつかないため、見出し付きの2グループに分ける。
 * カード自体は現行の .top-tool__item をそのまま使う(見た目を変えないため)。
 */

/* 元の .top-tool__box が持っていた h2 との間隔(64px)をグループ側へ移す */
.ov-svc-group {
  margin-top: 64px;
}

.ov-svc-group + .ov-svc-group {
  margin-top: 72px;
}

.ov-svc-group__label {
  align-items: center;
  border-radius: 999px;
  color: #ffffff;
  display: flex;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.8rem;
  font-weight: 700;
  justify-content: center;
  letter-spacing: 0.08em;
  margin: 0 auto;
  padding: 8px 32px;
  width: -moz-fit-content;
  width: fit-content;
}

.ov-svc-group--tool .ov-svc-group__label {
  background-color: #235fa9;
}

.ov-svc-group--support .ov-svc-group__label {
  background-color: #998676;
}

.ov-svc-group__note {
  color: #3e3e3e;
  font-size: 1.4rem;
  line-height: 1.7;
  margin-top: 14px;
  text-align: center;
}

/* グループ見出しの直後なので、グリッド側の上マージンは詰める */
.ov-svc-box {
  margin-top: 28px;
}

/* ツールは2枚。4カラム幅のままだと寂しいので半分幅にして主役として見せる */
.ov-svc-box--tool .top-tool__item {
  max-width: calc((100% - 20px) / 2);
}

/* カードが倍幅になるぶん、中身も引き上げる
   (元CSSは max-width:200px 固定。元画像は700px幅なので拡大しても粗くならない) */
.ov-svc-box--tool .top-tool__img {
  max-width: 340px;
}

.ov-svc-box--tool .top-tool__item__flex h3 {
  font-size: 2.2rem;
}

.ov-svc-box--tool .top-tool__txt {
  font-size: 1.4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 400px;
}

/* 支援サービスは6枚。4カラムだと最終行が2枚で欠けて見えるため3カラム×2行にする */
.ov-svc-box--support .top-tool__item {
  max-width: calc((100% - 20px * 2) / 3);
}

.ov-svc-box--support .top-tool__img {
  max-width: 240px;
}

@media screen and (max-width: 767px) {
  .ov-svc-group + .ov-svc-group {
    margin-top: 40px;
  }
  .ov-svc-group__label {
    font-size: 1.5rem;
    padding: 6px 24px;
  }
  .ov-svc-group__note {
    font-size: 1.2rem;
    margin-top: 10px;
    padding: 0 12px;
  }
  .ov-svc-box {
    margin-top: 18px;
  }
  .ov-svc-group {
    margin-top: 34px;
  }
  .ov-svc-group + .ov-svc-group {
    margin-top: 40px;
  }
  /* SPは2カラムのまま(1枚が大きくなりすぎないように)。中身のサイズも元のまま */
  .ov-svc-box--tool .top-tool__item {
    max-width: calc((100% - 10px) / 2);
  }
  .ov-svc-box--tool .top-tool__img {
    max-width: 200px;
  }
  /* SPは元どおり2カラム。PC用の3カラム指定(より詳細度が高い)を打ち消す */
  .ov-svc-box--support .top-tool__item {
    max-width: calc((100% - 10px) / 2);
  }
  .ov-svc-box--support .top-tool__img {
    max-width: 200px;
  }
  .ov-svc-box--tool .top-tool__item__flex h3 {
    font-size: 1.8rem;
  }
  .ov-svc-box--tool .top-tool__txt {
    font-size: 1.2rem;
  }
}

/* --- /products の一覧(2カラム)にもグループ見出しを効かせる --- */
.ov-svc-box.products-list {
  margin-top: 28px;
}

@media screen and (max-width: 767px) {
  .ov-svc-box.products-list {
    margin-top: 18px;
  }
}

/* --- グロナビ「ツール紹介」ドロップダウン内の分類見出し --- */
/* .sub-menu は flex-wrap で1項目あたりの幅が決まっている。
   見出しは行全体を占有させたいので flex-basis を100%にする(詳細度も上げる) */
/* テーマ側が .top-header .sub-menu li で max-width を指定しているため、詳細度を合わせる */
.top-header .sub-menu li.ov-nav-group,
.sub-menu .ov-nav-group {
  color: #858585;
  flex: 0 0 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  max-width: 100%;
  padding: 0;
  width: 100%;
  /* 親の row-gap(40px)が広すぎるので、見出しと項目の距離を詰める */
  margin-bottom: -22px;
}

/* 見出しの左に分類色のドットを置いて、カード側のラベル色と対応させる */
.ov-nav-group::before {
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 8px;
  margin-right: 8px;
  vertical-align: middle;
  width: 8px;
}

.ov-nav-group--tool::before {
  background-color: #235fa9;
}

.ov-nav-group--support::before {
  background-color: #998676;
}

/* 2つ目の見出しは前の項目群と間隔をあける */
.top-header .sub-menu li.ov-nav-group--support,
.sub-menu .ov-nav-group--support {
  margin-top: 10px;
}

/* --- フッターのツール一覧を2グループに再編したぶんの調整 --- */
/* 支援サービスは6項目あり1列だと縦に長いので2列に流す */
.ov-footer-nav__support {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
}

@media screen and (max-width: 767px) {
  .ov-footer-nav__support {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===== 組合わせ例(PLAN): 制作・支援サービスをテキストで見せる ===== */
/*
 * ロゴで並べるとツール(LMS/CBT)と同格の製品に見えてしまうため、
 * 制作・支援サービスだけテキストにする。カード(白地・枠線・角丸)は
 * 元の li のスタイルをそのまま使い、中身だけ画像→テキストに置き換えている。
 * 元は正方形画像(aspect-ratio 1/1)なので、同等の高さを確保して並びを崩さない。
 */
.top-service-box__right li.ov-plan-svc {
  /* 元の li は 1px の薄いグレー枠。色をはっきり見せるため 2px にする */
  border-width: 2px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  min-height: 116px;
  padding: 16px 14px;
  text-align: center;
}

/*
 * ロゴのマーク(緑・青・黄・橙・紫)から色を取り、サービスごとに色分けする。
 * 枠線=ロゴの色そのまま / 背景=その明色 / 文字=暗色版。
 *
 * ベタ塗り+白文字も検討したが、ロゴの色は明度が高く白文字だと
 * コントラストが 2.1〜3.7:1 にしかならず読めないため採用しなかった。
 * ここの文字色は背景に対して WCAG AA(4.5:1)を満たす値を計算して決めている。
 */
.top-service-box__right li.ov-plan-svc--purple {
  background-color: #dfdaea;
  border-color: #8d7db4;
  color: #5b5175; /* 5.33:1 */
}

.top-service-box__right li.ov-plan-svc--gold {
  background-color: #f2e8c7;
  border-color: #d1ae37;
  color: #79641f; /* 4.69:1 */
}

.top-service-box__right li.ov-plan-svc--blue {
  background-color: #d5e2f2;
  border-color: #6c9ad2;
  color: #466488; /* 4.65:1 */
}

.top-service-box__right li.ov-plan-svc--orange {
  background-color: #f3dbc3;
  border-color: #d6812c;
  color: #8b531c; /* 4.69:1 */
}

.top-service-box__right li.ov-plan-svc--coral {
  background-color: #fdd3d5;
  border-color: #fa646a;
  color: #a24144; /* 4.58:1 */
}

.top-service-box__right li.ov-plan-svc--green {
  background-color: #ddead2;
  border-color: #86b45f;
  color: #4d6837; /* 5.01:1 */
}

@media screen and (max-width: 767px) {
  .top-service-box__right li.ov-plan-svc {
    font-size: 1.4rem;
    min-height: 0;
    padding: 14px 12px;
  }
}

/* ===== フッターのサービスボタン: 制作・支援サービスをテキストで見せる ===== */
/*
 * 8つのロゴを並べていると、制作・支援サービスがツール(LMS/CBT)と
 * 同格の製品に見える。ツールはロゴのまま、支援はテキストにする。
 * 元のボタンは画像1枚だけの <a> なので、同等の見え方になるよう箱を作る。
 * 配色は組合わせ例のカードと同じ(ロゴのマークから抽出した5色)。
 */
.footer-btns__flex .ov-svc-btn {
  align-items: center;
  border-radius: 10px;
  border-style: solid;
  border-width: 2px;
  display: flex;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  justify-content: center;
  line-height: 1.45;
  min-height: 72px;
  padding: 12px 10px;
  text-align: center;
  width: 100%;
}

.footer-btns__flex .ov-svc-btn--purple {
  background-color: #dfdaea;
  border-color: #8d7db4;
  color: #5b5175;
}

.footer-btns__flex .ov-svc-btn--gold {
  background-color: #f2e8c7;
  border-color: #d1ae37;
  color: #79641f;
}

.footer-btns__flex .ov-svc-btn--blue {
  background-color: #d5e2f2;
  border-color: #6c9ad2;
  color: #466488;
}

.footer-btns__flex .ov-svc-btn--orange {
  background-color: #f3dbc3;
  border-color: #d6812c;
  color: #8b531c;
}

.footer-btns__flex .ov-svc-btn--coral {
  background-color: #fdd3d5;
  border-color: #fa646a;
  color: #a24144;
}

.footer-btns__flex .ov-svc-btn--green {
  background-color: #ddead2;
  border-color: #86b45f;
  color: #4d6837;
}

@media screen and (max-width: 767px) {
  .footer-btns__flex .ov-svc-btn {
    font-size: 1.2rem;
    min-height: 60px;
    padding: 10px 8px;
  }
}

/* ===== 支援サービスのテキスト表示: 一覧の見出し(/products・/price)とチップ(/case) ===== */
/* 配色は組合わせ例・フッターと共通(パレットロゴのマーク5色+CTAのコーラル) */

.products-item__logo .ov-svc-head,
.price-item__logo .ov-svc-head {
  border-bottom: 3px solid currentColor;
  display: inline-block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  padding-bottom: 6px;
}

.case-item-tool__item .ov-svc-chip {
  border-radius: 8px;
  border-style: solid;
  border-width: 2px;
  display: inline-block;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 8px 14px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .products-item__logo .ov-svc-head,
  .price-item__logo .ov-svc-head {
    font-size: 1.8rem;
  }
  .case-item-tool__item .ov-svc-chip {
    font-size: 1.2rem;
    padding: 6px 10px;
  }
}


/* purple */
.ov-svc-head--purple {
  color: #5b5175;
}

.case-item-tool__item .ov-svc-chip--purple {
  background-color: #dfdaea;
  border-color: #8d7db4;
  color: #5b5175;
}

/* gold */
.ov-svc-head--gold {
  color: #79641f;
}

.case-item-tool__item .ov-svc-chip--gold {
  background-color: #f2e8c7;
  border-color: #d1ae37;
  color: #79641f;
}

/* blue */
.ov-svc-head--blue {
  color: #466488;
}

.case-item-tool__item .ov-svc-chip--blue {
  background-color: #d5e2f2;
  border-color: #6c9ad2;
  color: #466488;
}

/* orange */
.ov-svc-head--orange {
  color: #8b531c;
}

.case-item-tool__item .ov-svc-chip--orange {
  background-color: #f3dbc3;
  border-color: #d6812c;
  color: #8b531c;
}

/* coral */
.ov-svc-head--coral {
  color: #a24144;
}

.case-item-tool__item .ov-svc-chip--coral {
  background-color: #fdd3d5;
  border-color: #fa646a;
  color: #a24144;
}

/* green */
.ov-svc-head--green {
  color: #4d6837;
}

.case-item-tool__item .ov-svc-chip--green {
  background-color: #ddead2;
  border-color: #86b45f;
  color: #4d6837;
}

/* ===== ログイン選択ページ(/login) ===== */
/*
 * サービスサイトは「入口」として、役割×製品でログイン画面へ振り分けるだけ。
 * 役割タブは1段(役割のみ)にして、製品はカードで並べる
 * ── タブを役割×製品の2段にすると選択の掛け算で迷子になるため。
 */

.ov-login-page {
  margin: 0 auto;
  max-width: 880px;
  padding: 110px 20px 90px;
  text-align: center;
}

.ov-login-page__lead {
  color: #998676;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ov-login-page__title {
  color: #3e3e3e;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-top: 8px;
}

.ov-login-page__desc {
  font-size: 1.4rem;
  line-height: 1.9;
  margin-top: 16px;
}

/* --- 役割タブ --- */
.ov-login__tabs {
  border: 1px solid #dfdfdf;
  border-radius: 999px;
  display: flex;
  margin: 40px auto 0;
  max-width: 640px;
  overflow: hidden;
}

.ov-login__tab {
  background-color: #ffffff;
  border: none;
  color: #3e3e3e;
  cursor: pointer;
  flex: 1 1 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 16px 8px;
  transition: background-color 0.2s, color 0.2s;
}

.ov-login__tab:hover {
  background-color: #f8f7f6;
}

.ov-login__tab.is-active {
  background-color: #a96363;
  color: #ffffff;
}

.ov-login__note {
  font-size: 1.3rem;
  line-height: 1.8;
  margin-top: 22px;
}

/* --- 製品カード --- */
.ov-login__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 28px;
}

.ov-login__card {
  align-items: center;
  background-color: #ffffff;
  border: 2px solid #dfdfdf;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  max-width: 300px;
  padding: 28px 24px;
  width: 100%;
}

/* 製品ごとの色。CBT/LMSは製品ブランドなのでシリーズのトークン系の色で分ける */
.ov-login__card--cbt {
  border-color: #6c9ad2;
}

.ov-login__card--lms {
  border-color: #86b45f;
}

/* 製品ロゴ。ワードマークの縦横比(675x150)を保って中央に置く */
.ov-login__logo {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 210px;
  width: 100%;
}

.ov-login__summary {
  color: #858585;
  font-size: 1.3rem;
  margin-top: 14px;
  text-align: center;
}

.ov-login__btn {
  align-items: center;
  background-color: #a96363;
  border-radius: 999px;
  color: #ffffff;
  display: flex;
  font-size: 1.5rem;
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  margin-top: 22px;
  padding: 14px 20px;
  text-decoration: none;
  transition: opacity 0.3s;
}

.ov-login__btn:hover {
  opacity: 0.75;
}

.ov-login__absence {
  background-color: #f8f7f6;
  border-radius: 12px;
  font-size: 1.3rem;
  line-height: 1.9;
  margin: 26px auto 0;
  max-width: 640px;
  padding: 16px 20px;
  text-align: left;
}

.ov-login__help {
  font-size: 1.3rem;
  margin-top: 34px;
}

.ov-login__help a {
  color: #a96363;
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  .ov-login-page {
    padding: 90px 16px 60px;
  }
  .ov-login-page__title {
    font-size: 2.2rem;
  }
  /* SPはタブが3つ並ぶと文字が潰れるので縦積みにする */
  .ov-login__tabs {
    border-radius: 14px;
    flex-direction: column;
  }
  .ov-login__tab {
    font-size: 1.3rem;
    padding: 13px 8px;
  }
  .ov-login__tab:not(:last-child) {
    border-bottom: 1px solid #dfdfdf;
  }
  .ov-login__cards {
    gap: 16px;
  }
}

/* ===== フッター手前のサービスボタン帯: ツール/支援の分類 ===== */
/*
 * 本番は8つを一列に混ぜて並べていた(LMS→ナレーション→CBT→マッチング…)。
 * トップの「主なツール」や /products と同じく2グループに分ける。
 *
 * ここはフッター直前のCTA帯で45ページすべてに入るため、説明文は出さず
 * ラベルだけの簡易版にしている(説明はトップと /products が担う)。
 */

.footer-btns .ov-svc-group {
  margin-top: 0;
}

.footer-btns .ov-svc-group + .ov-svc-group {
  margin-top: 32px;
}

/* 制作系LPだけはこの帯の上に自社サービスのロゴが入る。
   テーマ側が .footer-btns__flex に付けていた間隔(50px)を、分類ラベルの分だけ
   詰めて引き継ぐ ── ロゴと「ツール」ラベルが隣接して見えないようにするため */
.s-footer-btns__box + .ov-svc-group {
  margin-top: 40px;
}

.footer-btns .ov-svc-group__label {
  font-size: 1.4rem;
  padding: 6px 24px;
}

/* ツールは2件なので、4カラムの刻みを保ったまま中央に寄せる
   (既定の左寄せだと2枚が左端に固まって欠けたように見える) */
.footer-btns .ov-svc-box {
  justify-content: center;
  margin-top: 16px;
}

@media screen and (max-width: 767px) {
  .footer-btns .ov-svc-group + .ov-svc-group {
    margin-top: 24px;
  }

  .footer-btns .ov-svc-group__label {
    font-size: 1.3rem;
    padding: 5px 20px;
  }

  .footer-btns .ov-svc-box {
    margin-top: 12px;
  }
}