@charset "utf-8";
/*------------------------------------------------
* Version       : 1.22
* Date          : 2025.11.21
-------------------------------------------------*/

/* pの文字16から17 */
body {
    font-size: 17px;
}


.purchase-status-img {
    height: 170px;
    width: 100%; /* img-fluidと重複しますが、明示的に指定 */
    object-fit: cover; /* 画像の比率を保ったままトリミング */
    object-position: center center; /* 画像を中央でトリミング */
}


/* 最新買取状況の画像高さを統一 */
.purchase-status-img {
    height: 170px;
    width: 100%; /* img-fluidと重複しますが、明示的に指定 */
    object-fit: cover; /* 画像の比率を保ったままトリミング */
    object-position: center center; /* 画像を中央でトリミング */
}


/**********************
トップ買取査定フォーム
**********************/
.assessment-form-container {
    max-width: 800px; /* PCでの最大幅 */
    margin: 1rem auto; /* PCでの中央寄せ */
}

/* (ここから変更 v1.12 & v1.13) */
/* スマホ表示 (フォームと査定状況) の余白調整 */
@media (max-width: 767.98px) {
    /* フォームセクション全体の左右の余白を 15px (半分) に減らす */
    .back-kaitori .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* フォームコンテナ自体のマージンを左右0に */
    .assessment-form-container {
        margin-left: 0;
        margin-right: 0;
    }

    /* (ここから追加 v1.13) */
    /* スマホ表示時、フォーム（card-body）の上の余白（赤丸部分）を広げる */
    .assessment-form-container .card-body {
        padding-top: 2rem; /* デフォルトの1remから広げる */
    }
    /* (ここまで追加 v1.13) */
}
/* (ここまで変更 v1.12 & v1.13) */


.card {
    border: none;
    border-radius: 1rem; /* カードの角を丸く */
    transition: all 0.3s ease-in-out;
}
.card-header {
    background: linear-gradient(to right, #007bff, #00d4ff);
    color: white;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 1.5rem;
}
.input-group-text {
    width: 150px; /* ラベルの幅を固定して揃える */
    font-weight: 600;
    background-color: #e9ecef;
    border-right: 1px solid #ced4da;
}
.form-select {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.step-icon {
    width: 24px;
    text-align: center;
}
.btn-start-assessment {
    font-weight: bold;
    padding: 0.8rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
}
.btn-start-assessment:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
}
.form-label-text {
    margin-left: 0.4rem;
}

.back-kaitori {  
	background-color: #FEFFE3 ; 
}



/**********************
手動で横にスクロール　メーカー車種一覧
**********************/
.maker-scroll-wrapper {
    overflow-x: auto; /* 横スクロールを有効化 */
    flex-wrap: nowrap; /* 折り返さない (全画面幅で適用) */
    -webkit-overflow-scrolling: touch; /* iOSでのスムーズスクロール */

    /* オプション: スクロールバーを非表示にする */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}

.maker-scroll-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

/* スマホ: 2列表示 */
@media (max-width: 767.98px) { /* Bootstrapの md breakpoint (768px) 未満 */
    .maker-scroll-wrapper .maker-item {
        /* gap-4 (1.5rem) の半分 (0.75rem) を引いて2列表示にする */
        flex: 0 0 calc(50% - 0.75rem);
        width: calc(50% - 0.75rem);
        box-sizing: border-box; /* paddingとborderを幅計算に含める */
    }
}


/* (変更) PCスライダーの矢印デザイン調整 (メディアクエリの外に移動) */
.maker-carousel-container .carousel-control-prev,
.maker-carousel-container .carousel-control-next {
    background-color: transparent; /* ボタン自体の背景はなし */
    opacity: 0.6; /* (変更) ボタンを少し透過させる */
    top: 50%;
    width: auto;
    height: auto;
    z-index: 10; /* スクロールコンテンツの上に表示 */
    /* transform は個別に設定 */
    visibility: hidden; /* (変更) JSで制御するため display: none から visibility: hidden に変更 */
    transition: opacity 0.15s ease, visibility 0s; /* (変更) 透過アニメーション (visibilityは即時) */
}

/* (変更) 位置をコンテナの端・中央に調整 (PC/スマホ共通) */
.maker-carousel-container .carousel-control-prev {
    left: 0; /* (変更) コンテナの左端 (paddingの外側) に配置 */
    right: auto;
    transform: translate(-50%, -50%); /* (変更) 縦横中央 */
}
.maker-carousel-container .carousel-control-next {
    right: 0; /* (変更) コンテナの右端 (paddingの外側) に配置 */
    left: auto;
    transform: translate(50%, -50%); /* (変更) 縦横中央 */
}

/* (変更) ホバー時にアイコンを少し薄くする (メディアクエリの外) */
/* (変更) ボタン全体をホバーで不透明にする */
.maker-carousel-container .carousel-control-prev:hover,
.maker-carousel-container .carousel-control-next:hover {
    opacity: 1; 
}

/* (変更) デフォルトのSVGアイコン（<span>）を非表示 (メディアクエリの外) */
.maker-carousel-container .carousel-control-prev-icon,
.maker-carousel-container .carousel-control-next-icon {
    display: none;
}

/* (変更) 追加したBootstrap Icon (<i>) のスタイル (メディアクエリの外) */
.maker-carousel-container .carousel-control-prev i,
.maker-carousel-container .carousel-control-next i {
    color: #555; /* アイコンの色 (グレー) */
    font-size: 2.0rem; /* アイコンのサイズ */
    background-color: #ffffff; /* ★白背景を追加 */
    border-radius: 50%; /* ★円形にする */
    display: block; /* 背景を適用するため */
    line-height: 1; /* アイコンの縦位置を中央揃え */
    transition: opacity 0.15s ease;
    box-shadow: 0 0 5px rgba(0,0,0,0.1); /* わずかな影 */
}


/* PC: 固定幅 (約4〜5個分) で横スクロール */
@media (min-width: 768px) { /* Bootstrapの md breakpoint (768px) 以上 */
    .maker-scroll-wrapper .maker-item {
        /* 画像幅200px + padding p-3 (1rem * 2) = 232px を目安に設定 */
        /* 5個表示する場合: calc(20% - 1.2rem) ... コンテナ幅に依存する */
        /* 固定幅で指定 */
        flex: 0 0 232px; /* 縮小せず、基本幅を 232px に */
        width: 232px;
        box-sizing: border-box; /* paddingとborderを幅計算に含める */
    }


    /* (削除) PC用の位置指定を削除 (グローバル設定と同一のため) */

}


/**********************
査定状況 Live!
**********************/
.satei-live-container {
    max-width: 800px; /* PCでの最大幅 */
    margin: 1rem auto; /* PCでの中央寄せ */
    padding-left: 0.1rem; /* PC用のわずかな余白 (v1.11から) */
    padding-right: 0.1rem; /* PC用のわずかな余白 (v1.11から) */
}

/* (ここから変更 v1.12) */
@media (max-width: 767.98px) {
    .satei-live-container {
        max-width: none; /* 最大幅を解除 */
        margin: 2rem 0 0 0; /* 上にマージン、左右は0 */
        padding-left: 0; /* 余白をリセット (親の 15px に任せる) */
        padding-right: 0;
    }
}
/* (ここまで変更 v1.12) */


.satei-live-box {
    border: 2px solid #4FCFCF; /* border-turquoise */
    border-radius: 0.5rem; /* rounded-2 */
    padding: 1rem 0.5rem;
    height: 140px; /* 約5行分の高さ (line-height 1.7 * 5 + padding) */
    overflow: hidden;
    background-color: #fff;
}

.satei-live-box ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    /* アニメーションを設定 (時間はsatei.jsで上書き) */
    animation: scroll-up 20s linear infinite;
}

.satei-live-box ul:hover {
    animation-play-state: paused; /* ホバーで一時停止 */
}

.satei-live-box li {
    padding: 2px 0;
    font-size: 0.86rem;
    line-height: 1.5;
    white-space: nowrap; /* 折り返しを防ぐ */
    overflow: hidden;
    text-overflow: ellipsis; /* はみ出したテキストは...で省略 */
}

/* 下から上にスクロールするアニメーション */
@keyframes scroll-up {
    0% {
        transform: translateY(0);
    }
    100% {
        /* リストの半分の高さだけ移動 (2回挿入しているため) */
        transform: translateY(-50%);
    }
}


/**********************
先週の査定ランキング (v1.14)
**********************/
.ranking-card .ranking-header {
    /* 「かんたん自動査定」と同じグラデーション */
    background: linear-gradient(to right, #007bff, #00d4ff);
    color: white;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding-top: 1.0rem;
	padding-bottom: 0.5rem;
}

.ranking-item {
    padding: 1rem 1.5rem;
}

.ranking-badge {
    font-size: 1.25rem;
    font-weight: 600;
    color: #6c757d; /* text-secondary */
    width: 45px; /* 幅を固定 */
    text-align: center;
    flex-shrink: 0; /* 縮まないようにする */
}

.ranking-badge .bi {
    font-size: 1rem;
    margin-right: 0.1rem;
    vertical-align: -0.1em;
}

/* メダル色 */
.ranking-badge.medal-gold {
    color: #ffc107; /* warning (gold) */
}
.ranking-badge.medal-silver {
    color: #adb5bd; /* light-secondary (silver) */
}
.ranking-badge.medal-bronze {
    color: #fd7e14; /* orange (bronze) */
}

/* (変更 v1.15) 1列表示・文字サイズ統一 */
.ranking-details-single {
    display: flex;
    flex-wrap: wrap; /* スマホで折り返す */
    gap: 0.5rem 1.5rem; /* 縦・横の隙間 */
    font-size: 1.2rem; /* 文字サイズを統一 (h5/smallをspanに変更したため) */
    font-weight: 500;
    width: 100%;
}

.ranking-details-single span {
    white-space: nowrap; /* 折り返しを防ぐ */
}

/* 1列目 (メーカー名) は太字 */
.ranking-details-single span:first-child {
    font-weight: 600;
    color: #212529; /* text-dark */
}

@media (max-width: 767.98px) {
    .ranking-details-single {
        font-size: 1.3rem; /* 文字サイズをスマホ */
		line-height:120%;
    }
}



/**********************
トップページ、特徴のリスト部分
枠をじわっと光らせて、じわっと消すための @keyframes を定義します。
inset box-shadow の色を透明から赤、そして再び透明へと滑らかに変化させます。
**********************/
@keyframes highlight-shadow-border {
  /*
    (変更) 全体の duration が 10s で、アイテムが5個 (各2s) のため、
    アニメーション（光る・消える）を 0%〜20% (0s〜2s) の間で完了させます。
    
    0s   : 枠なし (transparent)
    0.5s (5%) : じわっと光る (5px #FF0000)
    0.5s-1.5s (5%-15%): 光った状態を維持 (5px #FF0000)
    1.5s-2s (15%-20%): じわっと消える (transparent)
    2s-10s (20%-100%): 枠なし (transparent)
  */
  0%, 20%, 100% {
    box-shadow: inset 0 0 0 0px transparent; /* 枠なし */
  }
  5%, 15% {
    box-shadow: inset 0 0 0 4px #FF0000; /* 枠あり、光った状態 */
  }
}

/* * 対象のリスト（.back-kaitori セクション内の .list-group-flush の .list-group-item）
 * にアニメーションの共通設定を適用します。
*/
.back-kaitori .list-group-flush .list-group-item {
  animation-name: highlight-shadow-border;
  animation-duration: 15s; /* 全体で15秒 */
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out; /* (変更) じわっとした変化のために */
}

/*
 * :nth-child を使って、各リストアイテムのアニメーション開始時間をずらします。
 * 15秒サイクルのアニメーションを 3秒ずつずらすことで、上から順番に点滅します。
*/
.back-kaitori .list-group-flush .list-group-item:nth-child(1) {
  animation-delay: 0s;
}
.back-kaitori .list-group-flush .list-group-item:nth-child(2) {
  animation-delay: 3s;
}
.back-kaitori .list-group-flush .list-group-item:nth-child(3) {
  animation-delay: 6s;
}
.back-kaitori .list-group-flush .list-group-item:nth-child(4) {
  animation-delay: 9s;
}
.back-kaitori .list-group-flush .list-group-item:nth-child(5) {
  animation-delay: 12s;
}


/* (ここから v1.18) スマホ表示のとき、メインビジュアルスライダーを全幅表示 */
@media (max-width: 767.98px) {
    /* * .main-content の最初の子要素である .section-xs (スライダーのあるセクション) の 
     * .container クラスの左右の padding を 0 にします。
     * これにより、basic.css の padding: 0 30px; を上書きします。
    */
    .main-content > .section-xs:first-child > .container {
        padding-left: 0;
        padding-right: 0;
    }
}


/**********************
点滅  フリーダイヤル
**********************/
@keyframes blinking {
   0% {
   opacity: 55%;
   }
   100% {
   opacity: 1;
   }
}

/* 要素にアニメーションを適用 */
.blink {
   animation: blinking 1.5s ease-in-out infinite alternate;
}


/* バイク車種ページ */
.bike-dt{
    width: 100%;
    margin-top: 0.5rem;
    align-content: center;
}
@media (min-width: 992px) {
    .bike-dt {
width: 45%;
padding: 0.5rem;
margin-top: 0;
}}
@media (min-width: 1200px) {
    .bike-dt {
width: 40%;
}}

.bike-dd{
    width: 100%;
    align-content: center;
}
@media (min-width: 992px) {
    .bike-dd {
width: 55%;
padding: 0.5rem;
margin-bottom: 0;
}}
@media (min-width: 1200px) {
    .bike-dd {
width: 60%;
}}

/* バイクメーカーページ */
.bike-list {
    border-top: 1px solid #eee;
}
.bike-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    color: #0D1D2B;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    transition: color 0.2s ease;
}
.bike-model {
    font-size: 0.95rem;
	flex-shrink: 0;
    width: 30%;
    padding-right: 0;
    text-wrap: wrap;
    letter-spacing: 0.02em;
}
.bike-volume {
    margin-right: 0.5rem;
    letter-spacing: 0em;
	padding-right: 0.35rem;
}
.bike-price {
    padding-right: 0;
    line-height: 1.2;
    letter-spacing: 0.03em;
}
.bike-detail {
    padding: 0px 10px;
}

@media (min-width: 992px) {
    .bike-price {
    padding-right: 1rem;
    line-height: 1.6;
}
}



/* ====================================
   店舗情報レイアウト (住所、TELなど)
   ==================================== */
.shop-info-list {
    width: 100%;
    margin-bottom: 2rem;
}

.shop-info-row {
    display: flex;
    flex-direction: column; /* スマホ（初期値）は縦並び */
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef; /* 各項目の下の区切り線 */
}

.shop-info-label {
    font-weight: bold;
    color: #104a8e; /* 濃い青色 (画像を参考に調整) */
    margin-bottom: 2px; /* スマホ時にラベルと値の間に隙間を作る */
    font-size: 1.1rem;
}

.shop-info-value {
    color: #333;
    line-height: 1.6;
}

/* PC以上（768px以上）で横並びに切り替え */
@media (min-width: 768px) {
    .shop-info-row {
        flex-direction: row; /* 横並び */
        align-items: flex-start; /* 上揃え */
    }
    
    .shop-info-label {
        width: 140px; /* 「営業時間」などが収まる幅 */
        flex-shrink: 0; /* 幅が縮まないようにする */
        margin-bottom: 0;
    }
    
    .shop-info-value {
        flex-grow: 1; /* 残りの幅を使用 */
    }
}


/**********************
トップ買取査定フォーム
**********************/
.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #f9f9f9;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.error-container {
    max-width: 800px; /* フォームと同じ幅に設定 */
    margin: 0 auto 2rem; /* 中央寄せと下マージン */
}
.error-container .alert-heading,
.error-container .alert > p {
    text-align: center;
}

.form-group-row {
    padding: 1.2rem 0;
    border-bottom: 1px solid #e9ecef;
}
.form-group-row:last-child {
    border-bottom: none;
}
.form-label {
    font-weight: 600;
    color: #343a40;
}
@media (min-width: 768px) {
    .form-label {
        text-align: right;
        padding-right: 1.5rem;
    }
}
/* スマートフォン用のスタイル */
@media (max-width: 767.98px) {
    .contact-form-container {
        padding: 1rem; /* スマホではpaddingを狭くする */
    }
}
.required-badge {
    background-color: #e74d5c;
    color: white;
    padding: 0.15em 0.3em;
    border-radius: 0.25rem;
    font-size: 0.65em;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.form-check-label{
    margin-right: 1rem;
}
.privacy-policy {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 1rem;
    margin-bottom: 1rem;
    max-height: 150px;
    overflow-y: auto;
    font-size: 0.9rem;
}

/* 査定結果 */
.result-label {
    font-weight: 600;
    color: #42688e;
	font-size: 1.3rem;
	padding-top: 0.8rem;
}
@media (min-width: 768px) {
    .result-label {
        text-align: right;
        padding-right: 1.5rem;
    }
}

.result-model {
    font-weight: 600;
    color: #343a40;
	font-size: 1.8rem;
}