/*
Theme Name: ロジキャリナビ20260415
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;
    }
  }