/*
Theme Name: ロジキャリナビ(記事用)
Theme URL: 
*/

/* 運営者情報のCSS */
p.content-size{
font-size: 23px !important;
font-weight: bold;
margin:  0 0 80px 0 !important;
}

p.content-size.title{
font-size: 30px !important;
margin-top: 50px !important;
margin-bottom: 20px !important;
}

@media (max-width: 600px){
p.content-size{
font-size: 16px !important;
margin: 10px 0 150px !important;
}

p.content-size.title{
font-size: 20px !important;
margin-top: 10px !important;
margin-bottom: 16px !important;
}
}



.textUnderColorYellow {
	background:linear-gradient(transparent 70%, #FFFF00 0%);
}


.recommend__tab {
  padding: 12px 28px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  background: #f8f8f8;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}
.recommend__tab:hover { background: #e0e0e0; }
.recommend__tab.active {
  background: #5A3D7A;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,84,166,0.3);
}

/* PC（デフォルト） */
.thumb-fixed {
width: 150px;
height: 100px;
border-radius: 6px;
overflow: hidden;
background: #f3f3f3;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* PC（デフォルト） */
.recommend__post {
  height: auto !important;
  align-items: center;
  display: flex;
}

/* すべてのタブ（最新/カテゴリ）で高さを統一して、ボタン位置を固定する */
.recommend__contentWrapper{
  position: relative;
  min-height: 380px;  /* ← ここを基準にしたい高さに調整 */
}

.recommend__contentWrapper .recommend__postWrapper{
  position: relative;
  min-height: 380px;  /* ← 全タブで揃える（上と同じ値） */
  padding-bottom: 90px; /* ボタン分のスペース */
}


@media screen and (max-width: 768px) {

  /* カード本体（上段：画像+タグ、下段：見出しをabsoluteで配置するので高さを確保） */
  a.recommend__post{
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    height: auto !important;
    padding: 10px;
    min-height: 190px;           /* ←足りなければ 200〜220px に */
    padding-bottom: 16px;
  }

  /* 画像 */
.recommend__post .thumb-fixed{
    width: 130px; 
    height: 85px;
  }

  .thumb-img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 右側（タグが入っているdiv） */
a.recommend__post .thumb-fixed + div{
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0 !important;
  margin-top: 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;     /* 横方向の基準 */
  align-content: flex-start;  /* ←これが重要：折り返し位置を上に揃える */
}

  /* 緑タグの余白調整 */
  a.recommend__post span{
  margin-bottom: 12px !important;   /* ← 4〜8px 好みで調整 */
}

  /* 見出し：画像の“下”から必ず始まるように top を固定 */
  a.recommend__post .title-s{
    position: absolute;
    left: 10px;
    right: 10px;
    top: calc(85px + 10px + 12px);
    margin: 0 !important;
    font-size: 17px;
    font-weight: bold;
    line-height: 1.4;
    /* 3行でカット（任意） */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  /* 既存のタブ調整（そのまま） */
  .recommend__tab{
    width: 100%;
    padding: 6px 12px;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }

 .recommend__tabWrapper{ --bs-gutter-x: .75rem; }

  /* TOPICS背景（紫エリア）を固定したいならココ */
  .recommend{
    min-height: 650px; /* ←好みで調整（600〜750くらい） */
  }

  /* 中身のラッパーも固定（タブ切替で高さが変わっても崩れない） */
  .recommend__contentWrapper{
    min-height: 550px; /* ←好みで調整（480〜600くらい） */

  }

  /* 2) カード群（row）とボタンの間隔を統一 */
  .recommend__postWrapper .row{
    margin-bottom: 0 !important;  /* HTML側のmargin-bottom:60px等を無効化 */
    padding-bottom: 15px;         /* ←カードとボタンの間隔（統一値） */
  }

  /* 3) すべて見るボタンを常に同じ位置に固定 */
  .recommend__postWrapper .w-100.text-center{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;                 /* ←ボタンの下位置（統一値） */
    margin: 0;
  }

}



/* 通常は下線なし */
a.under-line {
  text-decoration: none;
  color: #fff;
}
/* ホバー時・フォーカス時だけ下線 */

a.under-line:hover,
a.under-line:focus {
  text-decoration: underline;
}



@media screen and (max-width: 768px) {
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1.3fr;
    grid-template-rows: auto auto;
    gap: 1vw !important;
    padding-left: 2vw !important;
    padding-right: 2vw !important;
    max-width: 100vw !important;
    margin: 0 auto !important;
    box-sizing: border-box;
    justify-content: unset !important;
    align-items: unset !important;
  }
  .footer-grid > ul {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-grid > ul:nth-child(1) { grid-column: 1 / 2; grid-row: 1; }
  .footer-grid > ul:nth-child(2) { grid-column: 2 / 3; grid-row: 1; }
  .footer-grid > ul:nth-child(3) { grid-column: 1 / 3; grid-row: 2; margin-top: 20px !important; padding-bottom: 30px!important;}
  .to-top-btn {
    margin-bottom: 70px !important;
  }
}

	
@media screen and (max-width: 768px) {
.navbar.fixed-top + .collapse {
    position: fixed !important;
    top: 30px; /* ←ヘッダー高さ（必要なら64pxに） */
    left: 0;
    width: 100vw;
    background: #5A3D7A;
    z-index: 1031;
    padding-bottom: 20px;
  }

  body.fv-page #header-dummy-space {
    height: 5px !important;
  }
}