.black {
    color: #444
}

.black_bg {
    background-color: #444
}

.white {
    color: #fff
}

.white_bg {
    background-color: #fff
}

.red {
    color: #d93200
}

.red_bg {
    background-color: #d93200
}

.yellow {
    color: #ffc817
}

.yellow_bg {
    background-color: #ffc817
}

.orange {
    color: #ff4f36
}

.orange_bg {
    background-color: #ff4f36
}

.pink {
    color: #ff0d51
}

.pink_bg {
    background-color: #ff0d51
}

.navy {
    color: #2c4256
}

.navy_bg {
    background-color: #2c4256
}

.blue {
    color: #0076a3
}

.blue_bg {
    background-color: #0076a3
}

.light-blue {
    color: #e0f3fa
}

.light-blue_bg {
    background-color: #e0f3fa
}

.green {
    color: #6ba521
}

.green_bg {
    background-color: #6ba521
}

.marker_yellow {
    background: linear-gradient(transparent 60%, #ff6 60%)
}

.marker_green {
    background: linear-gradient(transparent 60%, #6FC 60%)
}

.list_red {
    background: #fcf3f6
}

.list_green {
    background: #f4fee5
}

.list_white {
    background: #fff
}

.result-stats {
    text-align: right;
    font-size: .8em;
    margin: 2%
}

.tabmenu {
    position: relative;
    z-index: 60;
    width: 94%;
    margin: 0 auto 10px;
    border-bottom: 1px solid #eaebdd;
    padding-bottom: 10px
}

.tabmenu label {
    line-height: 30px;
    margin: 0 2% 0 0;
    width: 22.5%;
    display: inline-block;
    border-radius: 4px;
    overflow: hidden
}

.tabmenu label:last-child {
    margin-right: 0
}

.tabmenu input[type=radio] {
    display: none
}

.tabmenu input[type=radio]+p {
    position: relative;
    z-index: 100;
    display: inline-block;
    padding: 0;
    background: #eff0e5;
    color: #0287d3;
    font-style: normal;
    line-height: 30px;
    cursor: pointer;
    font-size: .8em;
    width: 100%;
    text-align: center
}

.tabmenu input[type=radio]:checked+p {
    background: #f7991e;
    color: #fff;
    pointer-events: none
}

p.not-found {
    width: auto;
    border: none;
    padding: 0;
    background: none;
    color: #444;
    line-height: 1.8;
    margin: 10px auto;
    font-size: .9em
}

p.not-found span.center_bold {
    font-weight: 700;
    text-align: center;
    display: block
}

p.not-found img.not_found_pig {
    width: 50%;
    display: block;
    margin: 0 auto;
    padding: 5% 0
}

#search_box {
    margin: 12px auto 0;
    border: 3px solid #f7991e;
    width: 94%;
    border-radius: 4px;
    overflow: hidden
}

#search_box form {
    box-shadow: none
}

#search_box .formtip {
    width: 84%;
    height: 32px;
    border: 0;
    float: left;
    padding: 2px 8px;
    line-height: 1em;
    box-sizing: border-box;
    font-size: 1em
}

#search_box .rollover {
    background: center no-repeat #f7991e;
    background-size: auto 75%;
    width: 16%;
    height: 32px;
    border: 0;
    cursor: pointer
}

#search_box .rollover:hover {
    background-color: #8bc34a
}

#search_box .rollover i {
    font-size: 1.5em
}

h3.new-service {
    width: 100%;
    margin: 0 auto 10px;
    line-height: 2.4em;
    background: #eaebdd;
    font-weight: 700;
    color: #2c4256;
    font-size: 1em;
    clear: both
}

h3.new-service span {
    background: #f7991e;
    color: #fff;
    padding: 0 16px;
    margin-right: 10px;
    display: inline-block
}

div.search_detail div.loader {
    position: relative;
    width: 8%;
    margin: 0 auto 10px;
    border-bottom: 1px solid #eaebdd;
    padding-bottom: 10px;
    display: none
}
/*==================================================
カードグリッド（検索結果・特集一覧）
 ※ ul に .card-grid を付けたページだけに適用。
   1ページ目のBlade出力とAJAX追加分（旧マークアップ）の
   どちらも同じカードに見えるようにしている。
================================================== */
.search_detail .card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

.search_detail .card-grid > li {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    width: auto;
    float: none
}

.search_detail .card-grid > li > a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
    transition: transform .1s
}

.search_detail .card-grid > li > a:active {
    transform: scale(.95)
}

/* サムネイル（旧マークアップ：a > dl.resultReviews > dt > img ／ a > img） */
.search_detail .card-grid .resultReviews,
.search_detail .card-grid .resultReviews dt {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    float: none
}

.search_detail .card-grid .resultReviews dt img,
.search_detail .card-grid > li > a > img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    background: #f3f4f6;
    border-radius: 12px
}

.search_detail .card-grid .right-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: auto;
    float: none;
    padding: 0
}

/* サービス名は2行まで */
.search_detail .card-grid .right-box h3,
.search_detail .card-grid .service-name {
    order: 2;
    margin: 0;
    font-size: 10px;
    line-height: 1.25;
    font-weight: 700;
    color: #1f2937;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden
}

/* 説明・条件・確定時期はカードでは非表示 */
.search_detail .card-grid .text-box {
    display: none
}

/* ポイント */
.search_detail .card-grid .Point,
.search_detail .card-grid .point {
    order: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 4px 0 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #f97316
}

.search_detail .card-grid .Point:before,
.search_detail .card-grid .point:before {
    content: "";
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: url(../../../../img/user/sp/pp/ill_01.png) center/contain no-repeat
}

/* お気に入り数・クチコミ数はカードでは非表示 */
.search_detail .card-grid .Point img,
.search_detail .card-grid .Point p {
    display: none
}

/* ページ区切り（AJAX挿入）は全幅に */
.search_detail .card-grid .list_page {
    grid-column: 1 / -1
}

/* 該当なし（AJAXが li で追加してくるケース） */
.search_detail .card-grid > li:has(p.not-found),
.search_detail .card-grid > li:has(p.error-txt) {
    grid-column: 1 / -1
}


/* 見出し＋件数（カードグリッドのページ） */
.search-head .result-stats {
    margin: 0;
    font-size: .75rem;
    color: #6b7280
}

.search-head .result-stats b {
    color: #e60012
}

/* もっと見る（ローダーは初期非表示） */
.search_detail a.more_link img.loader {
    display: none
}

/* ページ区切り（AJAX挿入） */
.search_detail .list_page {
    margin: 10px 0 17px !important;
    border-top: 1px solid #eaebdd;
    border-bottom: 1px solid #eaebdd;
    text-align: center
}

.search_detail .list_page div {
    display: inline-block;
    padding: 10px 8px;
    color: #6b7280;
    font-size: 13px
}

.search_detail .list_page img {
    width: 16px;
    vertical-align: text-top;
    margin-top: 2px
}

.search_detail .list_page img.left {
    transform: rotate(180deg)
}

/* 結果なし */
.search_detail .no-results {
    text-align: center;
    padding: 40px 0
}

/* Tailwindグリッド直下に出る「該当するサービスは…」を全幅・中央に
   （/service/new_arrival のように @empty がグリッドの中に入る作りのページ用） */
.content > .grid > p.not-found {
    grid-column: 1 / -1;
    text-align: center
}


/*==================================================
お気に入り一覧（/favorite_list）
 ※ カードごとに「お気に入りを解除／追加」ボタンが入るので、
   標準の4列ではなく3列にしてボタンの文字が収まるようにしている。
   .favoriteBox 側（mypage.css）の旧ボタン装飾を上書きする。
================================================== */
.search_detail .card-grid.favorite-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

/* サービス名が1行でも2行でもボタンの高さを揃える */
.search_detail .card-grid.favorite-grid > li {
    display: flex;
    flex-direction: column
}

.search_detail .card-grid.favorite-grid > li > a {
    flex: 1 1 auto
}

.search_detail .card-grid.favorite-grid .service-name {
    margin-top: auto
}

.search_detail .card-grid .favo-btn {
    margin-top: 4px;
    background: none;
    border: none;
    overflow: visible
}

.search_detail .card-grid .favo-btn a.favorite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5px 4px;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    color: #6b7280;
    text-align: center
}

.search_detail .card-grid .favo-btn a.favorite:hover {
    border: 1px solid #e60012;
    background: #fff5f5;
    box-shadow: none;
    color: #e60012
}

.search_detail .card-grid .favo-btn a.favorite img {
    width: 12px;
    height: 12px;
    max-width: 12px;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    vertical-align: middle
}

/* お気に入りが0件のときの文言を全幅・中央に */
.search_detail p.no-favo {
    margin: 20px 0;
    text-align: center;
    font-size: .85rem;
    color: #555
}