@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);
  }
}


/*------------ トップ：お知らせ ＋ 鍵のコラム（2カラム） ----------------*/
/*
 * 2026-09-02 追加。従来はお知らせだけを画像付き3カードで出していたが、
 * ブログ(鍵のコラム)46件がどこからもリンクされず埋もれていたため、
 * 左＝お知らせ／右＝コラム の2カラムに統合した。
 * コラムは46件中37件がアイキャッチ無しなので、両方とも日付＋タイトルのリストで揃える。
 */

.p-feed {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  text-align: left;
}

.p-feed__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 2px solid #ffc107;
  margin-bottom: 4px;
}

.p-feed__ttl {
  margin: 0;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.3;
}

.p-feed__en {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: .18em;
  color: #b0b0b0;
}

.p-feed__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-feed__item {
  border-bottom: 1px solid #e9e9e9;
}

.p-feed__link {
  display: block;
  padding: 16px 2px;
  text-decoration: none;
  color: #181818;
  transition: .2s;
}

.p-feed__link:hover {
  color: #b58900;
  text-decoration: none;
}

.p-feed__date {
  display: block;
  font-size: 12px;
  font-weight: bold;
  color: #9a9a9a;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.p-feed__name {
  display: block;
  font-size: 15px;
  line-height: 1.7;
}

.p-feed__empty {
  padding: 24px 2px;
  color: #999;
  font-size: 14px;
}

.p-feed__more {
  margin-top: 26px;
}

/* テーマの .c-btn は display:block なので、幅を持たせすぎないよう調整 */
.p-feed__more .c-btn {
  display: inline-block;
  min-width: 240px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .p-feed {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .p-feed__ttl {
    font-size: 20px;
  }

  .p-feed__name {
    font-size: 14px;
  }

  .p-feed__more .c-btn {
    min-width: 100%;
  }
}


/*------------ コラム記事下の導線 ----------------*/
/*
 * 2026-09-02 追加。コラム記事は本文で終わっており、読み終えた人の行き先が
 * グローバルナビしか無かった（記事内の内部リンク=0）。
 * 関連コラム3件と、コラム一覧・対応エリアへの導線を置く。
 */

.p-colnext__ttl {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: bold;
  text-align: left;
}

.p-colnext__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}

.p-colnext__item {
  border-bottom: 1px solid #e4e4e4;
}

.p-colnext__item:first-child {
  border-top: 1px solid #e4e4e4;
}

.p-colnext__link {
  display: block;
  padding: 16px 4px 16px 22px;
  position: relative;
  color: #181818;
  font-size: 15px;
  line-height: 1.7;
  text-align: left;
  text-decoration: none;
  transition: .2s;
}

.p-colnext__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 4px;
  width: 6px;
  height: 6px;
  border-top: 2px solid #ffc107;
  border-right: 2px solid #ffc107;
  transform: translateY(-50%) rotate(45deg);
}

.p-colnext__link:hover {
  color: #b58900;
  text-decoration: none;
}

.p-colnext__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.p-colnext__btns .c-btn {
  display: inline-block;
  min-width: 250px;
  text-align: center;
}

.p-colnext__btn--sub {
  background-color: #3a3a3a !important;
}

.p-colnext__btn--sub:hover {
  background-color: #5a5a5a !important;
}

@media screen and (max-width: 767px) {
  .p-colnext__ttl {
    font-size: 18px;
  }

  .p-colnext__btns .c-btn {
    min-width: 100%;
  }
}