@charset "UTF-8";
/*
  Dojo Navi — ユーティリティ / 共通パーツ
  ==============================================================
  統合元: utility.css + utility_pc.css + utility_sp.css
  依存: vars.css を先に読み込むこと

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

  目次:
    1. 表示切替
    2. テキストユーティリティ
    3. セクションタイトル（.ttl）
    4. アイコン（.i-*）
    5. ボタン（.btn-re / .btn-wh / .btn-bk）
    6. デコテキスト（.deco-txt）
    7. テーブル（.dl-table-style / .table-style）
    8. フォーム入力
    9. フリーダイヤル（.freedial）
   10. アニメーション（fadeIn）
   11. picture（.c-picture）
   12. パンくず（.breadcrumb）
   13. メディアクエリ: PC
   14. メディアクエリ: SP
  ==============================================================
*/

/* ================================================================
   1. 表示切替
   ================================================================ */

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

/* ================================================================
   2. テキストユーティリティ
   ================================================================ */

.site-wrap { margin-left: auto; margin-right: auto; }
.clearfix::after, .clearfix::before { content: ''; display: block; clear: both; }
.img { width: 100%; }
.indent { text-indent: -0.6em; margin-left: 0.6em; }
.txt { line-height: 1.8; }
.underline { color: var(--color-text); }
.underline:link { text-decoration: underline; }
.fit-cover { object-fit: cover; width: 100%; height: 100%; }

/* テキストマーカー（黄色） */
.c-marker {
  background: linear-gradient(transparent 80%, var(--color-highlight) 80%);
}

/* ================================================================
   3. セクションタイトル（.ttl）
   ================================================================ */

/*
  構造: ::before に data-txt 属性の大きな薄文字を背景として配置
  色はセクションごとに .ttl::before { color: } で上書き
*/
.ttl {
  font-size: 3.6rem;
  position: relative;
  padding-top: 35px;
  text-align: center;
  margin-bottom: 80px;
  z-index: 2;
}
.ttl::before {
  content: attr(data-txt);
  font-size: 6.4rem;
  font-weight: bold;
  position: absolute;
  top: 0; left: 0; right: 0;
  margin: auto;
  z-index: -1;
}
.ttl.or::before  { color: var(--color-bg-cream); }   /* クリーム */
.ttl.bl::before  { color: var(--color-accent); }   /* 青灰 */
.ttl.or-d::before{ color: var(--color-border-cream); }   /* 濃クリーム */

/* ================================================================
   4. アイコン（.i-*）
   ================================================================ */

.i-arrow-d::after,
.i-arrow-d-bt::after {
  content: '';
  background: url(../images/common/icon-arrow-d.png) no-repeat center/contain;
  width: 16px; height: 12px;
  display: inline-block;
  margin-left: 5px;
}
.i-arrow-d-bt::after { transform: rotate(90deg); margin: 0 0 0 20px; }

.i-arrow-wh::after {
  content: '';
  background: url(../images/common/icon-arrow-wh.png) no-repeat center/contain;
  width: 7px; height: 12px;
  display: inline-block;
  margin-right: 10px;
}

.i-mail::before {
  content: '';
  background: url(../images/common/icon-mail-wh.png) no-repeat center/contain;
  width: 28px; height: 24px;
  display: inline-block;
  margin-right: 5px;
}
.i-mail-bk::before {
  content: '';
  background: url(../images/common/icon-mail-bk.png) no-repeat center/contain;
  width: 24px; height: 20px;
  display: inline-block;
  margin-right: 5px;
}

.i-freedial::before {
  content: '';
  background: url(../images/common/icon-freedial.png) no-repeat center/contain;
  width: 35px; height: 21px;
  display: inline-block;
}
.i-freedial-gr::before {
  content: '';
  background: url(../images/common/icon-freedial-gr.png) no-repeat center/contain;
  width: 35px; height: 21px;
  display: inline-block;
}

.i-board::before {
  content: '';
  background: url(../images/common/icon-board.png) no-repeat center/contain;
  width: 18px; height: 22px;
  margin-right: 5px;
  display: inline-block;
}
.i-login::before {
  content: '';
  background: url(../images/common/icon-login.png) no-repeat center/contain;
  width: 20px; height: 22px;
  margin-right: 3px;
  display: inline-block;
}

.i-check-bk::before {
  content: '';
  background: url(../images/common/icon-check-bk.png) no-repeat center/contain;
  width: 21px; height: 15px;
  margin-right: 5px;
  display: inline-block;
}
.i-check-wh::before {
  content: '';
  background: url(../images/common/icon-check-wh.png) no-repeat center/contain;
  width: 24px; height: 18px;
  margin-right: 5px;
  display: inline-block;
}

.i-download::before {
  content: '';
  background: url(../images/common/icon-download.png) no-repeat center/contain;
  width: 20px; height: 20px;
  margin-right: 5px;
  display: inline-block;
}

.i-link-bk::before {
  content: '';
  background: url(../images/common/icon-link-bk.png) no-repeat center/contain;
  display: inline-block;
}
.i-link-wh::before {
  content: '';
  background: url(../images/common/icon-link-wh.png) no-repeat center/contain;
  display: inline-block;
}

.i-partner::before {
  content: '';
  background: url(../images/common/icon-partner.png) no-repeat center/contain;
  width: 22px; height: 22px;
  margin-right: 5px;
  display: inline-block;
}

.i-pdf-wh::before {
  content: '';
  background: url(../images/common/ico_pdf_wh.png) no-repeat center/contain;
  display: inline-block;
}

.i-arrow-r, .i-arrow-bt { position: absolute; right: 20px; }
.i-arrow-r::before, .i-arrow-bt::before {
  content: '';
  background: url(../images/common/icon-arrow.png) no-repeat center/contain;
  width: 22px; height: 22px;
  margin-left: 5px;
  display: inline-block;
}
.i-arrow-bt::before { transform: rotate(90deg); }

/* ================================================================
   5. ボタン
   ================================================================ */

/* プライマリ（赤塗り）: height 60px / border-radius 70px */
.btn-re {
  height: 60px;
  border-radius: 70px;
  padding: 0 40px;
  box-sizing: border-box;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: var(--color-primary);      /* #e60012 */
  color: var(--color-text-white);
  font-size: 1.6rem;
  font-weight: bold;
  transition: 0.3s;
}
.btn-re:hover { background: var(--color-primary-hover); }   /* var(--color-primary-hover) */

/* アウトライン（白・黒枠）: height 60px */
.btn-wh {
  height: 60px;
  border-radius: 70px;
  padding: 0 40px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);   /* #202020 */
  color: var(--color-text);
  font-size: 1.6rem;
  font-weight: bold;
  background: var(--color-bg-white);
  position: relative;
  transition: 0.3s;
}
.btn-wh:hover { background: var(--color-primary-light); }   /* var(--color-primary-light) */

/* フォーム送信ボタン */
#submit-btn,
.form-submit-btn input[type="submit"] {
  background: var(--color-primary) url(../images/common/icon-arrow-wh.png) no-repeat center right 30px/12px;
  border-radius: 50px;
  color: var(--color-text-white);
}
#submit-btn:hover,
.form-submit-btn input[type="submit"]:hover {
  background: var(--color-primary-hover) url(../images/common/icon-arrow-wh.png) no-repeat center right 30px/12px;
}
input[type="submit"]:disabled {
  cursor: auto;
  background: var(--color-border-gray) url(../images/common/icon-arrow-wh.png) no-repeat center right 30px/12px !important;
}

/* 戻るボタン */
.submit-back { background: var(--color-border-gray) !important; margin-right: 10px; }
.submit-back:hover { background: var(--color-bg-hover-gray) !important; }
#submit-back, .submit-back { background: var(--color-border-gray); border-radius: 50px; }

/* ================================================================
   6. デコテキスト（.deco-txt）
   ================================================================ */

/* 斜め縦線に挟まれたテキスト */
.deco-txt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  margin: 0 0 100px;
  padding-top: 100px;
}
.deco-txt::before, .deco-txt::after {
  content: '';
  width: 2px; height: 7.6rem;
  background: var(--color-text);
  display: block;
}
.deco-txt::before { transform: rotate(-25deg); margin-right: 40px; }
.deco-txt::after  { transform: rotate(25deg);  margin-left: 40px; }

/* ================================================================
   7. テーブル（.dl-table-style / .table-style）
   ================================================================ */

.dl-table-style {
  border-top: 4px solid var(--color-bg-gray);
  border-bottom: 4px solid var(--color-bg-gray);
}
.dl-table-style dl { padding: 40px 0; }
.dl-table-style dl + dl { border-top: 4px solid var(--color-bg-gray); }
.dl-table-style dl dt { position: relative; font-weight: bold; }

/* 必須ラベル */
.dl-table-style dl dt.required::before {
  content: '必須';
  font-size: 1.3rem;
  padding: 8px 10px;
  border-radius: 5px;
  background: var(--color-primary);   /* #e60012 */
  color: var(--color-text-white);
  position: absolute;
  right: 20px;
}
/* 任意ラベル */
.dl-table-style dl dt.any::before {
  content: '任意';
  font-size: 1.3rem;
  padding: 8px 10px;
  border-radius: 5px;
  background: var(--color-bg-label);
  color: var(--color-text-label);
  position: absolute;
  right: 20px;
}
.dl-table-style dl dd { font-weight: normal; line-height: 1.8; }
.dl-table-style dl dd p { display: flex; align-items: center; }
.dl-table-style dl dd p input { margin: 0 5px 0 0; }
.dl-table-style dl dd p + p { margin-top: 15px; }
.dl-table-style dl dd .btn-wh { padding-right: 50px; margin: 20px auto 0; }
.dl-table-style dl dd .txt { margin: 10px 0; }

.mw_wp_form_confirm .group-mailaddress .mail_address {
  font-weight: bold;
  font-size: 150%;
}

/* テーブル */
.table-style { background: var(--color-bg-white); border: 1px solid var(--color-border-light); }
.table-style td, .table-style th { padding: 20px; }
.table-style th { background: var(--color-bg-table-header); }

/* ================================================================
   8. フォーム入力
   ================================================================ */

input, select, textarea {
  padding: 12px 15px;
  border-radius: 5px;
  box-sizing: border-box;
  border: 1px solid var(--color-border-input);
  font-family: inherit;
}
select { padding-right: 30px; }
textarea { width: 500px; height: 150px; }
input[type="text"],
input[type="tel"],
input[type="email"] { width: 400px; }
input[type="text"].input-w50p,
input[type="tel"].input-w50p,
input[type="email"].input-w50p { width: 200px; }

/* ================================================================
   9. フリーダイヤル（.freedial）
   ================================================================ */

.freedial, .i-freedial-gr { font-size: 4rem; letter-spacing: 0; }
.freedial span, .i-freedial-gr span { font-size: 1.2rem; display: block; text-align: right; }
.freedial a, .i-freedial-gr a { color: var(--color-text); }

/* ================================================================
   10. アニメーション
   ================================================================ */

@keyframes fadeIn {
  100% { opacity: 1; }
}

/* ================================================================
   11. picture（.c-picture）
   ================================================================ */

.c-picture { display: block; }
.download .c-picture img {
  border-radius: 5px;
  box-shadow: 1px 1px 5px var(--color-shadow-gray);
}
.download .c-picture.img { position: relative; }
.download .c-picture.img.new::after {
  content: '';
  display: block;
  background: url(../images/common/ico_new.png);
  width: 60px; height: 60px;
  position: absolute;
  top: -10px; right: 5px;
  background-size: 60px 60px;
}

/* ================================================================
   12. パンくず
   ================================================================ */

.breadcrumb { border-bottom: 1px solid var(--color-border-light); padding: 8px 0; }
.breadcrumb ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
}
.breadcrumb li { font-size: 1.4rem; }
.breadcrumb li a:hover { opacity: 0.7; }
.breadcrumb li + li { margin-left: 24px; position: relative; }
.breadcrumb li + li::before {
  content: '';
  display: inline-block;
  width: 5px; height: 10px;
  position: absolute; left: -16px; top: 3px;
  background: url(../images/common/icon-arrow-bk.png) no-repeat center/contain;
}

/* ================================================================
   13. メディアクエリ: PC
   ================================================================ */

@media (min-width: 768px) {
  .rwd_disp_ox { display: block !important; }

  .site-wrap { width: 1100px; }

  /* アイコン */
  .i-freedial::before { margin-right: 5px; }
  .i-freedial-gr::before { margin-right: 5px; }
  .i-link-bk::before { width: 18px; height: 18px; margin-left: 18px; }
  .i-link-wh::before { width: 16px; height: 16px; margin-left: 15px; }
  .i-pdf-wh::before { width: 35px; height: 16px; margin-left: 12px; vertical-align: middle; }

  /* ボタン */
  .btn-re:hover { background: var(--color-primary-hover); }
  .btn-wh:hover { background: var(--color-primary-light); }
  #submit-btn, .form-submit-btn input[type="submit"] { padding: 20px 80px; font-size: 2.0rem; }
  #submit-back + input, .submit-back + input { margin-left: 40px; }

  /* テーブル */
  .dl-table-style dl { display: flex; font-weight: normal; }
  .dl-table-style dl dt { width: 285px; }
  .dl-table-style dl dd { width: calc(100% - 285px); padding-left: 20px; box-sizing: border-box; }
  .table-style td, .table-style th { border: 1px solid var(--color-border-light); }
  .table-style th { width: 220px; }

  /* フリーダイヤル */
  .freedial, .i-freedial-gr { width: 324px; }
} /* end PC */

/* ================================================================
   14. メディアクエリ: SP
   ================================================================ */

@media (max-width: 767px) {
  .rwd_disp_xo { display: block !important; }
  .rwd_disp_ox { display: none !important; }

  .site-wrap { width: 90%; }

  .deco-txt { padding-top: 60px; margin-bottom: 60px; }
  .deco-txt::before, .deco-txt::after { height: 5rem; }
  .deco-txt { margin: 15vw 0; }
  .deco-txt::before { margin-right: 8vw; }
  .deco-txt::after { margin-left: 8vw; }

  .ttl { font-size: 7.998vw; padding-top: 8vw; margin-bottom: 10vw; }
  .ttl::before { font-size: 5.33vw; }

  /* アイコン */
  .i-arrow-d::after, .i-arrow-d-bt::after { width: 12px; height: 8px; }
  .i-arrow-wh::after { width: 5px; height: 6px; margin-right: 1vw; }
  .i-mail::before { width: 5vw; height: 3vw; }
  .i-mail-bk::before { width: 5vw; height: 3vw; }
  .i-freedial::before { width: 28px; height: 14px; }
  .i-freedial-gr::before { width: 28px; height: 14px; }
  .i-board::before { width: 14px; height: 18px; }
  .i-login::before { width: 16px; height: 18px; }
  .i-check-bk::before { width: 4vw; height: 2vw; }
  .i-check-wh::before { width: 4vw; height: 2vw; }
  .i-download::before { width: 3vw; height: 3vw; }
  .i-link-bk::before { width: 2.5vw; height: 2.5vw; margin-left: 1vw; }
  .i-link-wh::before { width: 2.5vw; height: 2.5vw; margin-left: 1vw; }
  .i-pdf-wh::before { width: 5.5vw; height: 2.5vw; margin-left: 1vw; vertical-align: middle; }
  .i-arrow-r, .i-arrow-bt { right: 5vw; }
  .i-arrow-r::before, .i-arrow-bt::before { width: 15px; height: 15px; }

  /* ボタン */
  .btn-re { padding: 0 2vw; width: 100%; height: 13vw; font-size: 3.4658vw; }
  .btn-wh { padding: 0 2vw; width: 100%; height: 13vw; font-size: 3.4658vw; }
  #submit-btn, .form-submit-btn input[type="submit"] { padding: 3vw 8vw; font-size: 4.2656vw; background-size: 6px; }
  #submit-back, .submit-back { padding: 3vw 8vw; font-size: 4.2656vw; }
  .submit-back { margin-right: 0; }
  #submit-back + input, .submit-back + input { margin-top: 2vw; }

  /* テーブル */
  .dl-table-style dl { padding: 8vw 0; }
  .dl-table-style dl dt {
    font-size: 4.2656vw;
    padding-bottom: 8vw;
    display: flex;
    align-items: center;
  }
  .dl-table-style dl dt.required::before { font-size: 2.666vw; right: 0; }
  .dl-table-style dl dt.any::before { font-size: 2.666vw; right: 0; }
  .dl-table-style dl dd .btn-wh { width: 100%; height: auto; margin: 5vw auto 0; padding: 5vw; }

  /* フォーム入力 */
  textarea { width: 100%; }
  input[type="text"], input[type="tel"], input[type="email"] { width: 100%; }

  /* フリーダイヤル */
  .freedial, .i-freedial-gr { font-size: 5.8652vw; }
  .freedial span, .i-freedial-gr span { font-size: 2.666vw; margin-bottom: 2vw; }

  /* テーブルスタイル */
  .table-style tr { display: flex; flex-direction: column; }
  .table-style td, .table-style th { padding: 5vw; width: 100%; box-sizing: border-box; }
} /* end SP */