.tooltip-button{
    /*コレ*/border: none;
    /* padding: 10px 30px; */
    background: #FFF; 
    /* color: #FFF;　*/
    cursor: pointer;
}

.profile-picture {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  vertical-align: middle;
  display: inline-block;
}

.custom-list-upper {
  list-style-type: upper-alpha; /* A, B, C */
}
.custom-list-lower {
  list-style-type: lower-alpha; /* b */
}

.imgicon {
    max-width: 50px;
    height: auto;
}
.my-box {
  /*  position: absolute; または fixed */
  height: 100%;/* デフォルトの位置 */
  /* background-color: #f8faa1; */
}

@media screen and (min-width: 576px) {  /* 576px */

    .imgicon {
    max-width: 50px;
    height: auto;
    }

    .my-box {
      height: 90%;
      /* background-color: #a1fab3; */
    }
}
@media screen and (min-width: 672px) {

    .imgicon {
    max-width: 50px;
    height: auto;
    }

    .my-box {
      height: 50%;
      /* background-color: #e4f8a3; */
    }
}
@media screen and (min-width: 768px) {
    .imgicon {
    max-width: 50px;
    height: auto;
    }

    .my-box {
      height: 50%;
      /* background-color: #faa1a1; */
    }
}
@media screen and (min-width: 992px) {
    .imgicon {
    max-width: 50px;
    height: auto;
    }

    .my-box {
      height: 50%;
      /* background-color: #a1a7fa; */
    }
}
@media screen and (min-width: 1280px) {
    .imgicon {
    max-width: 50px;
    height: auto;
    }

    .my-box {
      height: 50%;
      /* background-color: #faa1d6; */
    }
}

.column-w300 {
  display: grid; /* グリッドレイアウトを適用 */
  grid-template-columns: repeat(auto-fit, minmax(307px, 1fr)); /* 幅を自動調整 307px 355px*/
  gap: 10px; /* 要素同士の間隔 */
}


.column-w300 div  {
  min-height: 100px;
  background-color: #fff;
  color: #000;
  /* 親要素をフレックスコンテナとする */
  display: flex;
  /* 交差軸方向の整列位置を中央に指定 */
  align-items: center;
  /* 主軸方向の整列位置を中央に指定 */
  justify-content: center;
}

.mycontainer-fluid {
margin-right: auto;
margin-left: auto;
max-width: 1200px; 
}


a.link:hover {
   background-color: #e7e5e5;
   border-radius: 15px;
}

.bg-image {
  background-image: url('../img/43439.png');
  background-position: center;
  background-repeat: none;
  background-size: cover;
}

.my-boxZ {
  /*  position: absolute; または fixed */
  height: 50vh;/* デフォルトの位置 */
}

/* 画面幅が 1024px 以下のとき */
@media (max-width: 1024px) {
  .my-boxZ {
    height: 100vh;
  }
}

/* 画面幅が 600px 以下のとき */
@media (max-width: 600px) {
  .my-boxZ {
    height: 100vh;
  }
}

 a.qusbtn {
/*    color: #0d6efd; */
    text-align: center;
    text-decoration: none;
}


/* ベースのボタンスタイル */
a.shiny-btn {
    position: relative;
    display: inline-block;
    padding: 0px 0px;
    color: #fff;
    background: #7ec5ff;
    text-decoration: none;
    font-size: 16px;
    border-radius: 6px;
    overflow: hidden; /* 擬似要素がはみ出さないように */
    transition: background 0.3s ease;
}

/* ホバー時の色変化 */
a.shiny-btn:hover {
    background: #5a8baf;
}

/* 光のエフェクト */
a.shiny-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-20deg);
}

/* ホバー時に光を走らせる */
a.shiny-btn:hover::before {
    animation: shine 1.0s ease;
}

/* 光の移動アニメーション */
@keyframes shine {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

/* テーブル全体のセル背景を透明にする */
.table-transparent th,
.table-transparent td {
  background-color: transparent !important; /* Bootstrapの色指定を上書き */
}

.cover {
  object-fit: cover;
}
.size {
  width: 150px;
  height: 150px;
}