/* webルート用 追加スタイルシート */

.krona-text {
   font-family: 'Krona One', sans-serif;
}

.checkbox-wrapper.disabled {
   opacity: 0.5;
}
/* 登録完了ボタン */
#nextBtn {
   transition: opacity 0.3s ease;
}

/* テキスト赤 */
.txt-col-red {
   color: #c62601;
}
/* テキスト青 */
.txt-col-blue {
   color: #006291;
}
/* テキスト青 */
.txt-col-dark {
   color: #313131;
}

/* フォントサイズ */
.fs-12 {
   font-size:12px;
}
.fs-13 {
   font-size:13px;
}
.fs-14 {
   font-size:14px;
}
.fs-15 {
   font-size:15px;
}
.fs-16 {
   font-size:16px;
}
.fs-18 {
   font-size:18px;
}
/* フォントウェイト */
.fw-bold {font-weight: bold;}
/* 幅 */
.width-40 {width:40px;}

/* 英語版コンテンツスタイル */
.en-content {
    margin-top: 10px;
    padding: 10px;
    border-left: 3px solid #006291;
    background-color: rgba(0, 98, 145, 0.05);
    font-size: 14px;
}

.en-title {
    color: #006291;
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 5px;
    font-style: italic;
}
.width-50 {width:50px;}
.width-60 {width:60px;}
.width-70 {width:70px;}
.width-80 {width:80px;}
.width-200 {width:200px;}
.width-100p {width:100%;}
/* 高さ */
.height-100p {height:100%;}
/******************** トップページ ********************/
/* 車両一覧画像サイズ調整 */
.car-lineup-img {
   height: 145px;
   object-fit: contain;
}


/******************** 車両情報ページ ********************/
/* 車両詳細ページの画像スライダー */
.car-photos {
   background-color: #fff;
   padding: 20px;
}

/* サイドバー情報カード */
.info-cards {
   margin-top: 20px;
}

.info-card {
   background-color: #fff;
   border-radius: 8px;
   box-shadow: 0 2px 5px rgba(0,0,0,0.1);
   margin-bottom: 15px;
   overflow: hidden;
}

.info-card .card-header {
   padding: 10px 15px;
   display: flex;
   align-items: center;
   color: #fff;
}

.info-card .card-header i {
   margin-right: 10px;
   font-size: 1.2rem;
}

.info-card .card-header h4 {
   margin: 0;
   font-size: 16px;
   font-weight: bold;
}

.info-card .card-body {
   padding: 15px;
}

.info-card .card-body h5 {
   margin-top: 0;
   font-size: 15px;
   font-weight: bold;
}

.info-card .card-body p {
   margin-bottom: 10px;
   font-size: 14px;
   line-height: 1.5;
}

/* 重要なお知らせカード */
.info-card.important-notice .card-header {
   background-color: #e74c3c;
}

/* キャンペーン情報カード */
.info-card.campaign .card-header {
   background-color: #3498db;
}

.info-card.campaign .campaign-period {
   display: block;
   font-size: 12px;
   color: #666;
   margin-top: 5px;
}

/* クーポン情報カード */
.info-card.coupon .card-header {
   background-color: #f39c12;
}

/* 詳しくはこちらボタン */
.card-action {
   margin-top: 15px;
   text-align: center;
}

.detail-btn {
   display: inline-block;
   padding: 5px 12px;
   color: #fff;
   text-decoration: none;
   font-size: 13px;
   border-radius: 4px;
   transition: all 0.3s ease;
}

.info-card.important-notice .detail-btn {
   background-color: #e74c3c;
}

.info-card.campaign .detail-btn {
   background-color: #3498db;
}

.detail-btn:hover {
   opacity: 0.8;
   transform: translateX(3px);
}

.detail-btn i {
   margin-left: 5px;
   font-size: 11px;
}

.info-card.coupon .coupon-code {
   background-color: #f7f7f7;
   border: 1px dashed #ccc;
   padding: 8px;
   text-align: center;
   margin-bottom: 10px;
}

.info-card.coupon .coupon-code span {
   font-family: monospace;
   font-size: 18px;
   font-weight: bold;
   letter-spacing: 2px;
}

.info-card.coupon .coupon-expiry {
   display: block;
   font-size: 12px;
   color: #666;
   margin-top: 5px;
}

/* その他カード */
.info-card.other .card-header {
   background-color: #27ae60;
}

.car-photos .main-photo {
   width: 100% !important;
   aspect-ratio: 3/2;
   object-fit: contain;
   margin-bottom: 10px;
}

.thumbnails-container {
   height:70px;
   display: flex;
   align-items: flex-start;
   background-color: #fff;
}

.car-photos .thumbnails {
   display: flex;
   overflow-x: hidden;
   scroll-behavior: smooth;
   flex-grow: 1;
}

.car-photos .thumbnail {
   width: 80px !important;
   height: 60px;
   object-fit: cover;
   cursor: pointer;
   transition: opacity 0.3s;
   flex-shrink: 0;
}

.car-photos .thumbnail:hover {
   opacity: 0.7;
}

.car-photos .thumbnail.active {
   border: 2px solid #007bff;
}

.arrow-btn {
   background: #fff;
   color: 000;
   border: none;
   padding: 5px 10px;
   cursor: pointer;
   font-size: 18px;
   height: 100%;
}

.arrow-btn:hover {
   background: #cf6d6d;
}

/* 貸渡約款 */
.terms-frame {
   width:100%;
   height:100%;
}
.terms-frame .kiyaku {
   width:100%;
   height:100%;
   color: #313131;
   padding: 41px 46px;
   font-size:14px;
}

@media (max-width: 991px) {
   .terms-frame .kiyaku {height: 500px;}
}

/* 動画ページ */
.video-container {
   position: relative;
   padding-bottom: 56.25%; /* 16:9のアスペクト比 */
   height: 0;
   overflow: hidden;
   max-width: 100%;
}

.video-container iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}