/* =========================================================
   B-biz SINGLE PAGE — CLEAN VERSION
========================================================= */
/* =========================================================
   ▼ B-biz SINGLE：背景
========================================================= */

/* ▼ 全体の基本レイアウト */
#bbiz-single {
max-width:1044px;
margin: 0 auto;
padding:160px 10px 40px;
}

.nav-arrow-img {
  width: 28px;
  height: auto;
}

/*　背景部分の色　*/

.single{
  background: url('https://bbiz.xsrv.jp/bbiz/wp-content/uploads/2025/12/250924_BbizWEB_PC_ketu_TOP_10.jpg')
              repeat-y center top;
  background-size: cover;
}


/* =========================================================
   B-biz：カテゴリー別カラー設定（完成版）
========================================================= */

/* =====================
   観光マーケティング
===================== */
.bbiz-category-box.cat-tourism {
  border: 1px solid #d4936c;
}
.cat-tourism .bbiz-maincat {
  background-color: #d4936c;
}
.cat-tourism .bbiz-date-right::after {
  background-color: #d4936c;
}
.cat-tourism .bbiz-subcat-button {
  background-color: #d4936c;
}
.cat-tourism .bbiz-subcat-button::after {
  color: #d4936c;
}


/* =====================
   地域ビジネスプロデュース
===================== */
.bbiz-category-box.cat-region {
  border: 1px solid #93bb9e;
}
.cat-region .bbiz-maincat {
  background-color: #93bb9e;
}
.cat-region .bbiz-date-right::after {
  background-color: #93bb9e;
}
.cat-region .bbiz-subcat-button {
  background-color: #93bb9e;
}
.cat-region .bbiz-subcat-button::after {
  color: #93bb9e;
}


/* =====================
   BIP事業
===================== */
.bbiz-category-box.cat-bip {
  border: 1px solid #9dbfd8;
}
.cat-bip .bbiz-maincat {
  background-color: #9dbfd8;
}
.cat-bip .bbiz-date-right::after {
  background-color: #9dbfd8;
}
.cat-bip .bbiz-subcat-button {
  background-color: #9dbfd8;
}
.cat-bip .bbiz-subcat-button::after {
  color: #9dbfd8;
}

/* =========================================================
   ▼ カテゴリーボックス（外枠）
   ＝ カテゴリー背景色で囲み、内側は白で記事をまとめる
========================================================= */

.bbiz-category-box {
width: min(100%, 1000px); /* ←中央寄せしたい幅 */
background-color:#fff;
padding: 0;
margin: 0 auto;
 box-sizing: border-box; 
}

/* ===============================
   ▼ 強制：記事外枠（最終保険）
================================ */

.bbiz-category-box {
  border: 1px solid transparent;
}

.bbiz-category-box.cat-tourism {
  border-color: #d4936c;
}

.bbiz-category-box.cat-region {
  border-color: #93bb9e;
}

.bbiz-category-box.cat-bip {
  border-color: #9dbfd8;
}



/* =========================================================
   ▼ 内側（本文エリア）
========================================================= */

/* 内側（本文部） */
.bbiz-inner {
  background: #ffffff;
  padding: 60px;
  /*border-radius: 10px;*/
}

.related-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 25px;
}


/* =========================================================
   ▼ サブカテゴリーボタン（形状のみ）
========================================================= */

.bbiz-subcat-button-wrapper {
  text-align: center;
  margin: 5px auto;
  width: 100%;
}

.bbiz-subcat-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 16px 60px 16px 40px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  position: relative;
  transition: 0.25s;
  max-width: 90%;
  white-space: nowrap;
}

.bbiz-subcat-button::after {
  content: "›";
  position: absolute;
  right: 20px;
  width: 28px;
  height: 28px;
  background: #fff;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
}



/* =========================================================
   ▼ 見出し・タイトル・日付
========================================================= */

.bbiz-title {
  font-size: 28px;
  margin-bottom: 10px;
  font-weight: 700;
}

.bbiz-date,
.bbiz-date-right {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

/* ▼ 投稿日（右寄せ・太字・Jost） */

/* ▼ 投稿日（右寄せ・太字・Jost） */
.bbiz-date-right {
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    font-family: "Jost", sans-serif;
    color: #333;
    position: relative;
    padding-right: 14px;   /* 縦線のスペース */
    margin-bottom: 10px;
}

/* ▼ 縦線（カテゴリ色に変わる部分） */
.bbiz-date-right::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 3px;           /* ← 太さ（ここを太くできる） */
    height: 100%;
    background-color: transparent; 
    border-radius: 2px;   /* 少し丸めると綺麗 */
}


/* =========================================================
   ▼ アイキャッチ
========================================================= */
.bbiz-eyecatch img {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}


/* =========================================================
   ▼ 本文
========================================================= */
.bbiz-content {
  font-size: 18px;
  line-height: 2.0;
  margin-bottom: 60px;
}


/* =========================================================
   ▼ カテゴリー・サブカテゴリー
========================================================= */

/* カテゴリー（右上／背景色付き／共通デザイン） */
.bbiz-maincat {
  width: 280px;
  text-align: center;
  color: #fff;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 16px;
  margin-left: auto; /* 右寄せ */
  margin-bottom: 10px;
}


/* サブカテゴリ（左）＋ 日付（右） */
.bbiz-subcat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

/* サブカテゴリ */
.bbiz-subcat-left {
  width: 280px;
  font-size: 14px;
  font-weight: 600;
  background-color: #6ab5bf;
  color: #fff;
  padding: 3px 10px;
  text-align: center;
  display: inline-block;
}

/* =========================================================
   ▼ 前 / News一覧 / 次（共通）
========================================================= */
.bbiz-mid-nav {
  margin: 50px 0;
}

/* =========================================================
   ▼ PC：横並び
========================================================= */
.bbiz-mid-nav-pc {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bbiz-mid-nav-pc > div {
  flex: 1;
  text-align: center;
}

.bbiz-mid-nav-pc a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
  color: #000;
}

/* 中央の縦線 */
.nav-center {
  position: relative;
}

.nav-center::before,
.nav-center::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 20px;
  background: #000;
  opacity: 0.25;
  transform: translateY(-50%);
}

.nav-center::before { left: -20px; }
.nav-center::after  { right: -20px; }

/* =========================================================
   ▼ SP：B-biz MID NAV
========================================================= */
@media (max-width: 768px) {

  /* ==============================
     共通：SPではPCナビを非表示
  ============================== */
  .bbiz-mid-nav-pc {
    display: none;
  }

  /* ==============================
     SPナビ全体
  ============================== */
  .bbiz-mid-nav-sp {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
    width: 100%;
  }

  /* ==============================
     1段目：前の記事 / 次の記事
  ============================== */
  .bbiz-mid-nav-sp .sp-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  .bbiz-mid-nav-sp .sp-row a {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    color: #000;
  }

  .bbiz-mid-nav-sp .sp-row a:first-child {
    justify-content: flex-start;
  }

  .bbiz-mid-nav-sp .sp-row a:last-child {
    justify-content: flex-end;
  }

  /* ==============================
     2段目：News一覧（文字＋画像）
  ============================== */
  .sp-news {
    text-align: center;
    margin-top: 8px;
  }

  .sp-news-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
  }

  .sp-news-text {
    font-size: 18px;
    font-weight: 700;
    color: #6ab5bf;
  }

  .sp-news-line {
    width: 180px;   /* 線の長さは画像側で調整 */
    height: auto;
    display: block;
  }
}


/* =========================================================
   ▼ PC：SPナビを非表示
========================================================= */
@media (min-width: 769px) {
  .bbiz-mid-nav-sp {
    display: none;
  }
}


/* =========================================================
   ▼ MID NAV 共通装飾
========================================================= */
.bbiz-mid-nav {
  border-top: none;
  border-bottom: none;
}



/* =========================================================
   ▼ PC / SP 共通：下部「News 一覧」
========================================================= */

.bbiz-related-newslink {
width:100%;
  margin: 0 auto;
padding-bottom:40px;
  text-align: center;
background-color:#fff;
}
/* =========================================================
   ▼ 下部 News一覧：画面いっぱいの白帯
========================================================= */
/*.bbiz-related-newslink {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  width: 100vw;
  background-color: #fff;
  padding: 80px 0;
}
*/

.bbiz-related-newslink a {
  display: inline-block;
  text-decoration: none;
  color: #6ab5bf;
}

/* 上の文字 */
.bbiz-related-newslink .news-text {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* 線＋矢印（画像そのもの） */
.news-line-arrow {
  display: block;
  /*width: 200px!important; */     /* ← ここだけで長さを決める */
  /*max-width: 90%; */   /* SPでは自然に縮む */
  height: auto;
  margin: 0 auto;
}




/* =========================================================
   ▼ 関連記事：SPは縦に3つ（1カラム）
========================================================= */

.bbiz-related-items {
  display: flex;
  gap: 20px;
}

/* PC：3列 */
@media screen and (min-width: 901px) {
  .bbiz-related-items {
    flex-wrap: nowrap;
  }
  .bbiz-related-item {
    width: calc(33.333% - 14px);
  }
}

/* タブレット：2列 */
@media screen and (max-width: 900px) {
  .bbiz-related-items {
    flex-wrap: wrap;
  }
  .bbiz-related-item {
    width: 48%;
  }
}

/* SP：1列（縦に3つ） */
@media screen and (max-width: 600px) {
  .bbiz-related-items {
    flex-direction: column;
  }
  .bbiz-related-item {
    width: 100%;
  }
}

/* =========================================================
   ▼ 関連記事：SPで1記事をしっかりしたサイズに
========================================================= */

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

  .bbiz-related-item {
    display: block;          /* aタグをブロック化 */
    width: 100%;
  }

  .bbiz-related-item .thumb {
    width: 100%;
  }

  .bbiz-related-item .thumb img {
    width: 100%;
    height: auto;
    display: block;
  }

  .bbiz-related-item .date,
  .bbiz-related-item .title {
    text-align: left;
  }
}

/* SPでは関連記事を縦に並べるだけ */
@media screen and (max-width: 600px) {
  .bbiz-related-items {
    flex-direction: column;
  }

  .bbiz-related-item {
    width: 100%;
  }
}
@media screen and (max-width: 600px) {

  .bbiz-related-items {
    flex-direction: column;
  }

  .bbiz-related-item {
    width: 100%;
  }

  .bbiz-related-item .thumb {
    height: auto;
  }

  .bbiz-related-item .thumb img {
    height: auto;
    object-fit: contain; /* ← ここが決定打 */
  }
}
/* SPでは関連記事を縦並び・幅100%に固定 */
@media screen and (max-width: 600px) {
  .bbiz-related-items {
    flex-direction: column;
  }

  .bbiz-related-items > .bbiz-related-item {
    width: 100% !important;
  }
}

/* =========================================================
   ▼ SP：カテゴリー・サブカテゴリー・日付の並び変更
========================================================= */
@media (max-width: 768px) {
	#bbiz-single{
padding-top:100px;
}
	
  /* ■ カテゴリー：横幅100%・中央 */
  .bbiz-maincat {
    width: 100%!important;
    margin: 0 auto 12px;
    text-align: center;
  }

  /* ■ サブカテゴリ＋日付：縦並びに変更 */
  .bbiz-subcat-row {
    flex-direction: column;
    align-items: stretch; /* 横幅を活かす */
    gap: 8px;
  }

  /* ■ サブカテゴリー：中央寄せ */
  .bbiz-subcat-left {
    width: auto;
    margin: 0 auto;
    text-align: center;
  }

  /* ■ 日付：右寄せ（縦線も維持） */
  .bbiz-date-right {
    width: 100%;
    text-align: right;
  }
}



/* =========================================================
   B-biz：カテゴリー別カラー設定（Projectボタン対応・最終版）
========================================================= */

/* ▼ 共通（念のため） */
.bbiz-subcat-button {
  color: #fff;
  text-decoration: none;
}

/* =====================
   観光マーケティング
===================== */
.bbiz-subcat-button.cat-tourism {
  background-color: #d4936c;
}
.bbiz-subcat-button.cat-tourism::after {
  color: #d4936c;
}

/* =====================
   地域ビジネスプロデュース
===================== */
.bbiz-subcat-button.cat-region {
  background-color: #93bb9e;
}
.bbiz-subcat-button.cat-region::after {
  color: #93bb9e;
}

/* =====================
   BIP事業
===================== */
.bbiz-subcat-button.cat-bip {
  background-color: #9dbfd8;
}
.bbiz-subcat-button.cat-bip::after {
  color: #9dbfd8;
}

/* =========================================================
   ▼ Project 見出し（中央寄せ）
========================================================= */
.bbiz-related-project-title {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  margin: 40px auto 20px;
  letter-spacing: 0.05em;
}

/* =========================================================
   ▼ 関連記事：すべて見るボタン
========================================================= */
.bbiz-related-more {
  text-align: center;
  margin-top: 30px;
}

.bbiz-related-more a {
width:280px;
  display: inline-block;
  padding: 10px 32px;
  border: 2px solid #6ab5bf;
  color: #6ab5bf;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.25s;
  background-color: #fff;
}

.bbiz-related-more a:hover {
  background-color: #6ab5bf;
  color: #fff;
}


#content{
margin-bottom:0;
}

/* 「すべて見る」ボタンの下に余白を追加 */
.bbiz-related-more {
  margin-bottom: 60px; /* 好みで 40〜80px に調整可 */
}



/* =========================================================
   ▼ 関連記事（記事枠外）
========================================================= */

.bbiz-related-box {
  /*background: #ffffff;*/
  padding: 60px 20px;
  margin-top: 80px;
}

/* 上段のサブカテゴリ帯（色は固定 #6ab5bf） */
.bbiz-related-subcat {
  background: #6ab5bf;
  padding: 12px 20px;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  border-radius: 3px;
  margin-bottom: 35px;
}

/* 3カラム */
.bbiz-related-items {
  display: flex;
  justify-content: space-between;
  gap: 30px;
}

.bbiz-related-item {
  width: 33.333%;
  text-decoration: none;
  color: #000;
}

.bbiz-related-item .thumb img {
  width: 100%;
  border-radius: 2px;
}

.bbiz-related-item .date {
  margin-top: 10px;
  font-size: 13px;
  color: #333;
}

.bbiz-related-item .title {
  font-size: 15px;
  line-height: 1.6;
  margin-top: 8px;
}


/* すべて見る */
.bbiz-related-more {
  text-align: center;
  margin-top: 40px;
}

.bbiz-related-more a {
	width:280px;
  display: inline-block;
  padding: 12px 40px;
  border: 2px solid #6ab5bf;
	background-color:#fff;
  color: #6ab5bf;
  /*border-radius: 4px;*/
  font-size: 15px;
  text-decoration: none;
  transition: 0.3s;
}

.bbiz-related-more a:hover {
  background: #6ab5bf;
  color: #fff;
}

/* ▼ 関連記事：日付を右寄せ */
.bbiz-related-item .date {
    margin-top: 10px;
    font-size: 13px;
    color: #333;
    text-align: right;   /* ← 右寄せ */
    font-weight: 600;
}

/* ▼ 関連記事：タイトルを太字に */
.bbiz-related-item .title {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 8px;
    font-weight: 700;   /* ← Bold */
}

/* ▼ 関連記事：画像を揃える */
.bbiz-related-item .thumb {
    width: 100%;
    height: 200px; /* ← 好きな高さに変更可能（180〜240推奨） */
    overflow: hidden;
}

.bbiz-related-item .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ← これが画像を綺麗に整えるポイント！ */
    border-radius: 2px;
}



.bbiz-related-project-title {
	 font-family: "Jost", sans-serif;
    text-align: center;
    font-size: 24px;
    font-weight: 600;
	margin-top:80px;
    margin-bottom: 15px;
    color: #000;
}

/*　News一覧へのリンクボタン　*/

.bbiz-related-newslink {
    width: 100vw; /* 画面幅いっぱい */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    text-align: center;
	background-color:#fff;
    padding-top: 100px !important;
    padding-bottom: 100px !important;

    display: block !important;
    position: relative;
    z-index: 2;
}

.bbiz-related-newslink{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);


}


.bbiz-related-newslink img {
    width: auto;
    max-width: 100%;
}





/* =========================================================
   B-biz SINGLE PAGE — SP ONLY CLEAN FINAL
   ※ PCデザインは一切変更しない
========================================================= */
@media (max-width: 768px) {

  /* =====================================
     全体ラッパー（背景＋白箱までの距離）
  ===================================== */
  #bbiz-single {
    padding-top: 70px;   /* 100 → 70 */
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 30px;
  }

  /* =====================================
     白いカード（本文エリア）
  ===================================== */
  .bbiz-inner {
    padding: 12px!important;       
  }

  /* =====================================
     カテゴリー帯
  ===================================== */
  .bbiz-maincat {
    width: 100% !important;
    margin-bottom: 10px;
    font-size: 15px;
  }

  /* サブカテゴリ＋日付 */
  .bbiz-subcat-row {
    gap: 6px;
    margin-bottom: 10px;
  }

  .bbiz-subcat-left {
    padding: 4px 12px;
    font-size: 13px;
  }

  .bbiz-date-right {
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* =====================================
     タイトル
  ===================================== */
  .bbiz-title {
    font-size: 22px;     /* PCの迫力は維持、SPは読みやすく */
    line-height: 1.5;
    margin-bottom: 12px;
  }

  /* =====================================
     アイキャッチ
  ===================================== */
  .bbiz-eyecatch img {
    margin-bottom: 16px; /* 30 → 16 */
  }

  /* =====================================
     本文
  ===================================== */
  .bbiz-content {
    font-size: 16px;
    line-height: 1.9;    /* 詰めすぎず、白すぎず */
    margin-bottom: 40px;
  }

  /* =====================================
     サブカテゴリーボタン
  ===================================== */
  .bbiz-subcat-button {
    padding: 14px 44px 14px 32px;
    font-size: 15px;
  }

  .bbiz-subcat-button::after {
    right: 14px;
    width: 24px;
    height: 24px;
    font-size: 14px;
  }

  /* =====================================
     前 / 次 / News一覧（SPナビ）
  ===================================== */
  .bbiz-mid-nav-sp {
    margin-top: 30px;
    gap: 20px;
  }

  .bbiz-mid-nav-sp .sp-row {
    padding: 0;
  }

  /* =====================================
     関連記事ブロック
  ===================================== */
  .bbiz-related-box {
    padding: 40px 12px;
    margin-top: 60px;
  }

  .bbiz-related-subcat {
    font-size: 16px;
    padding: 10px 12px;
    margin-bottom: 24px;
  }

  /* =====================================
     関連記事：カード間隔
  ===================================== */
  .bbiz-related-items {
    gap: 24px;
  }

  /* =====================================
     「すべて見る」ボタン
  ===================================== */
  .bbiz-related-more {
    margin-top: 24px;
    margin-bottom: 40px;
  }

  .bbiz-related-more a {
    width: 240px;
    padding: 12px 0;
    font-size: 14px;
  }

  /* =====================================
     画面いっぱい白帯（News一覧リンク）
  ===================================== */
  .bbiz-related-newslink {
    padding-top: 50px !important;   /* 100 → 50 */
    padding-bottom: 50px !important;
  }

  .bbiz-related-newslink .news-text {
    font-size: 15px;
    margin-bottom: 10px;
  }
}