@charset "UTF-8";

/*!
Theme Name: used car sales
Theme URI: https://wp-cocoon.com/
Template:   cocoon-master
Version:    1.0.0
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*Cocoon上書き*/
body {
    color: #555;
}

h1 {
    color: #00668C;
}

/*タグを非表示*/
.entry-tags {
    display: none !important;
}

/*ログイン中は非表示にする*/
.logged-in .hide-when-logged-in {
    display: none !important;
}

/*グローバルナビゲーション*/
.navi-in > ul .sub-menu {
    background-color: #1D1C1C;
}

/*モバイル版スライドヘッダーメニュー*/
.menu-drawer a {
    padding: 24px;
}

.menu-drawer li:not(:first-child) a {
    border-top: 1px solid #ccc;
}

/*モバイルボタンメニューのサイドバーのアイコン*/
.fa-outdent::before {
    content: url("./img/car.svg");
}

/*ヘッダーの検索ボックス*/
.header-search .search-box {
    margin: 0;
    padding-left: 1em;
}

/*トップページの記事カード間*/
#post-141 .is-layout-grid {
    gap: 32px;
}

/*トップページの記事カード*/
#post-141 ul li {
    padding: 8px;
    border: 1px solid #AAA;
}

nav.navi {
    background-color: #1d1c1c;
}

nav .navi-in > ul li.header-search {
    width: 200px;
    margin-left: 32px;
}

nav .navi-in > ul li.header-search .search-box input {
    padding: 4px 16px;
    font-size: 0.8rem;
}

.fa {
    vertical-align: middle;
}

nav .navi-in ul li a {
    color: #fffefb;
}

/*基本ボタン*/
.normal-button a {
    position: relative;
    display: block;
    width: 232px;
    margin-right: 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    background-color: #00668c;
    color: #f5f4f1;
    text-align: center;
    text-decoration: none;
    line-height: 64px;
    transition: 0.2s;
    cursor: pointer;
}

.normal-button a:hover {
    opacity: 0.8;
}

.normal-button a::after {
    content: "";
    position: absolute;
    top: 0;
    right: 16px;
    width: 10px;
    height: 100%;
    background: url(img/BtnArrow.png) no-repeat center;
}

/*画面左上フローティングの検索ボックス*/
.search-container {
    position: fixed;
    width: 320px;
    z-index: 10;
}

.search-toggle {
    position: relative;
    background-color: #00668c;
    color: #d9d9d9;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px 4px 0 0;
    text-align: center;
    transition: background-color 0.3s ease;
}

.search-toggle::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #00668c;
}

#search-container .search-form {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background-color: #00668c;
    padding: 0 40px;
    border-radius: 0 0 4px 4px;
}

#search-container .search-form.open {
    max-height: 384px; /* 縦に広がる最大の高さを指定 */
    margin: 0;
    padding: 0 40px 20px;
}

#search-container div.search-form {
    margin: 0; /* デフォルトのマージンを無効 */
}

.search-toggle.open::after {
    display: none; /* フォームが開いたら三角形を隠す */
}

.button-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/*検索ボタン*/
.search-button,
.clear-button {
    margin-top: 24px;
    padding: 8px 32px;
    border: none;
    border-radius: 4px;
    background-color: #d4eaf7;
    color: #00668c;
    cursor: pointer;
}

/*検索条件クリアボタン*/
.clear-button {
    padding: 10px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background-color: #fcfcfc;
    font-size: 0.7rem;
}

.search-button:hover {
    background-color: #b6ccd8;
}

.clear-button:hover {
    background-color: #a1b5bf;
}

.search-item {
    margin-bottom: 15px;
    color: #d9d9d9;
}

#search-form .search-item select,
#search-form .search-item input {
    padding: 4px;
}

#search-form .price-range {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

#search-form .space,
#search-form .lowest,
#search-form .highest {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* =====================
 お知らせボックス
 ===================== */
#appeal {
    position: relative;
}

/* お知らせブロック本体 */
.notice-block {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 720px;
    width: 100%;
    padding: 0; /* 内側は inner に委譲 */
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    border-top: 4px solid #008eee;
    font-family: "Noto Sans JP", sans-serif;
    z-index: 10;
}

/* 内側のコンテナ */
.notice-inner {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
}

/* -----------------------------------------------------
  notice-inner ブロック同士の間に中央に短めの区切り線を入れる
----------------------------------------------------- */
/* .notice-inner の直後に別の .notice-inner がくる場合だけ適用 */
.notice-inner + .notice-inner {
    position: relative; /* :before をあてるために position:relative に */
    margin-top: 16px; /* 上のブロックとのすきまを確保（お好みで調整） */
}

/* 区切り線を作る疑似要素 */
.notice-inner + .notice-inner::before {
    content: "";
    position: absolute;
    top: -8px; /* 親 .notice-inner の上から 8px 下（適宜調整）に線を引く */
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* 線の長さ。お好みで 50%〜80% くらいに調整してください */
    height: 1px; /* 線の太さ */
    background-color: #DDD; /* 線の色。デザインに合わせて調整してください */
    opacity: 0.6; /* 少し薄めにしたい場合は調整 */
}

/* ラベル＋アイコン */
.notice-label {
    display: flex;
    align-items: center;
    gap: 6px;
    background-color: #008eee;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* SVGアイコン */
.notice-icon {
    width: 18px;
    height: 18px;
    fill: #fff;
}

/* 日付表記 */
.notice-date {
    font-size: 13px;
    color: #555;
    flex-shrink: 0;
    white-space: nowrap;
}

/* テキスト部分 */
.notice-text {
    margin: 0;
    font-size: 14px;
    color: #333;
    line-height: 1.4;
}

/* 台数の強調 */
.notice-count {
    color: #008eee;
    font-weight: 600;
}

/* リンク装飾 */
.notice-text a {
    color: #005a7c;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color .2s;
}

.notice-text a:hover {
    border-color: #005a7c;
}

.mobile-notice-block {
    display: none;
}


/* =====================
 フローティングユーザー登録誘導
 ===================== */
.floating-registration-banner {
    display: none; /* 初期状態で非表示 */
    position: fixed; /* 固定位置 */
    top: 25%; /* 画面中央やや上 */
    right: 20px; /* 画面右端から少し余白 */
    z-index: 1000; /* 他要素の上に表示 */
    animation: fadeIn 1s ease-in-out; /* フェードインアニメーション */
}

/* 丸いバナーのスタイル */
.floating-registration-inner {
    display: flex;
    flex-direction: column; /* 縦並びに配置 */
    align-items: center; /* 中央揃え */
    justify-content: center;
    background-color: #0073e6; /* ベースカラー */
    color: #fff; /* 文字色 */
    border-radius: 50%; /* 丸い形状に */
    width: 120px; /* バナーの幅 */
    height: 120px; /* バナーの高さ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 影効果 */
    text-decoration: none; /* 下線を消す */
    overflow: hidden; /* 画像がはみ出ないように */
    transition: background-color 0.3s ease;
}

/* 画像スタイル */
.floating-registration-inner img {
    width: 32%; /* 画像をバナー内で調整 */
    height: auto; /* アスペクト比を維持 */
    margin-bottom: 8px; /* テキストとの間隔 */
}

/* テキストスタイル */
.floating-registration-inner span {
    color: #fff; /* テキストの色 */
    text-decoration: none; /* 下線を消す */
    font-weight: bold; /* 太字 */
    font-size: 14px; /* テキストサイズ */
    text-align: center; /* 中央揃え */
    line-height: 1.4; /* テキストの行間 */
}

/* ホバー時の効果 */
.floating-registration-inner:hover {
    background-color: #005bb5; /* ホバー時の背景色 */
    cursor: pointer;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0; /* 不透明度0 */
        transform: translateX(20px); /* 横からスライドイン */
    }
    to {
        opacity: 1; /* 不透明度100% */
        transform: translateX(0); /* 元の位置に */
    }
}


/* =====================
 ユーザー登録フォーム
 ===================== */
.custom-registration-form {
    max-width: 960px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}

.custom-registration-form p {
    margin-bottom: 15px;
}

.custom-registration-form input[type="text"],
.custom-registration-form input[type="email"],
.custom-registration-form input[type="password"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

.name-fields {
    display: flex;
    gap: 10px;
}

.name-fields label {
    width: 100%;
}

.custom-registration-form label {
    font-weight: bold;
    display: block;
    margin-bottom: 3px;
    color: #555;
}

.buy-form .wpcf7-list-item input, /*購入問い合わせフォーム*/
.wpuf-checkbox-block .wpuf_check_951, /*ユーザー登録フォーム*/
.wpuf-checkbox-block .wpuf_confirmation_16 { /*出品フォーム*/
    display: inline-block !important;
    margin-right: 8px;
    transform: scale(1.5);
}

.wpuf-checkbox-block .wpuf_check_951 { /*ユーザー登録フォーム*/
    margin-left: 8px;
}


.wpuf-form li.confirmation {
    margin-bottom: 0;
    padding: 10px 10px 0;
}


.submit-button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.submit-button:hover {
    background-color: #45a049;
}

.error-messages {
    color: #d9534f;
    font-weight: bold;
    margin-bottom: 15px;
    border: 1px solid #d9534f;
    padding: 10px;
    border-radius: 4px;
    background-color: #f2dede;
}

/*デフォルトで用意されているmargin-bottomとpaddingと罫線を消去*/
body ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields li.wpuf-el {
    margin-bottom: 0;
    padding: 0;
    border: none;
}

/*ACFで表示される項目を非表示*/
.acf-form-data,
.acf-user-register-fields,
.wpuf-form-add h2 {
    display: none;
}


/* =====================
 アカウントページ（マイページ）
 ===================== */
/*「管理画面」と「INVOICE」を非表示*/
.wpuf-menu-item.dashboard,
.wpuf-menu-item.invoices {
    display: none;
}

.duplicate-button {
    display: inline-block;
    margin-right: 16px;
    padding: 10px 32px 10px 54px;
    font-size: 16px;
    color: #ffffff;
    background: url(./img/duplicate.svg) 16px center / 24px 24px no-repeat;
    background-color: #0a6aa1;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.duplicate-button:hover {
    background-color: rgba(10, 106, 161, 0.4);
}

/*複製時のローディングスピナー*/
#loading-spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8); /* 背景を半透明の黒に */
    color: white; /* テキストを白に */
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    z-index: 9999;
}

#loading-spinner::before {
    content: "";
    display: block;
    margin: 0 auto 10px;
    width: 40px;
    height: 40px;
    border: 4px solid #ffffff; /* スピナーの枠色 */
    border-top: 4px solid #3498db; /* スピナーのトップ色 */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}


/* =====================
 ヘッダー上部のナビゲーション
 body-top-insert.php
 ===================== */
.navigation-container {
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    z-index: 10;
}

.navigation {
    display: flex;
    gap: 24px;
    list-style: none;
    padding: 12px 24px;
    border-left: 1px solid #999;
    border-bottom: 1px solid #999;
    background-color: #d4eaf7;
}

.navigation a {
    padding: 5px 4px 4px 23px;
    text-decoration: none;
    font-size: 0.8rem;
    color: #3b3c3d;
    transition: 0.2s;
}

.navigation a:hover {
    opacity: 0.6;
}

/*ログインメニュー先頭のアイコン*/
.menu-drawer .user-registration,
.navigation .user-registration {
    background: url(./img/user-plus.svg) 4px center / 16px 16px no-repeat;
}

.menu-drawer .favorite,
.navigation .favorite {
    background: url(./img/favorite.svg) 4px center / 16px 16px no-repeat;
}

.menu-drawer .mypage,
.navigation .mypage {
    background: url(./img/mypage.svg) 4px center / 16px 16px no-repeat;
}

.menu-drawer .logout,
.navigation .logout {
    background: url(./img/logout.svg) 4px center / 16px 16px no-repeat;
}

.menu-drawer .login,
.navigation .login {
    background: url(./img/login.svg) 4px center / 16px 16px no-repeat;
}

/*トップページでカテゴリーの記事がない場合はh2の見出しも非表示にする jsと連動*/
.hidden-heading {
    display: none;
}

.navigation .sale {
    padding: 10px 24px;
    background-color: #00668C;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 900;
}

.user-nickname {
    color: #333;
    font-size: 0.8rem;
    text-align: center;
}


/* =====================
 ログインページ
 ===================== */
/* ログインフォーム全体のスタイル */
#wpuf-login-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 40px;
    background-color: #f7f7f7;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* フォームのタイトルスタイル */
#wpuf-login-form h1 {
    font-size: 24px;
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}

/* ラベルのスタイル */
#wpuf-login-form label {
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
    display: block;
}

/* 入力フィールドのスタイル */
#wpuf-login-form input[type="text"],
#wpuf-login-form input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 14px;
    color: #333;
}

/* チェックボックスとそのラベル */
#wpuf-login-form .forgetmenot {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

#wpuf-login-form .forgetmenot input[type="checkbox"] {
    margin-right: 10px;
}

#wpuf-login-form .forgetmenot label {
    margin-bottom: 0;
    font-size: 14px;
    color: #666;
}

/* ログインボタンのスタイル */
#wpuf-login-form .submit input[type="submit"] {
    width: 100%;
    padding: 12px;
    background-color: #0073aa;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#wpuf-login-form .submit input[type="submit"]:hover {
    background-color: #005b8a;
}

/* パスワード紛失リンクのスタイル */
.entry-content a {
    text-decoration: none;
}

.entry-content a:hover {
    color: #005b8a;
    text-decoration: underline;
}

#wpuf-login-form a {
    display: block;
    text-align: center;
    margin-top: 20px;
    color: #0073aa;
    font-size: 14px;
}

/*デフォルトの登録とパスワード紛失を非表示*/
.page-id-229 #wpuf-login-form a {
    display: none;
}

/* | 記号を非表示*/
.page-id-229 #wpuf-login-form {
    font-size: 0; /* 親要素内のすべてのテキストを一時的に隠す */
}


/* =====================
 登録ページ
 ===================== */
body ul.wpuf-form li.field-size-large .wpuf-fields {
    display: flex;
    flex-wrap: wrap;
}

.wpuf-checkbox-block:not(:last-child) {
    width: 264px;
}

/*基本情報*/
body ul.wpuf-form .wpuf_column_field_244_16 li .wpuf-label {
    width: 100%; /* 縦積みにしたので初期値30%から修正*/
    font-size: 0.8rem;
}

/*各項目に枠線と余白を設定*/
body ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .wpuf-column-inner-fields ul.wpuf-column-fields li {
    padding: 16px;
    border: 1px solid #ddd;
}

/*[画像を選択する]のラベル*/
body ul.wpuf-form li .wpuf-label {
    width: 100%;
}

/*入力後の文字色*/
body .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-fields input[type=number],
body .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-fields input[type=textarea],
body .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-fields input[type=email],
body .wpuf-form-add.wpuf-style ul.wpuf-form .wpuf-fields input[type=text] {
    color: #000000;
}

/*基本情報のラジオボタンの選択肢の距離*/
.inspection .wpuf-fields,
.recycling_deposit .wpuf-fields {
    gap: 8px;
}

.wpuf_column_field_244_16 .wpuf-el, /* 基本情報 */
.page-id-225 .model,
.page-id-40 .model, /* 車種 */
.wpuf_column_field_261_16 .wpuf-el, /* 画像 ラベルとボタン */
.wpuf_column_field_261_16 li.wpuf-el .wpuf-fields /* 画像 ボタンと補足説明 */
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 16px;
}

.page-id-225 .featured_image .wpuf-fields, /* 下書き画面で見出し画像 ボタンと補足説明 */
.page-id-40 .featured_image .wpuf-fields /* 投稿画面見出し画像 ボタンと補足説明 */
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.page-id-225 .model .wpuf-fields,
.page-id-40 .model .wpuf-fields {
    width: 100% !important;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block,
.page-id-40 .model .wpuf-fields .wpuf-radio-block {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 184px;
    margin-right: 8px;
    padding: 48px 24px 16px;
    border-radius: 8px;
    background-color: #00668c;
    color: #f5f4f1;
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:hover,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:hover {
    background-color: #00557a; /* ホバー時に少し暗くする */
    transform: scale(1.05); /* ホバー時に少し拡大してアニメーション */
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block input[type="radio"],
.page-id-40 .model .wpuf-fields .wpuf-radio-block input[type="radio"] {
    margin-right: 8px; /* ラジオボタンとテキストの間隔を広く取る */
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-block;
    width: 57px; /* アイコンの幅 */
    height: 32px; /* アイコンの高さ */
    z-index: 1;
}

/*出品対象アイコンの指定*/
.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(1)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(1)::before {
    background: url('img/01-normal.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(2)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(2)::before {
    background: url('img/02-semi-medium.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(3)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(3)::before {
    background: url('img/03-medium.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(4)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(4)::before {
    background: url('img/04-big.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(5)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(5)::before {
    background: url('img/05-big-sp.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(6)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(6)::before {
    background: url('img/06-towing.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(7)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(7)::before {
    background: url('img/07-big2.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(8)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(8)::before {
    background: url('img/08-bike.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(9)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(9)::before {
    background: url('img/09-other.png') no-repeat center/contain;
}

.page-id-225 .model .wpuf-fields .wpuf-radio-block:nth-child(10)::before,
.page-id-40 .model .wpuf-fields .wpuf-radio-block:nth-child(10)::before {
    background: url('img/10-shuttle-bus.png') no-repeat center/contain;
}

/*サンプル画像*/
.page-id-225 ul.wpuf-form .wpuf______html_16,
.page-id-40 ul.wpuf-form .wpuf______html_16 {
    width: 100%;
}

.page-id-225 .image-sample,
.page-id-40 .image-sample {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 16px;
}

.page-id-225 .image-sample li,
.page-id-40 .image-sample li {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0;
    padding: 0;
}

.page-id-225 .image-sample li img,
.page-id-40 .image-sample li img {
    width: 160px;
    height: auto;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.page-id-225 .image-sample li img:hover,
.page-id-40 .image-sample li img:hover {
    transform: scale(1.05);
}

/*画像のレイアウトシフトを防止*/
.wpuf_column_field_261_16 .wpuf-attachment-list {
    max-height: 163px;
}

/*登録確認チェックが入ったときのフォームのボタンスタイル*/
input[type='submit'].enabled {
    background-color: #2699FB; /* チェックされたときの背景色 */
    color: #fff; /* チェックされたときの文字色 */
    cursor: pointer; /* ポインターに変更 */
    opacity: 1; /* 透明度を戻す */
}

/* =====================
 固定ページ
 ===================== */
/*h1周りに青いグラデーションの帯*/
article.type-page .article-header {
    display: flex;
    height: 240px;
    background: linear-gradient(to right, #01668C, #01668C99, #ffffff00);
    margin: 0 calc(50% - 50vw) 40px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/*h1周りの装飾はホームでは表示しない*/
body.home .article.type-page .article-header {
    display: none; /* 必要に応じて別のスタイルで上書きも可能 */
}

article.type-page .article-header h1 {
    margin: auto;
    color: #fff;
    font-size: 2rem;
}

/* =====================
 ご利用までの流れ
 ===================== */
.page-id-460 p a:hover {
    color: #ffffff;
    text-decoration: none;
}

/*STEP1. ご利用条件確認のボタンを横並び、折り返し*/
.checkConditions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.checkConditions p,
.checkConditions p a {
    margin: 0 !important;
}


/* =====================
 お問い合わせフォーム
 ===================== */
.content-container {
    margin-top: 5em;
}

.content-container dl {
    max-width: 720px;
}

.content-container p {
    margin-bottom: 0.5em;
}

.cf-send {
    width: 100%;
}

.cf-send .spam1 {
    margin: 4px;
    transform: scale(1.5);
}

.cf-send a {
    margin-left: 8px;
}

/*購入用フォーム*/
.request-form,
.regist-form,
.buy-form {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding: 32px;
    border: 1px solid #d5d5d5;
    font-size: 0.9rem;
}

.request-form .cf-area,
.regist-form .cf-area,
.buy-form .cf-area {
    margin: 0;
}

.request-form .inquiry-content,
.regist-form .inquiry-content,
.buy-form .inquiry-content {
    width: 100%;
}

/* コンタクトフォームの送信ボタン */
input[type='submit'] {
    width: 200px;
    margin: 16px 0 0 16px;
}

/* コンタクトフォームの必須ラベル */
.required-label {
    margin-right: 8px;
    padding: 4px;
    border-radius: 4px;
    background: #00189E;
    color: #ffffff;
    font-size: 0.8rem;
}

/* 任意ラベル */
.optional-label {
    margin-right: 8px;
    padding: 4px;
    border-radius: 4px;
    background: #ccc;
    color: #333;
    font-size: 0.8rem;
}

.buy-form p.small {
    margin-bottom: 0;
}

.content-container .post-info {
    display: none;
}

/*必須がすべて埋まっている時のフォームのボタンスタイル*/
input[type='submit'].enabled {
    background-color: #2699FB;
    color: #fff;
    cursor: pointer;
    opacity: 1;
}

/*名義変更証明書類アップロード*/
.file-upload {
    margin-top: 0;
    padding: 16px;
    border: 1px solid #ccc;
    border-radius: 16px;
}

.file-upload .cf-area p.title {
    color: #01668C;
    font-size: 1.2rem;
    font-weight: bold;
}

.file-upload .cf-area p.title span {
    margin-left: 8px;
    color: #8c0101;
    font-size: 1rem;
    font-weight: normal;
}

p.small {
    font-size: 0.8rem;
}


/* =====================
 トップページ 車リスト
 ===================== */
.home .wp-block-query .is-layout-flex {
    gap: 8px;
}

/*トップページ 車リスト タイトルの文字サイズ等*/
.home .genre {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 8px 40px;
    border-radius: 16px;
    color: #00668c;
    font-size: 3rem;
    font-weight: 900;
}

.home .genre::before {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #00668c;
    font-size: 1rem;
    font-weight: normal;
}

.home .new-arrivals::before {
    content: "New";
}

.home .article h2.wp-block-heading {
    position: relative;
    background-color: #fff;
}

.home .article h2.wp-block-heading::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 2px;
    background-color: #00668c;
}

.home .wp-block-query .wp-block-post-title {
    margin-bottom: 0;
    padding: 1em;
    font-size: 1rem;
}

.home .wp-block-query .wp-block-post-title a {
    color: #3b3c3d;
    text-decoration: none;
}

.home .wp-block-query .wp-block-post-excerpt__excerpt {
    font-size: 0.8em;
}

.home .wp-block-query .wp-block-read-more {
    display: block;
    background-color: #FFA500; /* オレンジ色 */
    color: white;
    margin: 1em auto;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 5px;
    border: 2px solid #FFA500;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.home .wp-block-query .wp-block-read-more:hover {
    background-color: white;
    color: #FFA500;
    border-color: #FFA500;
}

/*お気に入りボタン*/
.simplefavorite-button {
    padding: 8px 16px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

/* =====================
 車両一覧
 ===================== */
/*絞り込みUI*/
#category-filter {
    max-width: 360px;
    padding: 2em;
    border: double 7px #cccbc8;
}

#category-filter .title {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 24px;
    border-bottom: 1px solid #cccbc8;
    color: #333;
    font-size: 1rem;
    font-weight: bold;
}

#category-filter .title p {
    margin-bottom: 0;
}

#category-filter .wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 4px;
    font-size: 0.9rem;
}

#category-filter .wrapper label {
    flex: 1;
}

#category-filter .wrapper select,
#category-filter .wrapper input {
    flex: 2;
    padding: 4px;
}

#category-filter .wrapper .search-button {
    flex: 1;
}

#category-filter .price-range {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}

#category-filter .space,
#category-filter .lowest,
#category-filter .highest {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/*モバイルでは横スクロール*/
.table-container {
    position: relative;
    overflow-x: auto;
    white-space: nowrap;
}

.sortable {
    border-collapse: collapse;
    font-size: 0.9rem;
}

.scroll-hint {
    position: absolute;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-weight: 700;
    line-height: 1.4;
    animation: scroll-hint-animation 2s infinite ease;
}

@keyframes scroll-hint-animation {
    0% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-40%, -50%);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

.scroll-hint--show {
    display: block;
}

.sortable tr {
    cursor: pointer;
}

.sortable tr:hover {
    background-color: #b6ccd8;
}

/* ソート機能 */
.sortable th {
    position: relative;
    text-align: left;
}

.sortable th .arrow-container {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.sortable th .arrow {
    display: block; /* 矢印を縦に配置 */
    color: #00668c;
    font-size: 0.5rem;
    line-height: 1; /* 行の高さを調整 */
}

.sortable th.asc .arrow.asc,
.sortable th.desc .arrow.desc {
    visibility: visible;
}

.sortable th.asc .arrow.desc,
.sortable th.desc .arrow.asc {
    visibility: hidden; /* 非表示にするが、スペースは確保する */
}

.favorites-list li a,
.sortable tbody tr td a {
    color: #333;
    text-decoration: none;
}

/* ソート時に下からスライドイン */
@keyframes slideIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.sortable tr {
    animation: slideIn 0.5s ease-in-out;
}

/* 商談状況: 一覧ページ用のスタイル */
.table-container td.status a {
    display: inline-block;
    width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    color: #fff; /* デフォルトの文字色 */
    font-size: 0.8rem;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

/* 商談状況: 受付可 */
.table-container td.status.status-available a {
    background-color: #28a745; /* 緑 */
    border: 2px solid #1F7F3C;
}

/* 商談状況: 商談中 */
.table-container td.status.status-negotiation a {
    background-color: #ffc107; /* 黄色 */
    border: 2px solid #8A6700;
    color: #8A6700;
}

/* 商談状況: 成約済 */
.table-container td.status.status-sold a {
    background-color: #dc3545; /* 赤 */
    border: 2px solid #B92D2D;
}

/* 記事IDの装飾 */
.table-container .sortable td.title-cell .post-id {
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 6px;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #555;
    background-color: #f2f4f7;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* 行の既読・直前閲覧の視覚表現 */
.table-container .sortable tr.visited {
    background: #f8fafc; /* ごく薄い灰青 */
}

.table-container .sortable tr.last-viewed {
    background: #f0f7ff; /* 直前は少しだけ濃く */
    box-shadow: inset 3px 0 0 #4e9eff; /* 左に細いラインでマーク */
}

/* チェックアイコンっぽく */
.table-container .sortable td.title-cell .viewed-badge::before {
    content: "✓";
    margin-right: .35rem;
    font-weight: 700;
}

/* 画像ラッパー */
.thumb-wrapper {
    position: relative;
    display: inline-block;
}

/* 閲覧済みバッジを左上に重ねる */
.thumb-wrapper .viewed-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #4e9eff;
    background: #eaefff;
    border: 1px solid #8FB6FFFF;
    border-radius: 4px;
    line-height: 1.2;
    display: none; /* 初期は非表示 */
}

/* visited 行では自動表示 */
tr.visited .thumb-wrapper .viewed-badge {
    display: inline-block;
}


/* ===== 閲覧済みリセットボタン ===== */
#clear-view-history {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 8px 12px;
    border: 1px solid #d4d9e1;
    border-radius: 999px; /* ピル型 */
    box-shadow: 0 1px 1px rgba(0, 0, 0, .03);
    background: #fff;
    color: #374151;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease,
    box-shadow .15s ease, transform .02s ease-in;
}

/* 左に控えめアイコン（↺） */
#clear-view-history::before {
    content: "↺";
    font-weight: 700;
    opacity: .8;
}

/* ホバー時：うっすら色を乗せる */
#clear-view-history:hover {
    background: #f7fafc;
    border-color: #c8cfda;
}

/* クリック時の軽い押し込み感 */
#clear-view-history:active {
    transform: translateY(1px);
}

/* フォーカス時：落ち着いたアクセントリング */
#clear-view-history:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(78, 158, 255, .25);
    border-color: #8fb6ff;
}

/* 無効化時（将来用） */
#clear-view-history:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* 配置のおすすめ（右寄せにしたい場合） */
.filter-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: .5rem;
}


/* =====================
 車両詳細
 ===================== */
.wpuf_customs {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
}

.wpuf_customs .price-wrapper li,
.wpuf_customs .remarks-wrapper li,
.wpuf_customs .photo_notes-wrapper li,
.wpuf_customs > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-basis: 19%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #b6ccd8;
    border-radius: 4px;
    background: #fcfcfc;
}

.wpuf_customs .status,
.wpuf_customs .remarks-wrapper,
.wpuf_customs .photo_notes-wrapper {
    width: 100%;
}

/*商談状況*/
.wpuf_customs .status label {
    display: none;
}

.wpuf_customs .status li {
    max-width: 160px;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
}

/* 商談状況: 受付可 */
.wpuf_customs li.status-available {
    color: #1F7F3C;
    border: 2px solid #28a745;
    background-color: #e6f9eb; /* 緑の薄い背景 */
}

/* 商談状況: 商談中 */
.wpuf_customs li.status-negotiation {
    color: #8A6700;
    border: 2px solid #ffc107;
    background-color: #fff8e1; /* 黄色の薄い背景 */
}

/* 商談状況: 成約済 */
.wpuf_customs li.status-sold {
    color: #B92D2D; /* 赤色 */
    border: 2px solid #dc3545;
    background-color: #f9e6e6; /* 赤の薄い背景 */
}

.wpuf_customs .price-wrapper li label,
.wpuf_customs .remarks-wrapper li label,
.wpuf_customs .photo_notes-wrapper li label,
.wpuf_customs > li label {
    font-weight: bold;
    color: #333;
    cursor: auto;
}

.wpuf_customs > li span {
    color: #555;
}

/*手数料に関する記述*/
.wpuf_customs .price-wrapper {
    position: relative;
    margin-bottom: 24px;
}

.wpuf_customs .price-wrapper::before {
    position: absolute;
    bottom: -20px;
    left: 8px;
    content: "※別途10%の手数料がかかります";
}

/*税込小売価格の装飾*/
.wpuf_customs .price-wrapper li {
    align-items: center;
    margin: 0.1em;
    padding: 0;
    border-color: #C8151D;
    color: #C8151D;
    font-size: 1.6rem;
    font-weight: bold;
}

.wpuf_customs .price-wrapper li label {
    width: 100%;
    padding: 8px 64px;
    background-color: #C8151D;
    color: #fcfcfc;
    font-size: 0.8rem;
    text-align: center;
}


.image-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* li要素の間にスペースを作成 */
}

.image-group li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-basis: 23%; /* 4つ分のアイテムが並ぶように */
}

.image-group li a {
    width: 100%;
}

.image-group li img {
    width: 100%;
    height: auto;
    max-width: 100%; /* 親要素の幅を超えないようにする */
    object-fit: cover; /* 画像が変形しないように調整 */
    transition: transform 0.3s ease;
}

.image-group li img:hover {
    transform: scale(1.05);
}

.other-images-group .link-group {
    display: flex;
    gap: 16px;
}

/*関連車両／最近見た車両*/
.sub-caption {
    font-size: 0.9rem;
}

.related-list {
    flex-direction: row;
}

.related-entry-card-wrap {
    width: 100%;
}

.related-entry-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.related-entry-card-content {
    margin-left: 0;
}

.related-entry-card-title {
    font-size: 0.8rem;
}

.related-entry-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 0;
}

/*最近見た車両のカルーセル*/
.slick-carousel .slick-slide {
    margin: 0 10px;
}

.slick-carousel .slick-prev,
.slick-carousel .slick-next {
    width: 32px;
    height: 32px;
    background-color: #777;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* これで文字を非表示にします */
    line-height: 0; /* これで文字を非表示にします */
}

.slick-carousel .slick-prev:before,
.slick-carousel .slick-next:before {
    font-size: 32px; /* 矢印アイコンのサイズを調整 */
}

.slick-carousel .slick-next:before {
    content: '→'; /* 右矢印を表示 */
}

.slick-track {
    margin-left: 0;
    margin-right: auto;
}

footer#footer {
    background-color: #cccbc8;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*768px以下*/
@media screen and (max-width: 767px) {
    /*モバイルでサイトタイトル非表示*/
    .header {
        display: none;
    }

    .wpuf_customs {
        flex-direction: column;
        padding: 0 !important;
        margin: 0;
    }

    .wpuf_customs > li {
        display: flex;
        flex-direction: column;
    }

    .wpuf_customs > li:nth-child(19) { /* "画像" */
        align-items: center;
    }

    .wpuf_customs > li:nth-child(19) img {
        max-width: 100%;
    }

    /*PC用の検索ボックスを非表示*/
    .navigation-container,
    .search-container {
        display: none;
    }

    /*トップページの記事カード*/
    .article ul {
        padding-left: 0;
    }

    /* =====================
     お知らせボックス
     ===================== */
    /* お知らせブロック本体 */
    .notice-block {
        display: none;
    }

    /* モバイル版だけ表示 */
    .mobile-notice-block {
        display: block;
        position: relative;
        max-width: 640px;
        width: 100%;
        margin: auto;
        padding: 0; /* 内側は inner に委譲 */
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
        border-top: 4px solid #008eee;
        font-family: "Noto Sans JP", sans-serif;
    }

    .mobile-notice-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 14px 20px;
    }

    .mobile-notice-inner > * {
        width: 100%;
    }

    /* =====================
     フローティングユーザー登録誘導
     ===================== */
    .floating-registration-banner {
        top: 12%;
        right: 0;
        transition: transform 0.3s ease, opacity 0.3s ease; /* スライドとフェードを適用 */
    }

    .floating-registration-banner.hidden {
        transform: translateY(100px); /* スライドアウトで非表示 */
        opacity: 0; /* フェードアウト */
    }

    /* 画像スタイル */
    .floating-registration-inner img {
        width: 24%; /* 画像をバナー内で調整 */
    }

    /* テキストスタイル */
    .floating-registration-inner span {
        font-size: 12px; /* テキストサイズ */
    }

    /* =====================
     登録ページ
     ===================== */
    .wpuf-checkbox-block,
    body ul.wpuf-form li.field-size-small .wpuf-fields {
        width: 100%;
    }

    body ul.wpuf-form li .wpuf-fields {
        font-size: 0.7rem;
    }

    body ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column {
        display: flex;
        flex-direction: column; /*3カラムを1カラムに変更*/
    }

    body ul.wpuf-form .wpuf-field-columns .wpuf-column-field-inner-columns .wpuf-column .items-of-column-3 {
        width: 100% !important; /*1カラムに変更したため幅を広げる*/
    }

    /*出品対象と画像例の幅*/
    .page-id-40 .image-sample {
        justify-content: center;
    }

    .page-id-40 .model .wpuf-fields .wpuf-radio-block,
    .page-id-40 .image-sample li {
        width: 120px;
    }

    /*登録確認チェックボックス*/
    body ul.wpuf-form li .wpuf-fields .wpuf-checkbox-block {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /*登録するボタンと下書きボタン*/
    body ul.wpuf-form li.wpuf-submit {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    body ul.wpuf-form li.wpuf-submit .wpuf-submit-button,
    body ul.wpuf-form li.wpuf-submit #wpuf-post-draft {
        margin: 0;
    }

    /* =====================
     車両一覧
     ===================== */
    .sortable tbody tr td:first-child a {
        display: block;
        width: 64px;
    }

    /* =====================
     車両詳細
     ===================== */
    .related-entry-card-thumb {
        width: 100%;
    }

    .image-group li {
        flex-basis: 28%; /* 3つ分のアイテムが並ぶように */
    }

    /* =====================
     お問い合わせ
     ===================== */
    .article dd {
        margin-left: 0;
    }

    /* =====================
     フッター
     ===================== */
    footer .navi-footer-in {
        display: flex;
        justify-content: center;
    }

    footer .navi-footer-in > .menu-footer {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }

    footer .navi-footer-in > .menu-footer li.menu-item {
        width: 100%;
        text-align: left;
    }

    footer .navi-footer-in > .menu-footer li.menu-item a {
        position: relative;
        padding: 4px;
        margin-bottom: 8px;
    }

    footer .navi-footer-in > .menu-footer li.menu-item a::before {
        content: "";
        position: absolute;
        left: -15px;
        top: 11px;
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: transparent transparent transparent #333;
        border-width: 5px 0 5px 7px;
        background-color: transparent;
    }

    /* スマホ表示時にカルーセルの矢印ボタンを内側に移動させる */
    .slick-prev, .slick-next {
        top: 50%;
        transform: translateY(-50%);
        z-index: 10;
        width: 30px; /* ボタンサイズを調整 */
        height: 30px; /* ボタンサイズを調整 */
    }

    .slick-prev {
        left: 10px; /* 左ボタンを内側に配置 */
    }

    .slick-next {
        right: 10px; /* 右ボタンを内側に配置 */
    }

    .slick-carousel .slick-prev, .slick-carousel .slick-next {
        background-color: rgba(0, 0, 0, 0.5); /* 半透明の背景色 */
        border-radius: 50%; /* 丸みを帯びたボタンにする */
        color: #fff; /* 白色のアイコン */
    }

    .slick-carousel .slick-prev:hover, .slick-carousel .slick-next:hover {
        background-color: rgba(0, 0, 0, 0.8); /* ホバー時に色を濃くする */
    }
}