@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* ==========================================
   タブ切り替え投稿一覧（BUSINESSページデザイン適用）
   ========================================== */
.multi-tab-area {
  max-width: 1000px;
  margin: 0 auto 2em;
}

/* タブボタンの親要素 */
.multi-tab-area .tab-menu {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0 0 30px 0;
  gap: 12px;
  border-bottom: none; /* 下線を消す */
}

/* 各タブボタンの標準デザイン（スマホ：2×2配置） */
.multi-tab-area .tab-menu li {
  flex: 1 1 calc(50% - 6px); /* スマホは2列 */
  box-sizing: border-box;
  text-align: center;
  padding: 12px 10px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.95rem;
  color: #475569 !important;
  background-color: #ffffff;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  transition: all 0.3s ease;
  user-select: none;
  white-space: nowrap;
}

/* PC表示（画面幅768px以上）のときは1列に4つ並べる */
@media screen and (min-width: 768px) {
  .multi-tab-area .tab-menu li {
    flex: 1 1 calc(25% - 10px); /* PCは4列 */
  }
}

/* ホバー時 */
.multi-tab-area .tab-menu li:hover {
  background-color: #f8f9fa;
  border-color: #cbd5e1 !important;
}

/* ------------------------------------------
   選択中のアクティブカラー（色分け指定）
   ------------------------------------------ */

/* 1. すべての実績：黒 */
.multi-tab-area .tab-menu li.is-active[data-tab="tab-all"] {
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

/* 2. MonoGress：赤グラデ */
.multi-tab-area .tab-menu li.is-active[data-tab="tab-monogress"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #9f1f24, #661115) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(159, 31, 36, 0.4) !important;
}

/* 3. SAS：濃青グラデ */
.multi-tab-area .tab-menu li.is-active[data-tab="tab-sas"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #1b66b7, #003a7c) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(27, 102, 183, 0.4) !important;
}

/* 4. MonoSight：青グラデ */
.multi-tab-area .tab-menu li.is-active[data-tab="tab-monosight"] {
  color: #ffffff !important;
  background: linear-gradient(135deg, #007bff, #1b66b7) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.4) !important;
}
/* タブ切り替えコンテンツ */
.multi-tab-area .tab-content {
  display: none;
}

.multi-tab-area .tab-content.is-active {
  display: block;
}

/* 記事カードのレイアウト */
.multi-tab-area .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
}

.multi-tab-area .card-item {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.multi-tab-area .card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.multi-tab-area .card-item a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.multi-tab-area .card-thumb img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.multi-tab-area .card-body {
  padding: 18px;
}

.multi-tab-area .card-title {
  font-size: 1rem;
  font-weight: bold;
  margin: 0 0 10px 0;
  line-height: 1.4;
  color: #222;
}

.multi-tab-area .card-date {
  font-size: 0.85rem;
  color: #888;
}
/* カテゴリーページのSWELL標準投稿一覧（2段目）を隠す */
.category .p-postList,
.archive .p-postList {
  display: none !important;
}
/* ========================================
   基本設定
======================================== */
.parts-tsubuyaki * {
  box-sizing: border-box;
}

/* ========================================
   タブ（PC）
======================================== */
.parts-tsubuyaki .category-tabs {
  text-align: center;
  margin-bottom: 25px;
  justify-content: center;
}

/* ✅ 日本語：PCは1段・横スクロール（絶対に折り返さない） */
.parts-tsubuyaki:not(.is-multilingual) .category-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
  gap: 8px !important;
  padding-bottom: 5px !important;
}

.parts-tsubuyaki .category-tabs::-webkit-scrollbar {
  display: none;
}

/* ✅【修正】多言語：PCは強制4列グリッド（4×3）。文字が長いのでボタン自体は小さめに */
.parts-tsubuyaki.is-multilingual .category-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
  overflow: visible !important;
  padding-bottom: 0 !important;
}

.parts-tsubuyaki .tsubu-btn {
  text-align: center !important;
  padding: 10px 16px !important;
  border-radius: 8px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  font-weight: bold;
  cursor: pointer;
  color: #666;
  font-size: 14px;
  transition: 0.2s;
}

/* 日本語：横スクロールタブ用の幅指定 */
.parts-tsubuyaki:not(.is-multilingual) .tsubu-btn {
  flex: 0 0 auto !important;
  width: auto !important;
}

/* ✅【修正】多言語：グリッドタブ用の幅指定＋文字が長いのでサイズを縮小・折り返し許可 */
.parts-tsubuyaki.is-multilingual .tsubu-btn {
  width: 100% !important;
  font-size: 12px !important;
  padding: 8px 10px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
}

.parts-tsubuyaki .tsubu-btn.active {
  font-weight: bold;
  color: #fff !important;
  background: #212121 !important;
  border-color: #212121 !important;
}

/* ========================================
   記事リストの表示制御（折りたたみ）
======================================== */
.parts-tsubuyaki .post-list {
  display: none;
}

.parts-tsubuyaki .post-list.cat-all {
  display: block;
}

.parts-tsubuyaki:not(.is-expanded) .p-postList__item:nth-child(n+5) {
  display: none !important;
}

.parts-tsubuyaki.is-expanded .p-postList__item {
  display: block !important;
}

/* ========================================
   日本語：1段レイアウト（絶対にこれ以外にならない）
======================================== */
.parts-tsubuyaki:not(.is-multilingual) .p-postList__body {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  overflow: hidden !important;
}

.parts-tsubuyaki:not(.is-multilingual) .p-postList__meta {
  display: contents !important;
}

.parts-tsubuyaki:not(.is-multilingual) .p-postList__times {
  flex: 0 0 90px !important;
  width: 90px !important;
  white-space: nowrap !important;
}

.parts-tsubuyaki:not(.is-multilingual) .p-postList__cat {
  flex: 0 0 190px !important;
  width: 190px !important;
  margin: 0 20px !important;
  white-space: nowrap !important;
  display: inline-block !important;
  text-align: center !important;
  border-radius: 4px;
  padding: 3px 8px !important;
  line-height: 1.2 !important;
}

.parts-tsubuyaki:not(.is-multilingual) .p-postList__title {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  font-size: 15px !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}

/* サムネイル・アイコン非表示 */
.parts-tsubuyaki .icon-posted::before,
.parts-tsubuyaki .c-postThumb {
  display: none !important;
}

/* 区切り線 */
.parts-tsubuyaki .p-postList__item > a {
  padding: 15px 0 !important;
  border-bottom: 1px dotted #ccc !important;
  display: block !important;
}

/* ========================================
   MORE ∨ ボタン
======================================== */
.parts-tsubuyaki .tsubuyaki-more-wrapper {
  text-align: center;
  margin-top: 25px;
}

.parts-tsubuyaki .tsubu-more-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 32px;
  background-color: #ffffff;
  color: #212121;
  font-weight: bold;
  border-radius: 20px;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  line-height: 1.2;
}

.parts-tsubuyaki .tsubu-more-btn:hover {
  background-color: #212121;
  color: #ffffff;
  border-color: #212121;
}

.parts-tsubuyaki .tsubu-more-btn .btn-text {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.parts-tsubuyaki .tsubu-more-btn .arrow {
  font-size: 11px;
  margin-top: 2px;
  transition: transform 0.3s ease;
  display: inline-block;
}

.parts-tsubuyaki.is-expanded .tsubu-more-btn .arrow {
  transform: rotate(180deg);
}

.parts-tsubuyaki.is-hide-more .tsubuyaki-more-wrapper {
  display: none !important;
}

/* ========================================
   多言語：2段レイアウト
   ✅【修正】Gridで「日付＝左列／カテゴリ・タイトル＝右列」の構造にする。
   これでタイトルの1文字目が必ずカテゴリの1文字目の真下に揃う
   （日付の文字数が翻訳で変わっても崩れない）
======================================== */
.parts-tsubuyaki.is-multilingual .p-postList__body {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  column-gap: 14px !important;
  row-gap: 4px !important;
  align-items: start !important;
  width: 100% !important;
}

.parts-tsubuyaki.is-multilingual .p-postList__meta {
  display: contents !important;
}

.parts-tsubuyaki.is-multilingual .p-postList__times {
  grid-column: 1 !important;
  grid-row: 1 !important;
  white-space: nowrap !important;
  margin: 0 !important;
}

.parts-tsubuyaki.is-multilingual .p-postList__cat {
  grid-column: 2 !important;
  grid-row: 1 !important;
  white-space: nowrap !important;
  justify-self: start !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border-radius: 4px;
  line-height: 1.2 !important;
}

.parts-tsubuyaki.is-multilingual .p-postList__title {
  grid-column: 2 !important;
  grid-row: 2 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  margin: 0 !important;
}

/* ========================================
   スマホレスポンシブ
======================================== */
@media (max-width: 767px) {
  /* ✅ 日本語スマホ：元の2列仕様に固定 */
  .parts-tsubuyaki:not(.is-multilingual) .category-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .parts-tsubuyaki:not(.is-multilingual) .tsubu-btn {
    flex: 0 0 calc(50% - 4px) !important;
    width: calc(50% - 4px) !important;
    max-width: calc(50% - 4px) !important;
    margin: 0 !important;
  }

  /* ✅【修正】多言語スマホ：文字数が多いので1列縦積みに変更（PCの4列グリッドは無効化） */
  .parts-tsubuyaki.is-multilingual .category-tabs {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    gap: 8px !important;
  }

  .parts-tsubuyaki.is-multilingual .tsubu-btn {
    flex: 0 0 100% !important;
    width: 100% !important;
    font-size: 12px !important;
    padding: 10px !important;
    white-space: normal !important;
  }

 /* ========================================
   日本語スマホ：日付・カテゴリ・タイトルを固定
======================================== */

.parts-tsubuyaki:not(.is-multilingual) .p-postList__body {
  display: grid !important;
  grid-template-columns: 75px 90px minmax(0, 1fr) !important;
  column-gap: 0 !important;
  align-items: center !important;
  width: 100% !important;
}

/* 日付 */
.parts-tsubuyaki:not(.is-multilingual) .p-postList__times {
  grid-column: 1 !important;
  width: 75px !important;
  min-width: 75px !important;
  max-width: 75px !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

/* カテゴリ */
.parts-tsubuyaki:not(.is-multilingual) .p-postList__cat {
  grid-column: 2 !important;
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  margin: 0 !important;
  padding: 3px 4px !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
}

/* タイトル */
.parts-tsubuyaki:not(.is-multilingual) .p-postList__title {
  grid-column: 3 !important;
  min-width: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

  /* 多言語スマホ：記事レイアウト */
  .parts-tsubuyaki.is-multilingual .p-postList__times {
    font-size: 12px !important;
  }

  .parts-tsubuyaki.is-multilingual .p-postList__cat {
    font-size: 11px !important;
  }

  .parts-tsubuyaki.is-multilingual .p-postList__title {
    font-size: 13px !important;
  }
}
/* 多言語（is-multilingual）の時のタブボタンの高さを日本語と統一 */
.parts-tsubuyaki.is-multilingual .tsubu-btn {
  height: 46px !important;        /* ★日本語タブの高さに合わせて数値を指定（例: 40px〜45px） */
  min-height: 42px !important;    /* 伸びないように固定 */
  padding: 4px 12px !important;   /* 上下の内側余白を詰めて高さに収める */
  line-height: 1.15 !important;   /* 2段テキストの行間をキュッと詰める */
  display: inline-flex !important;
  align-items: center !important;  /* テキストを上下中央揃え */
  justify-content: center !important;
  font-size: 12px !important;     /* 文字サイズを1〜2px小さくすると綺麗に収まります */
}