@charset "UTF-8";
.card-head {
  text-align: center;
  margin: 50px auto;
}

.card-searchBox {
  max-width: 800px;
  min-width: 320px;
  width: 50%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #888;
  padding: 20px 0;
}
.card-searchBox .card-searchBox-queryBox {
  margin: 0 10px;
}
.card-searchBox .card-searchBox-queryBox input {
  width: 40%;
  min-width: 100px;
  max-width: 300px;
  padding: 2px 10px;
  transition: 0.3s;
  border-bottom: 1px solid #888;
  font-size: 16px;
}
.card-searchBox .card-searchBox-queryBox input:focus {
  border-bottom: 1px solid #333;
  padding: 5px 10px;
}
.card-searchBox .card-searchBox-roleBox {
  margin: 10px auto;
  width: 50%;
  min-width: 150px;
  max-width: 350px;
  display: flex;
  justify-content: space-between;
}
.card-searchBox .card-searchBox-roleBox .card-searchBox-roleBox-label {
  margin-left: 10px;
  display: block;
  white-space: nowrap;
}
.card-searchBox .card-searchBox-roleBox .card-searchBox-roleBox-checkBoxes label {
  margin-right: 10px;
  float: left;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  max-width: 1200px;
  /* カードが領域内に収まらない場合、自動的に改行 */
  gap: 10px;
  /* カード間の間隔 */
  margin: 50px auto 100px;
  justify-content: center;
  align-items: center;
}
.card-container .groupn {
  border: 2px solid #d3d3d3;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  display: flex;
  width: 370px;
  transition: 0.4s;
}
.card-container .groupn:hover {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.card-container .groupn .gcont {
  flex: 1;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
}
.card-container .groupn .gcont .caption {
  /* flexコンテナを使用して要素を横に配置します */
  display: flex;
}
.card-container .groupn .gcont .caption img {
  width: 110px;
  height: 110px;
  touch-action: none;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-touch-callout: none;
  -moz-user-select: none;
  user-select: none;
}
.card-container .groupn .gcont .caption img:not(.image-protector) {
  /*
  position: relative;
  z-index: 100;

   */
}
.card-container .groupn .gcont .caption img.image-protector {
  position: absolute;
  z-index: 200;
}
.card-container .groupn .gcont .caption .side1 {
  margin-left: 15px;
  /*width: 195px;*/
  width: calc(100% - 110px - 20px);
  display: flex;
  align-content: space-around;
  flex-direction: column;
  justify-content: space-between;
}
.card-container .groupn .gcont .caption .side1 h3 {
  width: 100%;
  margin: 0;
  display: block;
}
.card-container .groupn .gcont .caption .side1 .group-name {
  text-align: right;
  margin-bottom: 0;
  font-size: 0.8rem;
  color: #444;
}
.card-container .groupn .gcont .caption .side1 .group-loc {
  text-align: left;
  font-size: 0.9rem;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #333;
}
.card-container .groupn .gcont .caption .side1 .group-loc::before {
  display: inline-block;
  font-family: "Material Symbols Outlined";
  content: "\e0c8";
  transform: translateY(1px);
}
.card-container .groupn .gcont .explanation {
  margin-top: 5px;
  height: 200px;
}
.card-container .groupn .gcont .explanation p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 0.9rem;
}
.card-container .groupn .gcont .tag {
  padding-top: 10px;
}
.card-container .groupn .gcont .tag ul {
  padding: 0;
  margin: 0;
  float: right;
}
.card-container .groupn .gcont .tag ul li {
  display: inline-block;
  margin-right: 5px;
  /* 各リストアイテムの間隔を調整 */
  border-radius: 15px;
  padding: 0 15px;
  color: #ffffff;
  font-size: 0.8rem;
}
.card-container .groupn .gcont .tag ul li.cTag-display {
  background-color: #d3d33e;
}
.card-container .groupn .gcont .tag ul li.cTag-activity {
  background-color: #37cb37;
}
.card-container .groupn .gcont .tag ul li.cTag-exhibition {
  background-color: #4343ff;
}
.card-container .groupn .gcont .tag ul li.cTag-sale {
  background-color: #fd5afd;
}
.card-container .groupn.groupn-customskin-3 {
  background: url("../image/group/bg-3.webp");
  background-size: cover;
}
.card-container .groupn.groupn-customskin-3 .gcont .caption {
  background: rgba(255, 255, 255, 0.6666666667);
}
.card-container .groupn.groupn-customskin-3 .gcont .caption .side1 > h3 {
  color: #f89660;
}
.card-container .groupn.groupn-customskin-3 .gcont .caption .side1 .group-name {
  color: #707070;
}
.card-container .groupn.groupn-customskin-3 .gcont .caption .side1 .group-loc {
  color: #000;
  border-bottom: 1px solid #fff;
}
.card-container .groupn.groupn-customskin-3 .gcont .explanation {
  background: rgba(255, 255, 255, 0.5333333333);
}
.card-container .groupn.groupn-customskin-3 .gcont .explanation p {
  color: #000;
}
.card-container .groupn.groupn-customskin-2 {
  background: url("../image/group/bg-2.jpg");
  background-size: cover;
}
.card-container .groupn.groupn-customskin-2 .gcont {
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
}
.card-container .groupn.groupn-customskin-1 {
  background: url("../image/group/bg-1.jpg");
  background-size: cover;
}
.card-container .groupn.groupn-customskin-1 .gcont .caption .side1 > h3 {
  color: #141896;
}
.card-container .groupn.groupn-customskin-1 .gcont .caption .side1 .group-name {
  color: #4c51e0;
}
.card-container .groupn.groupn-customskin-1 .gcont .caption .side1 .group-loc {
  color: #4cade0;
  border-bottom: 1px solid #fff;
}
.card-container .groupn.groupn-customskin-1 .gcont .explanation {
  background: rgba(255, 255, 255, 0.5333333333);
}
.card-container .groupn.groupn-customskin-1 .gcont .explanation p {
  color: #1772a3;
}

.text-center {
  margin-top: 100px;
}

.linkBtn-map {
  background-color: #5bd95b;
}
.linkBtn-map:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  scale: 1.03;
  text-decoration: none;
  color: #fff;
}

/*# sourceMappingURL=card.css.map */