/* =================================================
   カスタムボタン .btn-primaryを上書き設定（メインのお問い合わせボタン用）
   ================================================= */
.btn-primary {
  color: #FFFFFF;
}
.btn-primary {
  color: #FFFFFF;
  background-color: #007abc;
  border-color: #007abc;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}
.btn-primary:hover {
  color: #FFFFFF;
  background-color: #11b7da;
  border-color: #0faed0;
}
.btn-check:focus + .btn-primary, .btn-primary:focus {
  color: #FFFFFF;
  background-color: #11b7da;
  border-color: #0faed0;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0 rgba(92, 202, 196, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0 rgba(92, 202, 196, 0.5);
}
.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle {
  color: #FFFFFF;
  background-color: #30bbd8;
  border-color: #0faed0;
}
.btn-check:checked + .btn-primary:focus, .btn-check:active + .btn-primary:focus, .btn-primary:active:focus, .btn-primary.active:focus, .show > .btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0 rgba(92, 202, 196, 0.5);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0 rgba(92, 202, 196, 0.5);
}
.btn-primary:disabled, .btn-primary.disabled {
  color: #FFFFFF;
  background-color: #007abc;
  border-color: #007abc;
}

/* =================================================
   カスタムボタン .btn-custom-red-1
   ================================================= */

.btn-custom-red-1 {
  color: #FFFFFF;
}

.btn-custom-red-1 {
  color: #FFFFFF;
  background-color: #CC3333; /* ★基本の背景色 */
  border-color: #CC3333; /* ★基本の枠線の色 */
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn-custom-red-1:hover {
  color: #FFFFFF;
  background-color: #aa2b2b; /* ★ホバー時の背景色 */
  border-color: #992626; /* ★ホバー時の枠線の色 */
}

.btn-check:focus + .btn-custom-red-1, .btn-custom-red-1:focus {
  color: #FFFFFF;
  background-color: #aa2b2b; /* ★フォーカス時の背景色 */
  border-color: #992626; /* ★フォーカス時の枠線の色 */
  /* ★フォーカス時の影の色を赤系に変更 */
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(204, 51, 51, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(204, 51, 51, 0.5);
}

.btn-check:checked + .btn-custom-red-1, .btn-check:active + .btn-custom-red-1, .btn-custom-red-1:active, .btn-custom-red-1.active, .show > .btn-custom-red-1.dropdown-toggle {
  color: #FFFFFF;
  background-color: #992626; /* ★アクティブ時の背景色 */
  border-color: #882222; /* ★アクティブ時の枠線の色 */
}

.btn-check:checked + .btn-custom-red-1:focus, .btn-check:active + .btn-custom-red-1:focus, .btn-custom-red-1:active:focus, .btn-custom-red-1.active:focus, .show > .btn-custom-red-1.dropdown-toggle:focus {
  /* ★アクティブ＆フォーカス時の影の色を赤系に変更 */
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(204, 51, 51, 0.5);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(204, 51, 51, 0.5);
}

.btn-custom-red-1:disabled, .btn-custom-red-1.disabled {
  color: #FFFFFF;
  background-color: #CC3333; /* ★無効時の背景色 */
  border-color: #CC3333; /* ★無効時の枠線の色 */
}


/* =================================================
   カスタムボタン .btn-custom-green-1
   ================================================= */

.btn-custom-green-1 {
  color: #FFFFFF;
}

.btn-custom-green-1 {
  color: #FFFFFF;
  background-color: #009966; /* ★基本の背景色 */
  border-color: #009966; /* ★基本の枠線の色 */
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
}

.btn-custom-green-1:hover {
  color: #FFFFFF;
  background-color: #008055; /* ★ホバー時の背景色 */
  border-color: #00734d; /* ★ホバー時の枠線の色 */
}

.btn-check:focus + .btn-custom-green-1, .btn-custom-green-1:focus {
  color: #FFFFFF;
  background-color: #008055; /* ★フォーカス時の背景色 */
  border-color: #00734d; /* ★フォーカス時の枠線の色 */
  /* ★フォーカス時の影の色を緑系に変更 */
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(0, 153, 102, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(0, 153, 102, 0.5);
}

.btn-check:checked + .btn-custom-green-1, .btn-check:active + .btn-custom-green-1, .btn-custom-green-1:active, .btn-custom-green-1.active, .show > .btn-custom-green-1.dropdown-toggle {
  color: #FFFFFF;
  background-color: #00734d; /* ★アクティブ時の背景色 */
  border-color: #006644; /* ★アクティブ時の枠線の色 */
}

.btn-check:checked + .btn-custom-green-1:focus, .btn-check:active + .btn-custom-green-1:focus, .btn-custom-green-1:active:focus, .btn-custom-green-1.active:focus, .show > .btn-custom-green-1.dropdown-toggle:focus {
  /* ★アクティブ＆フォーカス時の影の色を緑系に変更 */
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(0, 153, 102, 0.5);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.25rem rgba(0, 153, 102, 0.5);
}

.btn-custom-green-1:disabled, .btn-custom-green-1.disabled {
  color: #FFFFFF;
  background-color: #009966; /* ★無効時の背景色 */
  border-color: #009966; /* ★無効時の枠線の色 */
}




/* --- ドロップダウンメニューの共通スタイル --- */
/* 1. まず、メニューを常に非表示＆透明にし、アニメーションの準備をする */
/* この部分はPC・スマホ共通なので、メディアクエリの外に書く */
.dropdown-menu {
  opacity: 0;
  visibility: hidden;
  display: none; /* スマホ時のために display:none に戻す */
  transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}
/* 2. スマホ時にクリックで表示されたとき（.showクラスが付いたとき）のスタイル */
/* これもPC・スマホ共通 */
.dropdown-menu.show {
  display: block; /* 表示する */
  opacity: 1;     /* 不透明にする */
  visibility: visible; /* 見えるようにする */
}

/* --- PCサイズ限定のホバー設定 --- */
/* 3. 画面幅が992px以上のPC表示の時だけ、マウスオーバーの動作を追加する */
@media (min-width: 992px) {
  
  /* PCでは、ドロップダウンメニューを常にブロック要素として存在させておく */
  .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  
  /* PCでは、親要素にマウスオーバーした時にメニューを表示する */
  .dropdown:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
  }
}



/* --- ドロップダウンメニューの見た目カスタマイズ --- */
/* メニュー全体の背景色と枠線を変更 */
.dropdown-menu {
  background-color: #f8f9fa; /* 背景色を少し暗めの白に */
  border: 1px solid #dee2e6; /* 枠線を少し濃いグレーに */
  border-radius: 0.3rem;     /* 角の丸みを少しつける */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* 影を濃くする */
}
/* 各メニュー項目の文字色を変更 */
.dropdown-item {
  color: #212529; /* 文字色を濃いグレーに */
}
/* マウスオーバー時の項目の背景色と文字色を変更 */
.dropdown-item:hover, .dropdown-item:focus {
  background-color: #11b7da; /* 背景色をBootstrapのプライマリーカラーに */
  color: #ffffff;             /* 文字色を白に */
}
/* 区切り線の色を変更 */
.dropdown-divider {
  border-top-color: #ced4da; /* 線の色を少し薄く */
}



.hero-header-form {
  margin-top: 3rem;
  border: 1px solid rgba(94, 220, 212, 0.39);
}
@media (min-width: 540px) {
  .hero-header-form {
    margin-top: 0rem;
  }
}

/* bodyの背景色を上書き */
body {
  background-color: #ffffff;
  background-image: none;
}

/* ナビゲーションバーの背景色を上書き */
.navbar {
  background-color: #ffffff !important;
}

/* --- PC以下のサイズでだけ特定の背景色を付ける --- */
/* 
 * デフォルト（PCサイズ）では何もしない。
 * PCサイズより画面が狭くなった時にスタイルを適用する。
 */
@media (max-width: 991.98px) {
  .sc-mv{
    background-color: #1195dc;
  }
}


.icon-box {  
  background-color: #007abc;
}

.icon-box:hover {
  background-color: #11b7da;
}


@media (min-width: 1140px) {
  .img-shape::before {
    opacity: 0.7;
    background-image: -o-linear-gradient(250deg, #007abc, #007abc);
    background-image: linear-gradient(200deg, #007abc, #007abc);
  }
  .img-shape::after {
    position: absolute;
    content: "";
    height: 10.125rem;
    width: 11rem;
    border-radius: 3.125rem;
    z-index: -1 !important;
    top: 15.3rem;
    left: 25rem;
    border: 1px solid #007abc;
    opacity: 0.5;
    background: transparent;
  }
}

.feature-img {
  border: 1px solid #11b7da;
}


@media (max-width: 991.98px) {
  .sc-pr{
    background-color: #a6d1e8;
  }
}


.circle-wrapper::before {
  border: 1px solid #11b7da;
}

.testimonial-bg {
  background-color: #007abc;
}


.carousel-control-prev,
.carousel-control-next {
  color: #007abc;
}

.carousel-control-prev:hover, .carousel-control-prev:focus,
.carousel-control-next:hover,
.carousel-control-next:focus {
  color: #007abc;
}

.carousel-indicators [data-bs-target] {
  background-color: #007abc;
}

#products{
    background-image: url("../img/parts1.png");
    background-repeat: no-repeat;
    background-position: center bottom;
}

#original{
    background-image: url("../img/parts2.png");
    background-repeat: no-repeat;
    background-position: center top;
}

#cta{
    background-image: url("../img/parts3.png");
    background-repeat: no-repeat;
    background-position: center bottom;
}

/* 自動計算フォーム用CSS */

/* ===== カスタムラジオボタン＆カードヘッダーのための専用CSS ===== */

/* 1. 元のラジオボタンのinput要素を非表示にする */
.form-check-input[type="radio"] {
  display: none;
}

/* 2. ラジオボタンのラベルをボタン風に装飾する */
.label-1 {
  display: block; /* ブロック要素にして全体をクリック可能に */
  cursor: pointer;
  width: 100%;
  padding: 0.75rem 0; /* 上下の余白 */
  margin-top: 0.5rem;   /* ボタン間の余白 */
  text-align: center;
  font-weight: bold;
  border: 1px solid #dee2e6; /* Bootstrapの標準的なボーダー色 */
}

/* 3. 選択されたラジオボタンのラベルのスタイル */
.form-check-input[type="radio"]:checked + .label-1 {
  /* Bootstrapのテーマカラー「info」を透過して使用 */
  background: rgba(13, 202, 240, 0.2);
  border-color: rgba(13, 202, 240, 0.5);
  color: #000;
}

/* 4. 【追加】カードの角丸(.rounded-2)に合わせてヘッダーの角丸も調整する */
.card.rounded-2 > .card-header {
    border-top-left-radius: var(--bs-border-radius-sm);
    border-top-right-radius: var(--bs-border-radius-sm);
}


/* 独自の文字間 */
.tracking-custom-1 {
  letter-spacing: 0.8em;
}

/* 独自のボタンカラースタイル */
.btn-custom-red-1 {
  --bs-btn-bg: #CC3333;
  --bs-btn-border-color: #CC3333;
  --bs-btn-color: #fff;

  --bs-btn-hover-bg: #aa2b2b;
  --bs-btn-hover-border-color: #aa2b2b;
  --bs-btn-hover-color: #fff;

  --bs-btn-active-bg: #992626;
  --bs-btn-active-border-color: #992626;
  --bs-btn-active-color: #fff;
}