@charset "utf-8";
/* CSS Document */
/*
======================================================================================================
※重要・コピーライト
======================================================================================================
Copyright 株式会社サインモール All Rights Reserved.
無断転用禁止
当ファイルの無断転用及び複製等の行為を固く禁じます。
*/

/*
全サイト共通ご利用ガイドラッパー
*/
/* 親 */
.userGuideContainer {
  display: flex;
  gap: 20px;
}

/* サイドバー：26%で可変、下限300px。padding等込みで300pxに収まるようにする */
.userGuideSidebar {
  order: 1;
  flex: 0 1 25%;
  min-width: 120px;
  box-sizing: border-box;        /* ← padding/borderを幅に含める（重要） */
  width: auto !important;        /* 既存の固定幅を打消し */
  max-width: none !important;
  white-space: normal !important;
}

/* サイドバー内の“縮まない犯人”対策 */
.userGuideSidebar * {
  min-width: 0;                  /* 子要素が横幅を張らないように */
  max-width: 100%;               /* 画像やテーブルがハミ出さない */
  overflow-wrap: anywhere;       /* 長い単語・URLを強制改行 */
  word-break: break-word;
}

/* メインは縮められるように（長文があってもサイドを潰さない） */
.userGuideMain {
  order: 2;
  flex: 1 1 0;                   /* basis:0 で shrink を効かせる */
  min-width: 0;                  /* ← これがないと横に踏ん張ります */
  overflow-wrap: anywhere;
  word-break: break-word;

}

/* 768px以下で縦積み（メイン→サイド） */
@media (max-width: 768px) {
  .userGuideContainer { flex-direction: column; }
  .userGuideMain { order: 1; flex: 1 1 100%; }
  .userGuideSidebar { order: 2; flex: 1 1 100%; min-width: auto; }
}