@charset "UTF-8";

/**
 * SP トップページ index.css
 *
 *
*/


/* ==========================================================================
   # トップページ
   ========================================================================== */
.l-main-top {
  padding: 30px 20px 40px;
}

.mainimg {
  margin-bottom: var(--main-margin);
  box-shadow: var(--main-box-shadow);
}

.top-cta-bnr {
  margin-bottom: var(--main-margin);
}
.top-cta-bnr a {
  display: block;
}
.top-cta-bnr a + a {
  margin-top: 10px;
}


/* #記事一覧
   ----------------------------------------------------------------- */
.column-item {
  margin-bottom: 22px;
}

.column-item-ttl {
  position: relative;
  padding: 15px 10px 15px 44px;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(90deg, #0A5E96 0%, #1F435C 100%);
  border-radius: 5px 5px 0 0;
}

/* 見出しアイコンベース */
.column-item-ttl::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}
/* 見出し: 高収入!ドライバー求人 */
.column-item-ttl.ttl-cta::before {
  background: transparent url("../../images/parts/side/ico_wallet.svg") no-repeat 0 0 / contain;
}
/* 見出し: 人気記事ランキング */
.column-item-ttl.ttl-ranking::before {
  background: transparent url("../../images/parts/side/ico_ranking.svg") no-repeat 0 0 / contain;
}
/* 見出し: 軽貨物ドライバー入門 */
.column-item-ttl.ttl-beginner::before {
  background: transparent url("../../images/parts/side/ico_beginner.svg") no-repeat 0 0 / contain;
}
/* 見出し: 収入が高いのは？ */
.column-item-ttl.ttl-scales::before {
  background: transparent url("../../images/parts/side/ico_scales.svg") no-repeat 0 0 / contain;
}
/* 見出し: よくある質問 */
.column-item-ttl.ttl-faq::before {
  background: transparent url("../../images/parts/side/ico_faq.svg") no-repeat 0 0 / contain;
}
/* 見出し: 地域別ガイド */
.column-item-ttl.ttl-area::before {
  background: transparent url("../../images/parts/side/ico_area.svg") no-repeat 0 0 / contain;
}

/* 見出し: 高収入!ドライバー求人「オススメ」 */
.column-item-ttl.ttl-cta::after {
  content: "オススメ";
  position: relative;
  top: -1px;
  display: inline-block;
  margin-left: 18px;
  padding: 4px 13px;
  font-size: 16px;
  color: var(--color-primary900);
  background-color: #FFBE26;
  border-radius: 12px;
}

/* 画面サイズ 414px 未満 */
@media (width < 414px) {
  .column-item-ttl.ttl-cta::after {
    content: "オススメ";
    position: relative;
    top: -3px;
    display: inline-block;
    margin-left: 8px;
    padding: 4px 7px;
    font-size: 12px;
    color: var(--color-primary900);
    background-color: #FFBE26;
    border-radius: 12px;
  }
}

/* 求人バナー
----------------------- */
.top-recommend-cta {
  display: block;
  padding: 10px 8px;
}

.top-recommend-cta .top-cta-bnr {
  margin-bottom: 0;
}
.top-recommend-cta .top-cta-bnr + .top-cta-bnr {
  margin-top: 10px;
}


/* 人気記事ランキング
----------------------- */
.column-ranking-list {
  list-style: none;
  counter-reset: listnum;
  display: grid;
  margin: 0;
  padding: 0;
}

.column-ranking-list li {
  padding: 10px 8px;
}

.column-ranking-list li + li {
  border-top: 1px dashed #DDD;
}

.column-ranking-list li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 15px;
  text-decoration: none;
  color: var(--main-text-color);
}

.column-ranking-list li a::before {
  counter-increment: listnum;
  content: counter(listnum);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding-top: 3px;
  font-size: 14px;
  line-height: 1;
  font-weight: bold;
  text-align: center;
  color: #fff;
  width: 20px;
  height: 24px;
  mask-image: url("../../images/parts/side/ico_flag.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: #FFBE26; /* svgアイコン色変更 */
}

.column-ranking-list li:nth-of-type(2) a::before {
  background-color: #A3A3A3;
}
.column-ranking-list li:nth-of-type(3) a::before {
  background-color: #C2712E;
}

.column-ranking-thumb {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.column-ranking-ttl {
  font-size: 16px;
  line-height: 1.5;
}

/* よくある質問 など
----------------------- */
.column-list li + li {
  border-top: 1px dashed #DDD;
}

.column-list li a {
  display: block;
  padding: 20px 8px;
  color: var(--main-text-color);
  font-size: 16px;
  line-height: 1.5;
  text-decoration: none;
}


/* 軽貨物ドライバー入門 など
----------------------- */
/* ピックアップ記事 */
.column-pickup-link {
  display: block;
  padding: 10px 8px;
  text-decoration: none;
  color: var(--main-text-color);
  border-bottom: 1px dashed #DDD;
}

.column-pickup-img {
  width: 100%;
  height: 48.309vw;
  margin-bottom: 15px;
  object-fit: cover;
}

.column-pickup-ttl {
  margin-bottom: 5px;
  font-size: 18px;
  line-height: 1.5;
}

.column-pickup-txt {
  font-size: 14px;
  line-height: 1.5;
}


/* サムネありコラムリスト */
.column-pic-list {
  list-style: none;
  counter-reset: listnum;
  display: grid;
  margin: 0;
  padding: 0;
}

.column-pic-list li {
  padding: 10px 8px;
}

.column-pic-list li + li {
  border-top: 1px dashed #DDD;
}

.column-pic-list li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0 15px;
  text-decoration: none;
  color: var(--main-text-color);
}

.column-pic-thumb {
  width: 86px;
  height: 86px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}

.column-pic-ttl {
  font-size: 16px;
  line-height: 1.5;
}