@charset "utf-8";

.bukken{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .bukken .bukken_left,
  .bukken .bukken_right{
    max-width: 50%;
  }
  @media screen and (max-width: 480px) {
    .bukken .bukken_left,
    .bukken .bukken_right{
      max-width: none;
      width: 100%;
    }
  }
  .gouchi{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 10px;
    margin: 10px;
    background-color: whitesmoke;
  }
  .gouchi .gouchi_left,
  .gouchi .gouchi_right{
    max-width: 50%;
  }
  @media screen and (max-width: 480px){
    .gouchi .gouchi_left,
    .gouchi .gouchi_right{
      max-width: none;
      width: 100%;
    }
  span.cp_gouchi{
    font-size: 1.1em;
    font-weight: bold;
  }
  }




/*******************************************
  LightBoxサムネイル
********************************************/
img.lightbox {
  width: 120px;
  height: 100px;
  object-fit: cover;
  box-sizing: border-box;
  border: 3px solid white;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  transition: 0.2s ease;
}
@media screen and (max-width: 480px) {
  img.lightbox {
    width: 80px;
    height: 70px;
  }
}
img.lightbox:hover {
  transform: scale(1.1);
}

/******************************************
  LightBox本体
*******************************************/
/*jsで生成した画像の背景の設定*/
#lightbox_on {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  animation: lightbox_on 0.3s ease forwards;
  z-index: 1001;
}
/*jsで生成した画像の設定*/
#lightbox_on img {
  position: fixed;
  top: calc(50% - 0px);
  left: 50%;
  max-width: 90%;
  max-height: 90%;
  border: 3px solid white;
  transform: translate(-50%, -50%);
  animation: lightbox_on 0.5s ease forwards;
  z-index: 1002;
}
/*ボタン設定(左ボタン)*/
#lightbox_on ~ .bt_lbBack,
#lightbox_on ~ .bt_lbNext {
  position: fixed;
  /*background-color: dodgerblue;*/
  width: 25%;
  height: 20%;
  top: 50%;
  transform: translatey(-50%);
  z-index: 1003;
}
#lightbox_on ~ .bt_lbBack {
  left: 0px;
}
#lightbox_on ~ .bt_lbNext {
  right: 0px;
}
#lightbox_on ~ div div {
  width: 20px;
  height: 20px;
  border-top: 5px solid rgba(255, 255, 255, 0.7);
  border-right: 5px solid rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 50%;
  transform: translatey(-50%);
  filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.5));
}
#lightbox_on ~ .bt_lbBack:hover div,
#lightbox_on ~ .bt_lbNext:hover div {
  border-top: 5px solid rgba(255, 255, 255, 1);
  border-right: 5px solid rgba(255, 255, 255, 1);
}
#lightbox_on ~ .bt_lbBack div {
  left: 5%;
  transform: rotate(-135deg);
}
/*ボタン設定(右ボタン)*/
#lightbox_on ~ .bt_lbNext div {
  right: 5%;
  transform: rotate(45deg);
}

/*フェードのアニメーション*/
@keyframes lightbox_on {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}