@charset "UTF-8";
/* =================================
 テーブルの画面外スクロール
 ================================= */
.table-wrap {
	overflow-x: auto;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  white-space: nowrap;
}
/* =================================
 ページネーションスマホサイズ位置調整
 ================================= */
.pagination {
    margin:auto;
    margin-top: 1rem;
}
/* =================================
 is-valid上書き
 ================================= */
.form-control.is-valid {
    border-color:#ced4da;
}
/* =================================
 並び替え
 ================================= */
.drag-handle {
    cursor: grab; /* ドラッグ可能なことを示すアイコン */
    padding: 10px; /* タッチ範囲を広げる */
}
.drag-handle:active {
    cursor: grabbing; /* 押下中の見た目を変更 */
}
/* =================================
 枠サイズをアスペクト比で固定
 ================================= */
.img_frame1_1 {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* 1:1のアスペクト比を確保 */
    overflow: hidden;
}
.img_frame2_1 {
    position: relative;
    width: 100%;
    padding-top: 50%; /* 2:1なので1÷2×100 */
    overflow: hidden;
}
.img_frame6_2 {
    position: relative;
    width: 100%;
    padding-top: 33.33%; /* 6:2なので2÷6×100 */
    overflow: hidden;
}
.img_frame6_4 {
    position: relative;
    width: 100%;
    padding-top: 66.67%; /* 6:4なので4÷6×100 */
    overflow: hidden;
}
.img_frame16_9 {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9なので9÷16×100 */
    overflow: hidden;
}
.img_frame16_3 {
    position: relative;
    width: 100%;
    padding-top: 18.75%; /* 16:3なので3÷16×100 */
    overflow: hidden;
}
.img_frame4_6 {
    position: relative;
    width: 100%;
    padding-top: 150%; /* 4:6なので6÷4×100 */
    overflow: hidden;
}
.img_frame8_9 {
    position: relative;
    width: 100%;
    padding-top: 112.5%; /* 8:9なので9÷8×100 */
    overflow: hidden;
}
/* 高さ基準 */
.img_frame_h1_1 {
    position: relative;
    height: 100%; /* 高さを基準に設定 */
    width: auto; /* 幅は自動調整 */
    aspect-ratio: 1 / 1; /* 1:1のアスペクト比を維持 */
    overflow: hidden;
}
/* 画像全体を配置(足りない分は白埋め) */
.frame_max {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: contain; /* 枠内に画像全体を収める */
    transform: translate(-50%, -50%); /* 画像を中央に配置 */
}
/* 画像全体を配置(枠いっぱいに表示) */
.frame_over {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover; /* 縦横比を保持しつつ、要素全体を埋める */
    transform: translate(-50%, -50%);
}

/* =================================
 マウスオーバー時に画像を拡大
 ================================= */
.frame_max_hover20 {
    transition: transform 0.3s ease;
}
.frame_max_hover20:hover {
    transform: translate(-50%, -50%) scale(1.2); /* 20%拡大なので1.2 */
}
.frame_max_hover50 {
    transition: transform 0.3s ease;
}
.frame_max_hover50:hover {
    transform: translate(-50%, -50%) scale(1.5); /* 50%拡大なので1.5 */
}
.frame_max_hover100 {
    transition: transform 0.3s ease;
}
.frame_max_hover100:hover {
    transform: translate(-50%, -50%) scale(2.0); /* 100%拡大なので2.0 */
}
/* =================================
表示行数設定
 ================================= */
 .multi_line_truncate_of_2 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* 2行表示する */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
 .multi_line_truncate_of_3 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 3行表示する */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.multi_line_truncate_of_4 {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* 4行表示する */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* =================================
 カーソル
 ================================= */
.cursor-auto {
    cursor:auto;
}
.cursor-default {
    cursor:default;
}
.cursor-pointer {
    cursor:pointer;
}
.cursor-move {
    cursor:move;
}
.cursor-text {
    cursor:text;
}
.cursor-crosshair {
    cursor:crosshair;
}
.cursor-cell {
    cursor:cell;
}
.cursor-help {
    cursor:help;
}
.cursor-grab {
    cursor:grab;
}
.cursor-grabbing {
    cursor:grabbing;
}
.cursor-zoom-in {
    cursor:zoom-in;
}
.cursor-zoom-out {
    cursor:zoom-out;
}
.cursor-not-allowed {
    cursor:not-allowed;
}
.cursor-wait {
    cursor:wait;
}
.cursor-progress {
    cursor:progress;
}
.cursor-none {
    cursor:none;
}
.cursor-alias {
    cursor:alias;
}
.cursor-context-menu {
    cursor:context-menu;
}
.cursor-vertical-text {
    cursor:vertical-text;
}
.cursor-n-resize {
    cursor:n-resize ;
}
.cursor-e-resize {
    cursor:e-resize;
}
.cursor-s-resize {
    cursor:s-resize;
}
.cursor-w-resize {
    cursor:w-resize ;
}
.cursor-nw-resize {
    cursor:nw-resize;
}
.cursor-ne-resize {
    cursor:ne-resize;
}
.cursor-se-resize {
    cursor:se-resize;
}
.cursor-sw-resize {
    cursor:sw-resize;
}
.cursor-ew-resize {
    cursor:ew-resize;
}
.cursor-ns-resize {
    cursor:ns-resize;
}
.cursor-nesw-resize {
    cursor:nesw-resize;
}
.cursor-nwse-resize {
    cursor:nwse-resize;
}
.cursor-col-resize {
    cursor:col-resize;
}
.cursor-row-resize {
    cursor:row-resize;
}
.cursor-all-scroll {
    cursor:all-scroll;
}
.cursor-copy {
    cursor:copy;
}
.cursor-no-drop {
    cursor:no-drop;
}
/* =================================
 パンくず
 ================================= */
.breadcrumb-item+.breadcrumb-item::before {
  content: ">";
  color: #6c757d;
  padding-right: 0.5rem;
}
/* =================================
 タグに穴を開ける
 ================================= */
.badge-with-hole {
  position: relative;
  padding: 0.3em 0.6em;
  padding-left: 1em;
  border-radius: 0.3rem;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  font-weight: normal;
}
.badge-with-hole::before {
  content: "";
  position: absolute;
  left: 0.3em;
  width: 0.3em;
  height: 0.3em;
  background-color: #FFFFFF;
  border-radius: 50%;
  border: 1px solid currentColor;
}
/* =================================
 タグ(バッヂ)にアニメーションを追加
 ================================= */
.badg {
  transition: transform 0.3s ease;
}
.badg:hover {
  transform: scale(1.1);  /* 1.1倍に拡大 */
}