@charset "UTF-8";

.g-fixarea-footer__item a,
.g-nav .navbar-toggler,
.c-visual-sub .catchcopy-title,
.g-form .agree .mwform-checkbox-field-text {
  white-space: nowrap;
}


.c-numbering__panel:before {
  display: none;
}

.mt100 {
  margin-top: 100px;
}

.c-headline__type5-ttl:before {
  color: #e9e9e9;
}

.g-cta__mail-icon {
  width: 80px;
  height: 80px;
  padding: 0;
}

.g-header__logo-link-img {
  max-width: 150px;
}

.c-visual-type2 .catchcopy-title {
  transform: rotate(0deg);
  text-shadow: 0px 0px 1px #ffc107, 0px 0px 1px #ffc107, 0px 0px 2px #ffc107, 0px 0px 2px #ffc107, 0px 0px 3px #ffc107, 0px 0px 3px #ffc107;
}

.c-visual-type2__image:before {
  content: "";
  background-color: rgba(0, 0, 0, 0.5);
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFElEQVQYV2NkYGD4z8DAwMjIAAUADikBA/gvnngAAAAASUVORK5CYII=);
  background-position: center;
  background-repeat: repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 0.6;
  z-index: 1;
}

.g-header__contact-btn a {
  background-color: #ffc107;
}

.c-btn {
  background-color: #ffc107;
}

.c-shadow-box--kc {
  box-shadow: 10px 10px #00000012;
}

.g-cta__mail-contact-btn {
  background: #3a3a3a;
}

.g-cta__mail-contact-btn:hover {
  background: #7a7a7af5;
}

.g-header {
  position: fixed;
  width: 100%;
}

.fs24 {
  font-size: 24px;
}

.price_table_title {
  position: relative;
  padding: 0.5rem;
  font-size: 24px;
  border-bottom: 5px solid #ffc107;
  text-align: left;
}

.recommend table {
  width: 100%;
}

.recommend tr {
  border: 1px solid #ababab;
  line-height: 40px;
}

.recommend th {
  margin: 0 auto;
  width: 60%;
  border-right: 1px solid #ababab;
  vertical-align: middle;
  text-align: left;
  padding: 1%;
}

.recommend td {
  text-align: left;
  padding: 1%;
}

.option_table {
  text-align: left;
}

.red {
  color: red;
}

.c-after__black--9 {
  background-color: #dba400b0;
}

.c-visual-sub .catchcopy-body {
  margin-left: 0;
}

.c-shadow-box {
  -webkit-box-shadow: 10px 10px #33387b;
  box-shadow: 10px 10px #33387b;
}

.contain {
  background-size: contain !important;
}

.g-form input[type=file] {
  display: inherit;
}

.hours {
  background: #0b430b;
  padding: 50px;
}


@media screen and (max-width: 767px) {
  .price_table_title {
    font-size: 5vw;
  }

  .g-header__logo-link-img {
    width: 70px;
  }

  .hours {
    padding: 5px;
  }
}


/*------------マージン調整----------------*/

.mt30 {
  margin-top: 30px;
}

.mt50 {
  margin-top: 50px;
}

.mb50 {
  margin-bottom: 50px;
}

/*------------ トップ 対応エリア導線 ----------------*/

.p-toparea {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-toparea__item {
  flex: 0 1 210px;
}

.p-toparea__item a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  color: #3a3a3a;
  text-decoration: none;
  transition: .2s;
}

.p-toparea__item a:hover {
  border-color: #ffc107;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
  text-decoration: none;
}

.p-toparea__name {
  font-weight: bold;
}

.p-toparea__km {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .p-toparea__item {
    flex: 1 1 calc(50% - 5px);
  }

  .p-toparea__item a {
    padding: 10px 12px;
    font-size: 14px;
  }
}


/*------------ ヘッダーナビ（PC）の収まり調整 ----------------*/
/*
 * 2026-08-21 対応エリアを追加してナビ項目が8個になったため調整。
 *
 * 元々の問題（対応エリア追加前から潜在的にあったもの）:
 *   1) #g-nav の中に max-width:960px の .container が二重にネストしていて、
 *      幅が足りなくなるとナビが2行に折り返し、さらに .g-header__inner が
 *      flex/space-between のため お問合せボタンがヘッダーの外へ押し出されていた。
 *      （992px幅で実測: ヘッダー右端 987px に対し ボタン右端 1132px ＝画面外）
 *   2) Menu ボタンが position:fixed / right:10px / 幅50px で常に画面右上に居るため、
 *      コンテナの右外側の余白が 60px 未満になる幅では お問合せボタンと重なる。
 *      重なるのは viewport が「コンテナ幅 + 120px」未満のとき＝992〜1079px と 1200〜1259px。
 *
 * 対応: 内側 .container の幅制限を外して1行に収め、
 *       重なる幅のときだけコンテナ右に逃げを取る。
 *       1259px以下は項目が入りきらないので文字と余白を一段詰める。
 */

@media (min-width: 992px) {
  #g-nav {
    min-width: 0;
    margin-right: 8px;
  }

  #g-nav > .container {
    width: auto;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .g-nav__list {
    width: auto;
    flex-wrap: nowrap;
    justify-content: flex-end;
  }

  .g-nav__list .nav-link {
    white-space: nowrap;
    padding: 10px 12px !important;
  }
}

/* 固定Menuボタンと お問合せボタンが重なる幅だけ、コンテナ右に逃げを取る */
@media (min-width: 992px) and (max-width: 1079.98px),
       (min-width: 1200px) and (max-width: 1259.98px) {
  #g-header > .container {
    padding-right: 70px;
  }
}

/* 1259px以下は8項目が入りきらないので一段詰める */
@media (min-width: 992px) and (max-width: 1259.98px) {
  .g-nav__list .nav-link {
    padding: 10px 6px !important;
    font-size: 12px;
    letter-spacing: 0;
  }

  .g-header__logo-link-img {
    max-width: 110px;
  }
}


/*------------ ページ内アンカーが固定ヘッダーに潜らないように ----------------*/
/*
 * 2026-08-21 トップの法人／個人カードから /corp/#s01 等へ飛ぶようにしたため追加。
 * smoothScroll.js に80pxのオフセット処理はあるが、配信中の jquery.common.min.js に
 * バンドルされておらず（実測: 該当コード0件）、実際はブラウザ標準のアンカージャンプ。
 * そのため CSS の scroll-margin-top で逃がす。
 */

#s01,
#s02,
#s03 {
  scroll-margin-top: 130px;
}

@media screen and (max-width: 991.98px) {

  #s01,
  #s02,
  #s03 {
    scroll-margin-top: 100px;
  }
}


/*------------ ローディングのロゴ（設定された場合のみ表示される） ----------------*/
/*
 * 2026-08-21 追加。#loading の中の img は position 指定が無く、
 * 画像が大きいと画面いっぱいに広がってしまうため、中央に小さく置く。
 */

.g-loading-type2__logo {
  position: absolute;
  top: calc(50% - 110px);
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 200px;
  height: auto;
}

@media screen and (max-width: 767px) {
  .g-loading-type2__logo {
    max-width: 150px;
    top: calc(50% - 90px);
  }
}