@charset "UTF-8";


  body {
    margin: 0 !important;
    padding: 0 !important;
  }




/*ヘッダー部のメニュー*/

  .navbar-light .navbar-nav .nav-link {
    color: #000 !important; /* テキスト色をダークに設定 */
  }
  .navbar-light .navbar-brand {
    color: #000 !important; /* ブランド名の色をダークに設定 */
  }
  .navbar-light .navbar-toggler-icon {
    filter: invert(1); /* ハンバーガーメニューアイコンを黒に変更 */
  }


.navbar-nav {
  gap: 25px; /* メニューリンク間の間隔 */
}

/* ボタンの罫線を削除 */
.dropdown-toggle {
  border: none;
  box-shadow: none;
  background-color: transparent !important;
}

/* ホバー、フォーカス、クリック時の背景色を完全に透明に */
.dropdown-toggle:hover, .dropdown-toggle:focus, .dropdown-toggle:active,
.dropdown-item:hover, .dropdown-item:focus, .dropdown-item:active {
  background-color: transparent !important;
  color: inherit !important;
  outline: none !important;
  box-shadow: none !important;
}

/* プルダウンメニューの背景色を薄くする（透過なし） */
.dropdown-menu {
  background-color: #f0f0f0 !important; /* 薄いグレー */
  position: absolute;
  left: auto;
  right: auto;
  top: 100%;					/* ボタンの下に配置 */
  transform: translateX(-30%);	/* メニューを左に移動 */
  min-width: 160px;				/* メニューの最小幅を設定 */
}

/* メニュー項目のテキスト色を濃くする */
.dropdown-item {
  color: #333 !important;		/* テキストの色を濃いグレーに設定 */
  padding: 10px 20px;			/* パディング調整 */
}

  /* ヘッダー上部全体のスタイル */
  .header-top {
    background-color: transparent; /* 背景色を透明に */
    position: relative; /* 右端リンクの配置基準 */
  }

  /* LiveAuctionリンクのスタイル */
  .live-auction-link {
    color: white; /* テキスト色を白に設定 */
    border: 1px solid white; /* 白い罫線を適用 */
    padding: 5px 10px; /* 内側の余白 */
    text-decoration: none; /* 下線を削除 */
    background-color: transparent; /* 背景色を透明に */
    transition: all 0.3s ease; /* ホバー時のアニメーション */
  }

  /* ホバー時のスタイル */
  .live-auction-link:hover {
    background-color: white; /* 背景色を白に */
    color: #710035; /* テキスト色を#710035に */
  }

  /* 小画面対応 */
  @media (max-width: 992px) {
    .live-auction-link {
      display: none; /* 小画面では非表示 */
    }
  }


  /* ヘッダーの固定スタイル */
  header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1020; /* Bootstrap の z-index を基準 */
    transition: transform 0.4s ease-in-out; /* アニメーション速度を調整 */
  }

  /* ヘッダーが隠れるスタイル */
  .header-hidden {
    transform: translateY(-100%);
  }

  /* main の余白を調整 */
  main {
    padding-top: 0px; /* ヘッダーの高さ分を確保 */
  }


/* ボタンの背景色 */
.btn-original {
  background-color: #710035;
  color: #fff; /* テキストの色 */
  border-color: #710035;
}

.btn-original:hover,
.btn-original:focus {
  background-color: #590029;
  border-color: #590029;
  color: #fff;
}

/* ボタンのアウトラインスタイル */
.btn-outline-original {
  color: #710035;
  border-color: #710035;
  background-color: transparent;
}

.btn-outline-original:hover,
.btn-outline-original:focus {
  background-color: #710035;
  color: #fff;
}

/* テキストの色 */
.text-original {
  color: #710035 !important;
}

/* バッジの色 */
.badge-original {
  background-color: #710035;
  color: #fff;
}

/* 背景色のみのクラス */
.bg-original {
  background-color: #710035 !important;
  color: #fff !important; /* 必要に応じて文字色もセット */
}

/* ボタンのアウトラインスタイル */
.btn-outline-original {
  color: #710035;
  background-color: transparent;
  border: 1px solid #710035;
}

.btn-outline-original:hover,
.btn-outline-original:focus {
  background-color: #710035;
  color: #fff;
  border-color: #710035;
}



/* アイコンにカスタムカラーを適用 */
.text-original {
  color: #710035 !important;
}

/* アイコンのサイズを変更する */
.icon-medium {
  font-size: 1.6rem; /* 必要に応じてサイズを調整 */
}

.icon-2large {
  font-size: 2rem; /* 必要に応じてサイズを調整 */
}

.icon-3large {
  font-size: 3rem; /* 必要に応じてサイズを調整 */
}

.icon-extra-4large {
  font-size: 4rem; /* さらに大きいサイズ */
}


.border-light-secondary {
  border: 1px solid #d5dade; /* light と secondary の中間色 */
}


.container-lg {
    margin-top: 1.5rem; /* mt-4と同等のマージン */
}



/*TOPへ戻る*/
    #scrollToTop {
      position: fixed; /* 画面に固定 */
      bottom: 20px; /* 下から20pxの位置 */
      right: 20px; /* 右から20pxの位置 */
      font-size: 2.5rem; /* アイコンサイズ */
      color: #710035; /* ボタンの基調色 */
      display: none; /* 初期状態で非表示 */
      z-index: 9999; /* 最前面に配置 */
      cursor: pointer; /* ホバー時のカーソル変更 */
      transition: color 0.3s ease; /* 色変更を滑らかに */
    }

    #scrollToTop:hover {
      color: #a8004b; /* ホバー時の色 */
    }
/*TOPへ戻る*/


footer {
	margin-top: 100px;
}




	/*画像エリア*/
	.img-wrapper {
	    position: relative;
	    width: 100%; /* 親幅に応じてサイズを決定 */
	    padding-top: 100%; /* 正方形を確保 */
	    overflow: hidden; /* 枠外のコンテンツを非表示 */
	    background-color: #f0f0f0; /* 背景色を設定（デバッグ用） */
	}

	.img-wrapper img {
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    width: auto; /* デフォルトは無効化 */
	    height: auto; /* デフォルトは無効化 */
	    max-width: 100%; /* 横幅を制限 */
	    max-height: 100%; /* 縦幅を制限 */
	    object-fit: cover; /* 正方形エリア内に収める */
	    transform: translate(-50%, -50%);
	}

	/* リンク全体に適用 */
	.link-wrapper {
	    text-decoration: none; /* リンクの下線を削除 */
	    color: inherit; /* テキスト色を継承 */
	}

	.link-wrapper:hover .img-wrapper img {
	    opacity: 0.7; /* ホバー時に画像を薄く */
	    transition: opacity 0.3s ease; /* なめらかなトランジション効果 */
	}