/* ===== connect-area Widgets — Global hard override (no wrapper required) ===== */

div#connect-area-widget-area {
    width: 100%;
}

/* コンテナ */
#connect-area-widget-box{
  background:#34414e;
  color:#fff;
  /* max-width:1200px; */
  margin:0 auto;
  padding:24px 16px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
}
@media (max-width:767px){ #connect-area-widget-box{ display:block; } }

/* カラム割り */
#connect-area-widget-logo{ flex:1; }
#connect-area-widget-center-box{ flex:2.5; display:flex; gap:32px; }
#connect-area-widget-center1{ flex:.8; }
#connect-area-widget-center2{ flex:1.5; }
#connect-area-widget-right{ flex:1; }

/* 見出し */
#connect-area-widget-right .widgettitle,
#connect-area-widget-center-box .widgettitle{
  color:#fff; border-bottom:1px solid #fff; -webkit-font-smoothing:antialiased;
  margin:0 0 1.6rem; line-height:1.5;
}
@media (min-width:768px){
  #connect-area-widget-right .widgettitle,
  #connect-area-widget-center-box .widgettitle{
    font-size:18px !important; margin-bottom:2.1rem; line-height:25px !important;
  }
}

/* 共通リンク/リスト */
#connect-area-widget-box a{ color:#fff; text-decoration:none; }
#connect-area-widget-box a:hover{ text-decoration:underline; }
#connect-area-widget-box .widget_nav_menu ul{ list-style:none; margin:0; padding:0; }
#connect-area-widget-right .widget_nav_menu ul li,
#connect-area-widget-center-box .widget_nav_menu ul li{ border:0; }

/* ロゴ */
#connect-area-widget-logo .tn-logo-size img{ width:auto; height:auto; max-width:200px; }
@media (max-width:767px){
  #connect-area-widget-logo{ margin-bottom:2rem; }
  #connect-area-widget-logo .tn-logo-size img{ max-width:150px; }
}

/* CATEGORY */
#connect-area-widget-center1 .widget_nav_menu ul li{ margin-bottom:1.25rem; }
#connect-area-widget-center1 .widget_nav_menu ul li a{ padding-left:0 !important; }
@media (min-width:768px){
  #connect-area-widget-center1 .widget_nav_menu ul li a{ font-size:18px !important; }
}
@media (max-width:767px){
  #connect-area-widget-center1 .widget_nav_menu ul li a{ padding:0 !important; }
}

/* TAG（ピル） */
#connect-area-widget-center2 .widget_nav_menu ul li{ display:inline-block; margin:.5rem .1rem .2rem; }
#connect-area-widget-center2 .widget_nav_menu ul li a{
  position:relative; font-size:13px; background:rgba(232,236,239,.2);
  border-radius:4px; padding:2px 10px 2px 1.25rem !important; letter-spacing:.08em; color:#fff; line-height:1.4;
}
/* アイコンフォント(jin-icons)が無い環境だと「□」になるのでフォールバック */
#connect-area-widget-center2 .widget_nav_menu ul li a::after{
  position:absolute; top:5px; left:2px; font-size:.6rem; line-height:.9rem;
  /* フォントがあれば矢印グリフ、無ければ "›" に置換 */
  font-family:"jin-icons", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  content:"\e92c";
}
@supports (font-variation-settings: normal){
  /* 近代ブラウザでアイコンが出ない場合は見た目維持のため矢印文字に置換 */
  #connect-area-widget-center2 .widget_nav_menu ul li a::after{ content:"›"; }
}

/* クリエイター一覧（縦並び） */
.menu-connect-area-creatorlist-container ul li{ display:block; margin-bottom:1.25rem; }
.menu-connect-area-creatorlist-container ul li a{ padding-left:0 !important; background:transparent; }
@media (min-width:768px){
  .menu-connect-area-creatorlist-container ul li a{ font-size:18px !important; padding:7px 0 !important; line-height:1.05rem !important; }
}
@media (max-width:767px){
  .menu-connect-area-creatorlist-container ul li a{ font-size:.95rem; padding:12px 0 !important; }
}

/* 右カラム：SHE情報 + SNS */
#connect-area-widget-right .connect-area-widget{ margin-bottom:2rem; }
@media (max-width:767px){ .sns-list > .wp-block-column:first-child{ flex-grow:.3; } }

/* 下段バナー（このID/クラスを使っている場合） */
#connect-area-widget-left{ width:100%; margin:1rem auto 0; display:flex; flex-wrap:wrap; }
@media (max-width:767px){ #connect-area-widget-left{ display:block; } }
#connect-area-widget-left .widget_media_image{ margin-right:46px; }
#connect-area-widget-left .widget_media_image:nth-of-type(3n){ margin-right:0; }
@media (max-width:767px){ #connect-area-widget-left .widget_media_image{ margin-right:0; } }
@media (min-width:768px){ #connect-area-widget-left{ padding-left:30px; padding-right:30px; } }
#connect-area-widget-left .wp-block-image{ max-width:342px; }
#connect-area-widget-left.swiper-container-connect-area{ background: #34414e; width:100%; margin:0 auto; position:relative; overflow:hidden; list-style:none; padding:0; z-index:1; height:155px; }
#connect-area-widget-left.swiper-container-connect-area .swiper-pagination-bullets{ bottom:-5px !important; }


/* ===== SP base (mobile-first) ===== */
/* SPでは縦積み・余白しっかり・見出しをやや小さく */
#connect-area-widget-box{
  display:block !important;
  padding:20px 16px !important;
}
#connect-area-widget-logo{ margin-bottom:16px !important; }
#connect-area-widget-center-box{ display:block !important; margin-bottom:16px !important; }
#connect-area-widget-center1{ margin-bottom:16px !important; }
#connect-area-widget-center2{ margin-bottom:16px !important; }
#connect-area-widget-right{ margin-top:8px !important; }

#connect-area-widget-right .widgettitle,
#connect-area-widget-center-box .widgettitle{
  font-size:16px !important;
  margin-bottom:16px !important;
  border-bottom:1px solid #fff !important;
}

/* TAGピル：改行OK・詰まり防止 */
#connect-area-widget-center2 .widget_nav_menu ul{
  display:block !important;
}
#connect-area-widget-center2 .widget_nav_menu ul li{
  display:inline-block !important;
  margin:6px 6px 2px 0 !important;
}
#connect-area-widget-center2 .widget_nav_menu ul li a{
  line-height:1.5 !important;
  white-space:nowrap;
}

/* クリエイター一覧：縦並び＆タップしやすい余白 */
.menu-connect-area-creatorlist-container ul li{
  display:block !important;
  margin-bottom:12px !important;
}
.menu-connect-area-creatorlist-container ul li a{
  display:inline-block;
  padding:10px 0 !important;
  font-size:15px !important;
}

/* ===== PC and up (>=768px) で横並び ===== */
@media (min-width:768px){
  #connect-area-widget-box{
    display:flex !important;
    align-items:flex-start; justify-content:space-between; gap:32px;
    padding:60px 45px 0px !important;
  }
  #connect-area-widget-logo{ flex:1 !important; margin-bottom:0 !important; }
  #connect-area-widget-center-box{ flex:2.5 !important; display:flex !important; gap:32px; margin:0 !important; }
  #connect-area-widget-center1{ flex:.8 !important; margin:0 !important; }
  #connect-area-widget-center2{ flex:1.5 !important; margin:0 !important; }
  #connect-area-widget-right{ flex:1 !important; margin-top:0 !important; }

  #connect-area-widget-right .widgettitle,
  #connect-area-widget-center-box .widgettitle{
    font-size:18px !important;
    margin-bottom:2.1rem !important;
    line-height:25px !important;
  }
  .menu-connect-area-creatorlist-container ul li a{
    font-size:18px !important; padding:7px 0 !important; line-height:1.05rem !important;
  }
}

/* 追加の安全策（テーマがさらに上書きしても勝てるよう最小限 !important） */
@media (max-width:767.98px){
  #connect-area-widget-left{ display:block !important; }
}

/* ==== connect-area Slider (vanilla) =================================== */
.fsl{ position:relative; max-width:1160px; overflow:hidden; }
.fsl__track{ display:flex; width:100%; touch-action:pan-y; will-change:transform; transition:transform .35s ease; }
.fsl__slide{ flex:0 0 100%; display:block; user-select:none; }
.fsl__slide img{ width:100%; height:auto; display:block;  object-fit:cover; }

/* ドット */
.fsl__dots{ padding-top:15px; left:0; right:0; bottom:8px; display:flex; gap:8px; justify-content:center; }
.fsl__dot{ width:8px; height:8px; border-radius:50%; border:0; background:rgba(255,255,255,.45); cursor:pointer; }
.fsl__dot.is-active{ background:#fff; }

/* 矢印（任意） */
.fsl__nav{ position:absolute; top:50%; translate:0 -50%; border:0; background:rgba(0,0,0,.35); color:#fff; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; }
.fsl__nav--prev{ left:8px; }
.fsl__nav--next{ right:8px; }
.fsl__nav:hover{ background:rgba(0,0,0,.5); }

/* SP 基本（mobile-first） */
@media (max-width: 767.98px){
  .fsl{ max-width:100%;}
  .fsl__slide img{  } /* 横長すぎる画像の見切れを少し抑える */
}

/* PCで高さを少しタイトに（任意） */
@media (min-width: 768px){
  .fsl__slide img{}
}

/* ===== Slider spacing (safe gap) ===== */
.fsl{ --fsl-gap:12px; background:#34414e; } /* 背景色はフッターに合わせて変更OK */
@media (min-width:768px){ .fsl{ --fsl-gap:16px; margin: auto; } }

.fsl__slide{
  box-sizing:border-box;       /* padding を幅計算に含めないとズレるので必須 */
  padding:0 var(--fsl-gap);    /* ← ここが“見た目のすき間”になります */
}
.fsl__slide img{
  display:block; width:100%; height:auto;
}

/* 下段スライダーのボックス全体に高さを追加 */
#connect-area-widget-left {
  padding-top: 40px;   /* 上に余白を追加 */
  padding-bottom: 40px;/* 下に余白を追加 */
}

/* もっと直接的に「高さを強制」するなら */
#connect-area-widget-left {
  min-height: 300px; /* 好きな高さに変更 */
}