@charset "UTF-8";
/*
  Dojo Navi — トップページスタイル
  ==============================================================
  統合元: top.css + top_pc.css + top_sp.css
  依存: vars.css を先に読み込むこと

  hpソース（tepss_dojo-navi/dojo_tenda/assets/css/）を正として
  2026-07-13 に全面再構築。新規移植分はhpソースの値をそのまま
  （hexベタ書き）転記し、既存のvar()化済み箇所はそのまま維持。
  ==============================================================

  目次:
    1. セクション共通
    2. MV（.mv）
    3. オンライン体験（.online）
    4. メディア紹介（.media）
    5. Dojoナビ紹介（.dojoNavi）
    6. メリット（.merit）
    7. CTAボックス（.contact-btn-w）
    8. 機能紹介（.feature）
    9. 価格（.price）
   10. 事例（.case）/ 見出し右寄せ（.ttl-r-box）
   11. コラム（.column）
   12. サポート（.support）
   13. お問い合わせ（.contact）
   14. メディアクエリ: PC (min-width: 768px)
   15. メディアクエリ: SP (max-width: 767px)
  ==============================================================
*/

/* ================================================================
   1. セクション共通
   ================================================================ */

.rwd_disp_xo,
.rwd_disp_ox { display: none !important; }

section { padding-top: var(--section-padding-pc); padding-bottom: var(--section-padding-pc); }

/* ================================================================
   2. MV（.mv）
   ================================================================ */

/* 背景画像カバー */
.mv {
  background: url(../images/top/mv-bg.webp) no-repeat center/cover;
  padding: 30px 0 95px;
}
.no-webp .mv { background: url(../images/top/mv-bg.jpg) no-repeat center/cover; }

.mv .award {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mv-inner {
  display: flex;
  justify-content: space-between;
}

/* キャッチコピーエリア
   .mv-img01/.mv-img02 はDB本文(ACF)側のHTMLにクラスが付与されない場合があるため、
   .award直下の画像に対する構造セレクタ（:last-child = mv-img01相当）でも対応する */
.mv-img { text-align: right; }
.mv-img01,
.mv-img .award img:last-child { width: 260px; display: inline-block; }
.mv-img img { border-radius: 10px; }
.mv-img-btn { width: 100%; }
.mv-img a { font-size: 1.6rem; width: 260px; }

/* バッジリスト: 白カード */
.mv-txt ul { display: flex; margin-bottom: 40px; }
.mv-txt ul li {
  background: var(--color-bg-white);
  padding: 20px;
  border-radius: 10px;
  font-size: 1.8rem;
  line-height: 1.2;
  text-align: center;
}
.mv-txt ul li span { font-weight: bold; }

/* メインキャッチ: 3.8rem + text-shadow */
.mv-txt .heading_text {
  font-size: 3.8rem;
  font-weight: normal;
  text-shadow: 0 0 3px var(--color-text-white), 0 0 3px var(--color-text-white), 0 0 3px var(--color-text-white), 0 0 3px var(--color-text-white),
               0 0 3px var(--color-text-white), 0 0 3px var(--color-text-white), 0 0 3px var(--color-text-white), 0 0 3px var(--color-text-white);
  line-height: 1.5;
}
.mv-txt .heading_text span { font-weight: bold; }

/* ================================================================
   3. オンライン体験（.online）
   ================================================================ */

/* 青枠カード */
a.online {
  display: block;
  border-radius: 10px;
  background: var(--color-online-bg);
  border: 2px solid var(--color-online-blue);
  position: relative;
  transition: 0.3s;
}
a.online:hover { opacity: 0.8; }

.online h2 {
  font-size: 2.5rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-online-blue);
  text-decoration: underline;
}
.online img { width: 190px; position: absolute; }
.online-txt p { color: var(--color-text); }
.online .txt-more {
  color: var(--color-text-white);
  border-radius: 10px 0 8px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 156px;
  position: absolute;
  right: 0; bottom: -2px;
  font-size: 1.9rem;
  background: var(--color-online-blue) url(../images/common/icon-arrow-wh.png) no-repeat center right 10px / 8px 12px;
}

/* ================================================================
   4. メディア紹介（.media）
   ================================================================ */

.media {
  border: 1px solid var(--color-border-light);
  border-radius: 10px;
  font-weight: bold;
  background: var(--color-bg-white);
  transform: translateY(-50px);
}
.media-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 2.0rem;
  font-weight: bold;
  box-sizing: border-box;
}
.media-head::before {
  content: '';
  background: url(../images/top/img-biz.webp) no-repeat center/contain;
  width: 160px; height: 160px;
  display: inline-block;
  position: absolute; left: 30px; bottom: 0;
}
.no-webp .media-head::before { background: url(../images/top/img-biz.png) no-repeat center/contain; }
.media-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* ================================================================
   5. Dojoナビ紹介（.dojoNavi）
   ================================================================ */

/* クリーム背景 */
.dojoNavi {
  background: var(--color-bg-cream);   /* var(--color-bg-cream) */
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
}

.dojoNavi .imgSet-wrap { display: flex; }
.dojoNavi .imgSet-movie, .mv-img .imgSet-movie { border-radius: 10px; overflow: hidden; }

.dojoNavi .imgSet-txt h2 {
  font-size: 3.6rem;
  margin-bottom: 55px;
  font-weight: normal;
}
.dojoNavi .imgSet-txt h2 span {
  font-weight: bold;
  display: inline-block;
  position: relative;
}
/* 点線装飾 */
.dojoNavi .imgSet-txt h2 span::before {
  content: '';
  width: 100%; height: 8px;
  display: block;
  background: url(../images/top/txt-dot.png) no-repeat center/contain;
  position: absolute; top: -15px;
}
.dojoNavi .imgSet-txt .btn-wh { width: 320px; margin-top: 30px; }

.dojoNavi .deco-txt { font-size: 2.6rem; text-align: center; }
.dojoNavi .deco-txt span { font-weight: bold; }

/* Dojoナビ機能アイテム */
.dojoNavi-item {
  border: 2px solid var(--color-border-cream);  /* var(--color-border-cream) */
  padding: 30px;
  border-radius: 10px;
  background: var(--color-bg-white);
  position: relative;
}
.dojoNavi-item span {
  font-size: 1.6rem;
  color: var(--color-text-white);
  font-weight: bold;
  width: 130px; height: 130px;
  position: absolute;
  left: -20px; top: -60px;
  display: flex;
  align-items: center; justify-content: center;
}
.dojoNavi-item .txt { margin-top: 20px; }

.dojoNavi-item:nth-of-type(1) span {
  background: url(../images/top/icon-budge-ye.png) no-repeat center/contain;
}
.dojoNavi-item:nth-of-type(2) {
  display: flex;
  justify-content: space-between;
}
.dojoNavi-item:nth-of-type(2) span {
  background: url(../images/top/icon-budge-bl.png) no-repeat center/contain;
}
.dojoNavi-item:nth-of-type(2) > div { width: 260px; }
.dojoNavi-item:nth-of-type(2) > div + div {
  margin-left: 70px;
  position: relative;
}
.dojoNavi-item:nth-of-type(2) > div + div::before {
  content: '';
  width: 16px; height: 14px;
  display: inline-block;
  background: url(../images/common/icon-arrow-d.png) no-repeat center/contain;
  position: absolute; left: -45px; top: 100px;
}

/* CTAボックス */
.dojoNavi .contact-btn {
  border-radius: 10px;
  border: 1px solid var(--color-border-light);
  box-sizing: border-box;
  background: var(--color-bg-white);
  transform: translateY(80px);
}
.dojoNavi .contact-btn-head {
  background: var(--color-primary);   /* var(--color-primary) */
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 0 80px;
  color: var(--color-text-white);
  display: flex;
  align-items: center;
  box-sizing: border-box;
}
.dojoNavi .contact-btn-body {
  padding: 45px 35px;
  box-sizing: border-box;
}

.dojoNavi .site-wrap { position: relative; z-index: 2; }
.dojoNavi .site-wrap .deco01 {
  position: absolute;
  width: 268px; height: 224px;
  top: 0; left: -230px;
  z-index: -1;
  overflow: hidden;
}
.dojoNavi .site-wrap .deco01-1 { width: 268px; height: 268px; position: absolute; bottom: 0; }
.dojoNavi .deco02 {
  position: absolute;
  top: 480px; right: 0;
  overflow: hidden;
  width: 400px; height: 360px;
}
.dojoNavi .deco02-1 { width: 358px; height: 358px; left: 130px; position: absolute; z-index: 1; top: 0; }
.dojoNavi .deco02-2 { width: 158px; height: 158px; position: absolute; top: 200px; left: 50px; }
.dojoNavi .site-wrap .deco03 {
  position: absolute;
  bottom: -225px; left: -315px;
  width: 450px; height: 450px;
  z-index: -1;
}

/* ================================================================
   6. メリット（.merit）
   ================================================================ */

.merit { padding: 185px 0 0; position: relative; }
.merit .ttl::before { color: var(--color-bg-blue); }   /* var(--color-bg-blue) */

.merit-lead { font-size: 2.6rem; text-align: center; margin-bottom: 50px; }
.merit-lead span { font-weight: bold; }

/* 青灰背景エリア */
.merit-arrow {
  position: relative;
  background: var(--color-bg-blue);   /* var(--color-bg-blue) */
  overflow: hidden;
  text-align: center;
  padding-bottom: 100px;
}

.merit .merit-img { z-index: 3; position: relative; }
.merit .merit-img::after {
  content: '';
  background: url(../images/top/merit-arrow-bg.webp) no-repeat top center/100% auto;
  width: 100%; height: 46vw;
  display: block;
  position: absolute;
  z-index: -1;
}
.no-webp .merit .merit-img::after { background: url(../images/top/merit-arrow-bg.png) no-repeat top center/100% auto; }

/* 白い円形メリット表示 */
.merit-circle, .merit-circle > div {
  display: flex;
  justify-content: center;
  align-items: center;
}
.merit-circle > div, .merit-circle > div > div {
  flex-direction: column;
  background: var(--color-bg-white);
  border-radius: 200px;
  width: 230px; height: 230px;
  color: var(--color-price-accent);
  font-size: 2.0rem;
  font-weight: bold;
}
.merit-circle > div img, .merit-circle > div > div img { height: 50px; margin-bottom: 20px; }
.merit-circle > div + div, .merit-circle > div > div + div { margin-left: 70px; }

/* 実績数値カード */
.merit .rate {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 50px auto;
}
.merit .rate div {
  border-radius: 10px;
  background: var(--color-bg-white);
  font-size: 2.0rem;
  font-weight: bold;
  letter-spacing: 2px;
  padding: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.8;
}
.merit .rate .ft-re {
  color: var(--color-primary);   /* var(--color-primary) */
  font-size: 4.2rem;
  line-height: 0.7;
  margin: 0 5px;
  transform: translate(0, 2px);
  display: inline-block;
}
.merit .rate .ft-re span { font-size: 2.4rem; color: var(--color-text); }

/* 他サービス連携ボックス */
.merit .other-service {
  background: var(--color-bg-white);
  border: 2px solid var(--color-border-accent);   /* #b5cbd9 */
  border-radius: 10px;
  padding: 90px 40px 50px;
  margin-top: 110px;
  position: relative;
}
.merit .other-service .ttl-m { font-size: 2.6rem; margin-bottom: 50px; }
.merit .other-service .icon-plus {
  width: 120px; height: 120px;
  background: var(--color-accent);   /* #b5cbd9 */
  border-radius: 100px;
  position: absolute; left: 0; right: 0; margin: auto; top: -60px;
  display: flex; align-items: center; justify-content: center;
}
.merit .other-service .icon-plus::before,
.merit .other-service .icon-plus::after {
  content: ''; width: 34px; height: 4px;
  background: var(--color-text-white); display: block;
}
.merit .other-service .icon-plus::after {
  transform: rotate(90deg); position: absolute;
}
.merit .other-service ul p { width: 100%; }
.merit .other-service ul img { height: 70px; margin: 10px 0 20px; }
.merit .other-service ul a { position: relative; }
.merit .other-service ul a .i-link-bk { position: absolute; right: 20px; }

.merit .site-wrap { position: relative; z-index: 2; }
.merit .site-wrap .deco01 { position: absolute; width: 268px; height: 268px; top: -200px; right: 0; }
.merit .deco02 { position: absolute; bottom: 250px; left: -240px; z-index: -1; }
.merit .deco02-1 { width: 358px; height: 358px; }
.merit .deco02-2 { width: 158px; position: absolute; right: -90px; top: -20px; }
.merit .site-wrap .deco03 { width: 450px; right: -450px; bottom: -150px; position: absolute; }

/* ================================================================
   7. CTAボックス（.contact-btn-w）
   ================================================================ */

.contact-btn-w { border: 1px solid var(--color-border-light); }
.contact-btn-w-head {
  display: flex;
  align-items: center;
  font-size: 2.6rem;
  line-height: 1.8;
  font-weight: bold;
  color: var(--color-text-white);
  box-sizing: border-box;
  padding: 50px 50px 50px 0;
}
.contact-btn-w-body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 50px 0 50px 50px;
  align-items: center;
}

/* ================================================================
   8. 機能紹介（.feature）
   ================================================================ */

/* クリーム背景 + 斜めストライプ */
.feature {
  background-color: var(--color-bg-cream);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 5px, var(--color-bg-cream-stripe) 5px, var(--color-bg-cream-stripe) 10px);
}
.feature .ttl::before { color: var(--color-border-cream); }

.feature-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.feature-wrap + .btn-wh { display: flex; margin: 45px auto 0; }

/* 白カード */
.feature-item {
  background: var(--color-bg-white);
  border-radius: 10px;
  padding: 50px 20px 20px;
  box-sizing: border-box;
}
.feature-item span {
  font-size: 4.2rem;
  font-weight: bold;
  color: var(--color-num-accent);   /* var(--color-num-accent) */
}
.feature-item h3 { font-size: 2.2rem; line-height: 1.5; margin: 20px 0; }
.feature-item-inner { padding: 0 30px 30px; }

/* ================================================================
   9. 価格（.price）
   ================================================================ */

.price { padding: 100px 0; position: relative; }
.price .ttl::before { color: var(--color-bg-blue); }

/* 青灰ボーダーボックス */
.price-content {
  border: 2px solid var(--color-border-accent);   /* #b5cbd9 */
  border-radius: 10px;
  background: var(--color-bg-white);
  text-align: center;
  box-sizing: border-box;
}
.price::before {
  content: '';
  width: 100%; height: 200px;
  background: var(--color-bg-blue);
  position: absolute; bottom: 0; left: 0;
  z-index: -1;
}

.price-wrap { display: flex; justify-content: center; align-items: flex-end; }

.price-item { border-width: 1px; border-style: solid; border-radius: 10px; overflow: hidden; }
.price-item:nth-of-type(1) { border-color: var(--color-price-accent); }
.price-item:nth-of-type(1) .price-item-head { background: var(--color-price-accent); color: var(--color-text-white); }
.price-item:nth-of-type(3) { border-color: var(--color-accent-dark); }   /* var(--color-accent-dark) */
.price-item:nth-of-type(3) .price-item-head { background: var(--color-accent-dark); color: var(--color-text-white); }

.price-item-head { text-align: center; }
.price-item-head p span { font-size: 1.8rem; }
.price-item-body { text-align: center; }
.price-item-body p span { font-size: 1.8rem; }
.price-item-body li { display: flex; align-items: center; }
.price-item-body li + li { margin-top: 8px; }
.price-item-body li::before {
  content: ''; width: 3px; height: 3px;
  display: block; border-radius: 10px;
  margin-right: 5px;
  background: var(--color-text);
}
.price-item-body li .ft-re { color: var(--color-primary); }

/* ＋アイコン（青灰丸） */
.price .icon-plus {
  width: 90px; height: 90px;
  background: var(--color-accent);   /* #b5cbd9 */
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
}
.price .icon-plus::before, .price .icon-plus::after {
  content: ''; width: 34px; height: 4px;
  background: var(--color-text-white); display: block;
}
.price .icon-plus::after { transform: rotate(90deg); position: absolute; }

/* ================================================================
   10. 事例（.case）/ 見出し右寄せ（.ttl-r-box）
   ================================================================ */

.case { padding: 100px 0; }

/* bizカード */
.case .biz {
  background: var(--color-bg-cream);
  border-radius: 10px;
  padding: 50px 80px;
  position: relative;
  margin-top: 100px;
}
.case .biz-txt { line-height: 1.8; flex-shrink: 0; margin-right: 30px; }
.case .biz-txt img { display: block; margin: 10px auto 0; height: 270px; }
.case .biz-txt > span { font-size: 2.0rem; }
.case .biz-txt p { font-size: 2.6rem; }
.case .biz-txt p span { font-weight: bold; }
.case .biz-movie { position: relative; border-radius: 10px; cursor: pointer; width: 100%; }
.case .biz-movie video { width: 100%; height: auto; }

section.column h2.ttl::before,
.case .ttl::before { color: var(--color-bg-cream); }

/* col4-box: 薄いグレー枠カード */
.col4-box { margin-top: 80px; display: flex; justify-content: center; }
.col4-box + .btn-wh { display: flex; margin: 50px auto 0; }
.col4-box .box-item {
  border: 1px solid var(--color-border-light);   /* var(--color-border-light) */
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.col4-box .box-item a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.col4-box .box-item-img { height: 180px; width: 100%; }
.col4-box .box-item p { padding: 20px; }
.col4-box .box-item p.txt_company { padding-bottom: 0; font-weight: 700; line-height: 1.6; }
.col4-box .box-item p.txt { font-size: 1.4rem; }

.ttl-r-box { display: flex; align-items: flex-end; }
.ttl-r-box .ttl { margin: 0 30px 0 0; }
.ttl-r-box .ttl::before { left: -40px; }

/* ================================================================
   11. コラム（.column）
   ================================================================ */

.column { padding: 100px 0; }
.column .btn-wh { position: relative; }
.column .btn-wh .i-link-bk { position: absolute; right: 20px; }

.column .col-box {
  margin-top: 80px;
  display: flex;
  justify-content: center;
}
.column .col-box + .btn-wh { display: flex; margin: 50px auto 0; }
.column .col-box .box-item {
  width: calc(100% / 2);
  margin: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.column .col-box .box-item-img { width: 100%; }
.column .col-box .box-item h3 { font-size: 2.2rem; line-height: 1.5; margin-bottom: 15px; }
.column .col-box .box-item p { padding: 20px; }
.col-box .box-item a { margin: 20px auto 0; }

/* ================================================================
   12. サポート（.support）
   ================================================================ */

.support { background: var(--color-bg-blue); padding: 100px 0; }
.support .ttl::before { color: var(--color-accent); }
.support-wrap + .btn-wh { display: flex; margin: 50px auto 0; position: relative; }
.support-wrap + .btn-wh .i-link-bk { position: absolute; right: 20px; }

/* 青灰ボーダーカード */
.support-item {
  padding: 60px 30px 30px;
  box-sizing: border-box;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-accent);   /* #b5cbd9 */
  border-radius: 10px;
  position: relative;
}
.support-item .icon {
  background: var(--color-accent);   /* #b5cbd9 */
  width: 80px; height: 80px;
  border-radius: 100px;
  display: flex; align-items: center; justify-content: center;
  position: absolute; left: 0; right: 0; margin: auto; top: -40px;
}
.support-item .icon img { height: 25px; }
.support-item h3 { text-align: center; font-size: 2.2rem; line-height: 1.5; margin-bottom: 15px; }

/* ================================================================
   13. お問い合わせ（.contact）
   ================================================================ */

.contact { background: var(--color-bg-cream); padding: 100px 0; position: relative; overflow: hidden; }
.contact .ttl::before { color: var(--color-border-cream); }

.contact-item {
  border: 2px solid var(--color-border);   /* #202020 */
  background: var(--color-bg-white);
  border-radius: 10px;
  box-sizing: border-box;
}
.contact-item h3 { font-size: 2.2rem; line-height: 1.5; text-align: center; margin-bottom: 30px; }
.contact-item > a { width: 100%; }
.contact-item > a.btn-wh { align-self: baseline; }

.contact .site-wrap { position: relative; z-index: 2; }
.contact .deco01 { width: 358px; left: -130px; top: -130px; position: absolute; }
.contact .deco02 { top: 0; left: 30px; width: 450px; position: absolute; }

/* ================================================================
   14. メディアクエリ: PC (min-width: 768px)
   ================================================================ */

@media (min-width: 768px) {

  .rwd_disp_ox { display: block !important; }

  /* MV: 共通 .site-wrap の max-width:1100px(vars.css)制約に上書きされるため、
     max-width も明示的に指定してhpソース通り1180px幅にする */
  .mv .site-wrap { width: 1180px; max-width: 1180px; }
  .mv .award { margin-bottom: 30px; }
  .mv-img01, .mv-img02,
  .mv-img .award img { margin-right: 10px; margin-left: 10px; }
  .mv-img { width: 530px; }
  .mv-img-btn { display: flex; justify-content: space-between; }
  .mv-img a { margin-top: 20px; width: 255px; padding: 0 20px; }
  .mv-txt { padding-top: 20px; }
  .mv-txt ul li + li { margin-left: 10px; }

  /* オンライン */
  .online { width: 580px; margin: 40px auto 0; }
  .online h2 { margin-bottom: 10px; }
  .online-txt { padding: 25px 0; margin-left: 220px; font-size: 1.3rem; }
  .online-txt p { line-height: 1.5; }
  .online-txt .txt-more { line-height: 1; }
  .online img { bottom: -10px; left: 10px; }

  /* メディア */
  .media { padding: 30px 0; position: relative; display: flex; }
  .media-head { border-radius: 10px 0 0 10px; width: 435px; padding: 0 40px; border-right: 2px solid var(--color-border-light); }
  .media-body { padding: 0 40px; width: 805px; }
  .media-body .btn-wh { width: 280px; font-size: 1.6rem; }

  /* dojoNavi */
  .dojoNavi .imgSet-wrap { margin-top: 60px; align-items: center; }
  .dojoNavi .imgSet-movie, .mv-img .imgSet-movie { width: 100%; }
  .dojoNavi .imgSet-txt { padding-left: 50px; width: 624px; }
  .dojoNavi-set { display: flex; justify-content: space-between; }
  .dojoNavi-item:nth-of-type(1) { width: 460px; margin-right: 70px; }
  .dojoNavi .contact-btn { display: flex; }
  .dojoNavi .contact-btn-head { border-radius: 10px 0 0 10px; width: 470px; padding: 0 65px; }
  .dojoNavi .contact-btn-body { width: 730px; display: flex; justify-content: space-between; }
  .dojoNavi .contact-btn-body a { width: 285px; }

  /* メリット */
  .merit .merit-img::after { min-height: 550px; top: -11vw; }
  .merit .merit-img .c-picture.rwd_disp_ox { width: 1006px; display: inline-block !important; }
  /* DB本文(ACF)側でrwd_disp_ox/xoクラスが付かない場合のフォールバック:
     .merit-img直下は1枚目=PC用/2枚目=SP用の順で出力されるため構造セレクタで対応 */
  .merit .merit-img > img:first-child { width: 1006px; display: inline-block !important; }
  .merit .merit-img > img:last-child { display: none !important; }
  .merit-circle, .merit-circle > div { margin-top: 50px; margin-bottom: 30px; }
  .merit .rate div { width: 320px; }
  .merit .rate div:nth-of-type(n+4) { margin-top: 20px; }
  .merit .rate div + div:not(:nth-of-type(4)) { margin-left: 20px; }
  .merit .rate + .btn-wh { width: 320px; }
  .merit .other-service ul { display: flex; }
  .merit .other-service ul li { display: flex; flex-wrap: wrap; justify-content: center; }
  .merit .other-service ul a { width: 320px; align-self: flex-end; }

  /* CTAボックス */
  .contact-btn-w {
    background: linear-gradient(90deg, rgba(230,0,18,1) 0%, rgba(230,0,18,1) 47%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 100%);
  }
  .contact-btn-w .site-wrap { display: flex; }
  .contact-btn-w-head { width: 580px; }
  .contact-btn-w-body { width: 660px; padding-left: 30px; }
  .contact-btn-w-body > a { width: 270px; }

  /* 機能 */
  .feature-wrap + .btn-wh { width: 320px; }
  .feature-item { width: 535px; }
  .feature-item:nth-of-type(n+3) { margin-top: 30px; }

  /* 価格 */
  .price-content { padding: 50px; }
  .price-content > p { font-size: 1.6rem; margin-bottom: 30px; }
  .price-item:nth-of-type(1) { width: 500px; }
  .price-item-head { padding: 30px 0; font-size: 1.6rem; }
  .price-item-head p { font-size: 4.2rem; margin-top: 10px; }
  .price-item-body { padding: 30px; font-size: 1.6rem; }
  .price-item-body li { font-size: 1.4rem; }
  .price-item-body p { font-size: 4.2rem; margin-top: 10px; }
  .price .icon-plus { margin: 0 30px 40px; }

  /* 事例 */
  .case .biz { display: flex; align-items: center; justify-content: space-between; }
  .ttl-r-box .ttl { margin: 0 30px 0 0; }
  .ttl-r-box .ttl::before { left: -40px; }
  .col4-box + .btn-wh { width: 320px; }
  .col4-box .box-item { width: calc((100% / 4) - 25px); }
  .col4-box .box-item + .box-item { margin-left: 25px; }

  /* サポート */
  .support-set { margin-bottom: 80px; position: relative; }
  .support-set .txt { text-align: center; }
  .support-set-img { width: 280px; position: absolute; right: 0; bottom: 0; }
  .support-wrap { display: flex; justify-content: space-between; }
  .support-wrap + .btn-wh { width: 420px; }
  .support-item { width: calc((100% / 2) - 30px); }
  .support-item:nth-of-type(2) .txt { text-align: center; }

  /* お問い合わせ */
  .contact-wrap { display: flex; justify-content: space-between; }
  .contact-item { display: flex; flex-wrap: wrap; justify-content: center; width: 340px; padding: 50px 25px; }
  .contact-item > a.btn-re + .btn-wh { margin-top: 20px; }

} /* end @media (min-width: 768px) */

/* ================================================================
   15. メディアクエリ: SP (max-width: 767px)
   ================================================================ */

@media (max-width: 767px) {

  .rwd_disp_xo { display: block !important; }

  section { padding-top: var(--section-padding-sp); padding-bottom: var(--section-padding-sp); }

  .column .col-box .box-item h3 { font-size: 14px; margin-bottom: 5px; }

  /* MV */
  .mv { padding: 15px 0 40px; padding-top: 20px; }
  .mv-inner { flex-wrap: wrap; flex-direction: column; align-items: center; }
  .mv .award { margin-right: -5px; margin-left: -5px; margin-bottom: 5vw; text-align: center; order: -3; display: flex; justify-content: center; align-items: center; }
  .mv-img01, .mv-img02,
  .mv-img .award img { margin-right: 5px; margin-left: 5px; }
  .mv-img { display: contents; }
  .mv-img a { font-size: 3.4658vw; margin-top: 5vw; width: calc((100% / 2) - 2vw); }
  .mv-img a + a { margin-left: 2vw; }
  .mv-txt { padding-top: 5vw; display: contents; }
  .mv-txt ul { justify-content: space-between; margin-bottom: 4vw; width: 100%; }
  .mv-txt ul li { font-size: 3.4658vw; padding: 4vw 0; width: calc((100% / 3) - 1vw); box-sizing: border-box; }
  .mv-txt .heading_text { font-size: 6.665vw; margin-bottom: 4vw; }

  /* オンライン */
  a.online { margin: 8vw auto 0; order: 3; }
  .online h2 { font-size: 4.7988vw; margin-bottom: 3vw; }
  .online-txt { padding: 8vw 5vw; }
  .online-txt br { display: none; }
  .online img { width: 30vw; top: -8vw; right: 0; }
  .online .txt-more { font-size: 3.7324vw; height: 8vw; width: 50vw; background-size: 4px 8px; }

  /* メディア */
  .media { padding: 0 5vw; }
  .media-head { font-size: 19px; border-bottom: 2px solid var(--color-border-light); padding: 8vw 5vw; width: 100%; position: relative; justify-content: center; }
  .media-head::before { width: 22vw; height: 22vw; left: -7vw; }
  .media-body { flex-direction: column; width: 100%; padding: 8vw 0; }
  .media-body p { font-size: 15px; }
  .media-body .btn-wh { margin-top: 8vw; }

  /* dojoNavi */
  .dojoNavi .deco02 { z-index: -1; }
  .dojoNavi .imgSet-wrap { flex-wrap: wrap; margin-top: 10vw; }
  .dojoNavi .imgSet-movie, .mv-img .imgSet-movie { width: 100%; order: 2; }
  .dojoNavi .imgSet-movie video, .mv-img .imgSet-movie video, .mv-img .imgSet-movie iframe { width: 100%; height: 190px; }
  .mv-img .imgSet-movie iframe { width: 100%; height: 190px; }
  .dojoNavi .imgSet-txt { display: contents; }
  .dojoNavi .imgSet-txt .txt { order: 3; margin-top: 8vw; }
  .dojoNavi .imgSet-txt h2 { font-size: 6.9316vw; margin-bottom: 8vw; order: 1; }
  .dojoNavi .imgSet-txt .btn-wh { order: 4; width: 100%; margin-top: 8vw; }
  .dojoNavi .deco-txt { font-size: 4.7988vw; text-align: center; }
  .dojoNavi-item { padding: 8vw 5vw; }
  .dojoNavi-item span { width: 25vw; height: 25vw; left: -5vw; top: -10vw; font-size: 3.999vw; }
  .dojoNavi-item .txt { margin-top: 5vw; }
  .dojoNavi-item:nth-of-type(1) { margin-bottom: 15vw; }
  .dojoNavi-item:nth-of-type(2) > div { width: 44vw; }
  .dojoNavi-item:nth-of-type(2) > div + div { margin-left: 8vw; }
  .dojoNavi-item:nth-of-type(2) > div + div::before { left: -5vw; width: 10px; height: 8px; }
  .dojoNavi .contact-btn-head { border-radius: 10px 10px 0 0; padding: 8vw 5vw; font-size: 5.332vw; }
  .dojoNavi .contact-btn-body { padding: 8vw 5vw; }
  .dojoNavi .contact-btn-body a + a { margin-top: 5vw; }

  /* メリット */
  .merit { padding: 45vw 0 0; }
  .merit-lead { font-size: 4.7988vw; margin-bottom: 5vw; padding: 0 5vw; }
  .merit-arrow { padding-bottom: 15vw; }
  .merit .merit-img { background: var(--color-bg-white); }
  .merit .merit-img::after { bottom: -18vw; }
  .merit .merit-img img { width: 100%; }
  /* DB本文(ACF)側でrwd_disp_ox/xoクラスが付かない場合のフォールバック */
  .merit .merit-img > img:first-child { display: none !important; }
  .merit .merit-img > img:last-child { display: block !important; }
  .merit-circle > div, .merit-circle > div > div { width: 30vw; height: 30vw; min-height: 30vw; font-size: 3.1992vw; margin-top: 25vw; margin-bottom: 8vw; }
  .merit-circle > div img, .merit-circle > div > div img { height: 8vw; margin-bottom: 3vw; }
  .merit-circle > div + div, .merit-circle > div > div + div { margin-left: 1vw; }
  .merit-circle > div .txt { line-height: 1.5; }
  .merit .rate { margin: 8vw auto; }
  .merit .rate div { width: 100%; padding: 5vw 2vw; font-size: 4.2656vw; box-sizing: border-box; }
  .merit .rate div + div { margin-top: 2vw; }
  .merit .rate .ft-re { font-size: 7.4648vw; margin: 0 1vw; }
  .merit .rate .ft-re span { font-size: 3.999vw; }
  .merit .other-service { padding: 15vw 8vw 8vw; margin-top: 25vw; }
  .merit .other-service .ttl-m { font-size: 5.332vw; margin-bottom: 8vw; line-height: 1.5; }
  .merit .other-service .icon-plus { width: 20vw; height: 20vw; top: -10vw; }
  .merit .other-service .icon-plus::before, .merit .other-service .icon-plus::after { width: 6vw; }
  .merit .other-service ul li + li { margin-top: 8vw; padding-top: 8vw; border-top: 1px solid var(--color-border-gray); }
  .merit .other-service ul li:nth-of-type(3) { margin-top: 8vw; padding-top: 0; }
  .merit .other-service ul img { height: 15vw; margin: 5vw 0; }

  /* CTAボックス */
  .contact-btn-w .site-wrap { padding: 0; width: 100%; }
  .contact-btn-w-head { background: var(--color-primary); padding: 8vw 5vw; font-size: 5.332vw; }
  .contact-btn-w-body { padding: 8vw 5vw; }
  .contact-btn-w-body > a.btn-re { width: 100%; }
  .contact-btn-w-body > a.btn-wh { margin-top: 2vw; }

  /* 機能 */
  .feature { padding: 15vw 0; }
  .feature-wrap + .btn-wh { margin: 8vw auto 0; width: 90%; }
  .feature-item { width: 100%; padding: 8vw; }
  .feature-item + .feature-item { margin-top: 20px; }
  .feature-item + div { margin-top: 5vw; }
  .feature-item span { font-size: 7.998vw; }
  .feature-item h3 { font-size: 4.7988vw; margin: 5vw 0; }
  .feature-item-inner { padding: 0 0 8vw; }

  /* 価格 */
  .price { padding: 15vw 0; }
  .price-content { padding: 5vw; }
  .price-content > p { margin-bottom: 18px; line-height: 1.8; }
  .price-wrap { flex-direction: column; align-items: center; }
  .price-item { width: 100%; }
  .price-item-head { padding: 5vw 0; }
  .price-item-head p { font-size: 6.3984vw; margin-top: 2vw; }
  .price-item-body { padding: 5vw; text-align: left; }
  .price-item-body li { display: block; line-height: 1.5; text-indent: -7px; padding-left: 7px; }
  .price-item-body li::before { align-self: baseline; display: inline-block; vertical-align: 3px; }
  .price-item-body p { font-size: 6.3984vw; margin-top: 2vw; }
  .price .icon-plus { width: 15vw; height: 15vw; margin: 5vw 0; }
  .price .icon-plus::before, .price .icon-plus::after { width: 5vw; }

  /* 事例 */
  .case { padding: 15vw 0; }
  .case .biz { margin-top: 10vw; padding: 8vw 5vw; }
  .case .biz-txt > span { font-size: 3.7324vw; }
  .case .biz-txt p { font-size: 4.7988vw; }
  .case .biz-movie { margin-top: 8vw; }
  .case .biz-movie video { height: auto; }
  .case .biz-movie img { width: 26vw; right: -10vw; bottom: -8vw; }
  .ttl-r-box .ttl { text-align: left; }
  .ttl-r-box .ttl::before { left: 35px; top: 21px; }
  .col4-box { margin-top: 10vw; flex-wrap: wrap; }
  .col4-box .box-item { width: calc((100% / 2) - 2vw); }
  .col4-box .box-item:nth-of-type(even) { margin-left: 2vw; }
  .col4-box .box-item:nth-of-type(n + 3) { margin-top: 2vw; }
  .col4-box .box-item-img { height: 35vw; }
  .col4-box .box-item p { padding: 5vw; }

  /* コラム */
  .column { padding: 15vw 0; }
  .column .col-box { flex-flow: column; margin-top: 0; }
  .column .col-box .box-item { width: 100%; margin: 0 0 20px; align-items: flex-start; }

  /* サポート */
  .support { padding: 15vw 0; }
  .support-set { margin-bottom: 5vw; display: flex; }
  .support-set .txt { width: 65vw; }
  .support-set-img { min-width: 30vw; width: 30vw; }
  .support-wrap { flex-direction: column; gap: 60px; }
  .support-wrap + .btn-wh { margin: 8vw auto 0; }
  .support-item { width: 100%; }
  .support-item + .support-item { margin-top: 15vw; }
  .support-item .icon { width: 20vw; height: 20vw; top: -10vw; }
  .support-item .icon img { height: 7vw; }
  .support-item h3 { font-size: 4.7988vw; }

  /* お問い合わせ */
  .contact { padding: 15vw 0; }
  .contact .ttl { line-height: 1.5; }
  .contact-wrap { flex-direction: column; gap: 20px; }
  .contact-item { width: 100%; padding: 8vw 5vw; }
  .contact-item + .contact-item { margin-top: 5vw; }
  .contact-item h3 { font-size: 4.7988vw; margin-bottom: 8vw; }
  .contact-item > a.btn-re + .btn-wh { margin-top: 5vw; }

} /* end @media (max-width: 767px) */