@charset "UTF-8";

/*==============================
//- text container 2025
//- 展開可能なテキストコンテナのスタイル*/
.expandable-text-container {
/*    background-color: #ffffff; 
    border: 1px solid #e0e0e0; 
    border-radius: 8px; 
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
    overflow: hidden; /* コンテンツがはみ出さないように */
}

/* 続きのテキストのスタイル（max-heightで折りたたみを制御） */
.full-text {
    color: #555555; /* 少し薄めのテキスト色 */
     line-height: 1.6; /* 行の高さ */
    margin-top: 0;
    transition: max-height 0.3s ease-out; /* スムーズな展開・折りたたみのアニメーション */
    /* デフォルト（折りたたまれた状態）の高さ */
    max-height: 6rem; /* 約2行分の高さに設定。コンテンツに合わせて調整してください */
    overflow: hidden; /* はみ出したコンテンツを隠す */
    display: block; /* ブロック要素にして、テキストとボタンの並びを制御しやすくする */
    white-space: normal; /* 折りたたまれる際に、文字数制限で不自然な改行が入らないようにする */
}

/* full-textが展開されている状態のスタイル */
.full-text.expanded {
    max-height: 5000px; /* 表示状態の最大高さ（コンテンツに合わせて十分な値を設定） */
    overflow: visible; /* はみ出したコンテンツも表示 */
}

/* 短縮されたコンテンツとボタンのスタイル */
.visible-content {
    display: inline; /* テキストと同じラインに表示 */
}

/* 省略記号とボタンのラッパースタイル */
.ellipses-and-toggle {
    display: inline; /* テキストの直後に表示 */
    white-space: nowrap; /* 省略記号とボタンが途中で改行しないように */
}

/* 省略記号のスタイル */
.ellipses {
    font-weight: normal; /* 太字にしない */
}

/* 「続きを読む/閉じる」ボタンのスタイル */
.read-more-toggle {
    color: #007bff; /* 青色のリンクのようなスタイル */
    font-weight: bold; /* 目立つように太字 */
    font-size:xx-small;
    cursor: pointer;
    margin-left: 0.2em; /* 省略記号との間にわずかなスペース */
    text-decoration: none; /* 下線をなくす */
    transition: color 0.2s ease; /* ホバー時のトランジション */
}

.read-more-toggle:hover {
    color: #0056b3; /* ホバーで少し暗い青に */
}

.expandable-text-container .full-text {
  display: block; /* 高さを正しく計算するためにブロック要素にする */
  overflow: hidden;
  position: relative; /* 必要に応じてフェードアウト効果などのために使用 */
  max-height: 100px; /* 初期表示の最大の高さ（例: 5行分程度を想定）調整してください */
  transition: max-height 0.35s ease-in-out; /* スムーズな展開アニメーション */
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%); /* オプション: 末尾をグラデーションで隠す */
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%); /* オプション: 末尾をグラデーションで隠す */
}

.expandable-text-container.expanded .full-text {
  max-height: 10000px; /* 十分に大きな値を設定して全内容を表示 (JSでscrollHeightに設定も可) */
  -webkit-mask-image: none;
  mask-image: none;
}

.expandable-text-container .read-more-btn {
  display: inline-block; /* ボタンの表示形式 */
  margin-top: 0.5rem; /* 上の要素との間隔 */
  cursor: pointer;
  /* Bootstrapのbtn-linkスタイルでカバーされるため、下記は削除またはコメントアウト */
  /* padding: 0.25rem 0.5rem; */
  /* color: var(--bs-link-color, #0d6efd); */
  /* background-color: transparent; */
  /* border: none; */
  /* text-decoration: underline; */
}