@charset "UTF-8";

.popup-background{
  /*position size*/
  position: fixed;
  z-index : 100;
  top : 0;
  left : 0;
  height : 100vh;
  width : 100vw;

  /*design*/
  background-color: rgb(139, 139, 139);
  opacity : 0.5;
}

.accordion-area .box .popup img {
    margin: 0;
}
.accordion-area .box .button-container img {
    max-width: 100%;
}

.popup{
   /*position size*/
        --height : 90%;
        --width : 90%;
        z-index : 101;
        position: fixed;
        top : calc(50vh - calc(var(--height) / 2));
        left : calc(50vw - calc(var(--width) / 2));
        height : var(--height);
        width : var(--width);

  /*design*/
  overflow-y: scroll;   /* 見切れたらスクロールさせる */
  background-color: white;
}
.popup > .close-button{
  /*position size*/
  --size : 30px;
  position:absolute;
  top : 10px;
  right : 10px;
  height : var(--size);
  width : var(--size);

  /*design*/
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  color : gray;
  font-size: var(--size);
  border-radius: calc(var(--size)/5);
}

.popup > .content{
  padding: 5% 0 ;
  text-align: center;
}


/*hide popup*/
.popup-flag{
  display: none;
}
.popup-flag:not(:checked) + .popup-background{
  display:none;
}
.popup-flag:not(:checked) + * + .popup{
  display:none;
}



/*==============================================================*/
/*button-container*/
.button-container{
    max-width: 95%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}

/*button1*/
.button1{
    max-width: 200px;
    display: inline-block;
    transition: .2s;
}
.button1:hover{
  color: white;
  opacity: .7;
  transition: .2s;
}


/*----------------- 
レスポンシブ
-----------------*/
@media screen and (max-width:1200px) {
}

@media screen and (max-width:1070px) {
}

@media screen and (max-width:1000px) {
}

@media screen and (max-width:798px) {
}

@media screen and (max-width:700px) {
}

@media screen and (max-width:598px) {
}

@media screen and (max-width:475px) {
}

@media screen and (max-width:425px) {
}

@media screen and (max-width:375px) {
}

@media screen and (max-width:365px) {
}

@media screen and (max-width:350px) {
}

@media screen and (max-width:320px) {
}

@media screen and (max-width:280px) {
}