@charset "UTF-8";
/* ============================================================
   カルーセル版：閲覧履歴からのオススメ（TOP）
   ============================================================ */

/* カルーセルの外枠（ナビ矢印の基準） */
.recmnd-carousel { position: relative; }

/* Swiper 化後の #recmnd_addarea（= swiper-container）
   固定 height / overflow-x:scroll を解除し、Swiper に任せる。
   カードサイズはそのままに、親側に影の逃げ場となる内側 padding を確保する。
   overflow:hidden は横送りのクリップに必要なので残すが、padding ぶんの余白が
   あればその中にあるカードのドロップシャドウは切り落とされない（上下左右とも）。 */
.recmnd-carousel #recmnd_addarea.swiper-container {
    overflow: hidden;
    padding: 12px 14px 20px;
    margin-left: 0;
    margin-right: 0;
}

/* #recmnd_addarea の高さ上書き。
   ※元CSSは触らず本ファイルで上書き。link を外せば元の高さ(296/311px)に戻る。 */
.l_index .index-main .index-history .recmnd-carousel #recmnd_addarea.swiper-container,
.l_index .index-main .index-main-history .recmnd-carousel #recmnd_addarea.swiper-container {
    height: 320px;
}

/* swiper-wrapper は flex。既存 .contents_list の flex を踏襲しつつ Swiper に委譲。
   align-items:flex-start で、スライドが flex stretch により縦に伸びるのを防ぐ
   （各カードを中身なりの高さにして現行の見た目に揃える）。 */
.recmnd-carousel #recmnd_addarea .swiper-wrapper {
    display: flex;
    align-items: flex-start;
    box-sizing: border-box;
}

/* スライド（swiper-slide）。幅は Swiper が slidesPerView に応じて自動計算するので
   width は指定しない。 */
.recmnd-carousel #recmnd_addarea .swiper-slide {
    height: auto;
    box-sizing: border-box;
    text-align: left;       /* 文字センター寄せを解除（カードは左寄せ） */
    background: none;       /* スライド自体の白背景を解除（白はカード側が持つ） */
    width: auto;            /* width:800px を解除（幅は Swiper が計算） */
    border-radius: 0;
    overflow: visible;      /* カードの影が見切れないように */
    box-shadow: none;       /* スライドの影を解除（影はカード側が持つ） */
    font-size: inherit;     /* font-size:18px を解除 */
}

/* 末尾ページ埋め用の空スライド（スナップ調整のためだけに幅を占有し、中身は非表示）。
   最後のページで端数のカードだけが見える状態をつくる。 */
.recmnd-carousel #recmnd_addarea .swiper-slide.recmnd-slide-empty {
    visibility: hidden;
    pointer-events: none;
}

/* スライド内のカードはスライド幅にフィットさせ、固定幅(208/240px)を上書き。
   マージンはリセット（間隔は Swiper の spaceBetween で付ける）。
   高さは中身なり（現行と同じ）に戻す。height:100% にすると Swiper の flex
   stretch で全カードが最長カードの高さに揃ってしまい、現行より高くなるため。 */
.recmnd-carousel #recmnd_addarea .swiper-slide .contents_item {
    width: 100%;
    min-width: 0;
    margin: 0;
    height: auto;
}

/* カード上部のメイン画像はカード幅に収める */
.recmnd-carousel #recmnd_addarea .contents_item-img { overflow: hidden; }
.recmnd-carousel #recmnd_addarea .contents_item-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 年収・勤務地のアイコンが大きく表示される対策：カルーセル内で明示的にサイズ固定 */
.recmnd-carousel #recmnd_addarea .contents_item-info img {
    width: 16px;
    height: 16px;
    margin-right: 7px;
    object-fit: contain;
    flex-shrink: 0;
}
.recmnd-carousel #recmnd_addarea .contents_item-info li:last-child img {
    width: 11px;
    height: auto;
}

/* ---- ナビ矢印 ----
   swiper.min.css の .swiper-button-prev/next（width:27px/height:44px/背景SVG/
   ::after にアイコンフォント）を上書きするため、詳細度を上げて指定する。 */
.recmnd-carousel .recmnd-carousel__prev,
.recmnd-carousel .recmnd-carousel__next {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    border-radius: 50%;
    background-color: #fff;
    background-image: none;
    box-shadow: 0 2px 8px rgba(0, 0, 74, 0.2);
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.recmnd-carousel .recmnd-carousel__prev::after,
.recmnd-carousel .recmnd-carousel__next::after {
    content: "";
    display: block;
    width: 9px;
    height: 9px;
    font-size: 0;            /* 標準のアイコンフォントを無効化 */
    border-top: 2px solid #00338B;
    border-right: 2px solid #00338B;
    background: none;
}
.recmnd-carousel .recmnd-carousel__prev { left: 2px; }
.recmnd-carousel .recmnd-carousel__next { right: 2px; }
.recmnd-carousel .recmnd-carousel__prev::after { transform: rotate(-135deg); margin-left: 3px; }
.recmnd-carousel .recmnd-carousel__next::after { transform: rotate(45deg); margin-right: 3px; }

/* ループ時は無効化されないが、念のため（loop オフ時用） */
.recmnd-carousel .recmnd-carousel__prev.swiper-button-disabled,
.recmnd-carousel .recmnd-carousel__next.swiper-button-disabled {
    opacity: .35;
    pointer-events: none;
}

/* ---- ページネーション（下の「・・」ドット。ページ単位送りに連動） ---- */
.recmnd-carousel .recmnd-carousel__pagination {
    text-align: center;
    margin-top: 14px;
    position: static;
    width: 100%;
    line-height: 1;
}
.recmnd-carousel .recmnd-carousel__pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    display: inline-block;
    background-color: #c7d3e2;
    opacity: 1;
    margin: 0 5px;
    cursor: pointer;
    transition: background-color .2s, transform .2s;
}
.recmnd-carousel .recmnd-carousel__pagination .swiper-pagination-bullet-active {
    background-color: #00338B;
    transform: scale(1.2);
}

/* ---- SP 調整 ----
   SP（〜767px）はカルーセル化せず、元の横スクロール表示のまま使う。
   そのため Swiper 用のナビ矢印・ドットの空要素は隠す。
   PC 用ルールと同じ詳細度(0-2-0)にし、後勝ちで確実に隠す。 */
@media only screen and (max-width: 767px) {
    .recmnd-carousel .recmnd-carousel__prev,
    .recmnd-carousel .recmnd-carousel__next,
    .recmnd-carousel .recmnd-carousel__pagination {
        display: none;
    }
}