body{
  height: fit-content;
}
main{
  width: 100dvw;
  height: auto;
  padding-bottom: 100px;
}

section.gallery{
  width: 100vw;
  height: auto;
  /* padding: 80px 0 100px; */
}
  .gallery__inner{
    width: 100%;
    height: fit-content;

    display: flex;
    justify-content: center;
    padding: 0 30px 100px;
  }
  .gallery__inner.gallery-hero{
    box-sizing: border-box;
    /* height: calc(100vh - 80px); */
    height: 100vh;
    /* height: calc(100vh + 30px); */
    padding: 80px 30px 15px;
  }
    .gallery__inner__grid{
      width: 100%;
      height: auto;
    }
       .gallery__inner.gallery-hero .gallery__inner__grid__wrapper{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        /* grid-template-rows: repeat(5, 1fr); */
        grid-template-rows: repeat(20, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
      }
        .gallery__item{
          border-radius: 30px;
        }
        .gallery__inner.gallery-hero .item-hero{ grid-column-start: 1; grid-column-end: 11; grid-row-start: 1; grid-row-end: 8; }
        .gallery__inner.gallery-hero .item-logo{ grid-column-start: 1; grid-column-end: 11; grid-row-start: 8; grid-row-end: 10; }
        .gallery__inner.gallery-hero .item-1{   grid-column-start: 1; grid-column-end: 8; grid-row-start: 10; grid-row-end: 21;}
        .gallery__inner.gallery-hero .item-2{   grid-column-start: 8; grid-column-end: 11; grid-row-start: 10; grid-row-end: 16;}
        .gallery__inner.gallery-hero .item-3{   grid-column-start: 8; grid-column-end: 11; grid-row-start: 16; grid-row-end: 21;}
          .gallery__item__inner{
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
            .gallery__item__inner img{
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              border-radius: 29px;

              object-fit: cover;
            }
              .gallery__item__inner__info{
                position: absolute;
                bottom: 20px;
                left: 0;
                padding: 0 20px;
                width: 100%;

                opacity: 0;
                visibility: hidden;
                transition: 1s;
              }
                .gallery__item__inner__info__tag{
                  display: flex;
                  gap: 10px;
                }
                  .gallery__item__inner__info__tag .tags{
                    border-radius: 10px;
                    height: 20px;
                    padding: 0 10px;

                    display: flex;
                    align-items: center;
                    justify-content: center;

                    background-color: rgba(255, 255, 255, 0.2);
                    border: solid 0.5px var(--white);
                  }
                    .gallery__item__inner__info__tag .tags p{
                      font-size: var(--desc-font-size);
                      color: var(--white);
                    }
                .gallery__item__inner__info__desc{
                  display: flex;
                  flex-direction: column;
                }
                  .gallery__item__inner__info__desc h3{
                    font-size: var(--subtitle-font-size);
                    color: var(--white);
                  }
                  .gallery__item__inner__info__desc p{
                    font-size: var(--desc-font-size);
                    color: var(--white);
                  }
                .gallery__item__trigger{
                  position: absolute;
                  bottom: 20px;
                  right: 20px;
                }
                  .gallery__item__trigger a{
                    position: relative;
                    display: block;
                    width: 60px;
                    height: 60px;

                    border-radius: 50%;
                    background-color: var(--white);
                  }
                    .gallery__item__trigger a img{
                      position: absolute;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      -webkit-transform: translate(-50%, -50%);
                      -ms-transform: translate(-50%, -50%);

                      height: 40px;
                      width: auto;
                    }
                .gallery__item__inner__link{
                  position: absolute;
                  top: 20px;
                  left: 20px;
                }
                  .gallery__item__inner__link a{
                    height: fit-content;
                  }
                    .gallery__item__inner__link__wrapper{
                      height: 50px;
                      padding: 0 20px;
                      display: flex;
                      align-items: center;
                      justify-content: center;
                      gap: 7px;

                      border-radius: 25px;

                      background-color: var(--white);
                    }
                      .gallery__item__inner__link__wrapper p{
                        color: var(--black);
                      }
                      .gallery__item__inner__link__wrapper img{
                        position: static;
                        width: 25px;
                        object-fit: unset;
                      }
      /* item-hero / item__inner */
      .gallery__item.item-hero .gallery__item__inner{
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
        .gallery__item.item-hero .gallery__item__inner .gallery__item__inner-title.pc{
          width: fit-content;
          display: block;
        }
        .gallery__item.item-hero .gallery__item__inner .gallery__item__inner-title.sp{
          display: none;
        }
          .gallery__item.item-hero .gallery__item__inner-title h5{
            font-size: 100px;
            font-family: var(--default--font-family);
            text-align: left;
          }
        .gallery__item.item-hero .gallery__item__inner .gallery__item__inner-count{
          width: fit-content;
          display: block;
        }
          .gallery__item.item-hero .gallery__item__inner-count .count-num{
            font-family: var(--default--font-family);
            font-size: 170px;
            text-align: center;
          }
          .gallery__item.item-hero .gallery__item__inner-count .count-text{
            font-family: var(--default--font-family);
            font-size: 40px;
            text-align: center;
          }
        .gallery__item.item-logo .gallery__item__inner .gallery__item__slider{
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);

          display: flex;
          align-items: center;
          justify-content: left;
          gap: 40px;
        }
          .gallery__item.item-logo .gallery__item__slider__item{
            display: flex;
            align-items: center;
            gap: 10px;
          }
            .gallery__item.item-logo .gallery__item__slider__item p{
              font-size: var(--accent--font-size);
              color: var(--gray);
              text-wrap: nowrap;
            }
            .gallery__item.item-logo .gallery__item__slider__item img{
              position: static;
              border-radius: 0;
              height: 20px;
              width: auto;
            }
            .gallery__item.item-logo .gallery__item__slider__item.bolero img{
              height: 16px;
            }
      /* black */
      .gallery__item.black .gallery__item__inner{
        background-color: var(--white);
        border: solid 1px var(--black);
        border-radius: 30px;
      }
          .gallery__item.black .gallery__item__inner__info__desc h3{
            color: var(--black);
          }
          .gallery__item.black .gallery__item__inner__info__desc p{
            color: var(--black);
          }
          .gallery__item.black .gallery__item__inner__info__tag .tags p{
            color: var(--black);
          }
          .gallery__item.black .gallery__item__inner__info__tag .tags{
            border: solid 0.5px var(--black);
          }
          .gallery__item.black .gallery__item__inner__link__wrapper{
            border: solid 0.5px var(--black);
          }
      .gallery__item.black.item-11 .gallery__item__inner{
        border: none;
      }
      .gallery__item.black.item-11 .gallery__item__inner__link__wrapper{
        border: none;
      }
        /* hover */
          .gallery__item:hover .gallery__item__inner__info{
            opacity: 1;
            visibility: visible;
          }

        /* gallery contact */
        .gallery__item__inner.contact{
          background-color: var(--white);
          border: solid 1px var(--black);
          border-radius: 30px;
        }
          .gallery__item__inner.contact a{
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 30px;
          }
          /* .gallery__item__inner.contact .gallery__item__inner__link__wrapper{
            border: solid 1px var(--black);
          } */
          .gallery__item__inner.contact .gallery__item__inner__info{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);

            opacity: 1;
            visibility: visible;
          }
            .gallery__item__inner.contact .gallery__item__inner__info__desc{
              height: 100%;
              align-items: center;
              justify-content: center;
            }
              .gallery__item__inner.contact .gallery__item__inner__info__desc p{
                text-align: center;
                font-size: var(--normal-font-size);
                color: var(--black);
              }
              .gallery__item__inner.contact .gallery__item__inner__info__desc p span{
                font-size: var(--accent--font-size);
              }
          /* .gallery__item__inner.contact .gallery__item__trigger{
            top: 10px;
          }
            .gallery__item__inner.contact .gallery__item__trigger a{
              background-color: transparent;
            } */
      /* message */
        .gallery__item__inner.message{
          background-color: var(--white);
          width: 100%;
          height: 100%;
          padding: 10px;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          gap: 20px;
        }
          .gallery__item__inner.message .gallery__item__inner__info{
            position: static;
            width: 100%;
            height: fit-content;

            opacity: 1;
            visibility: visible;
          }
            .gallery__item__inner.message p{
              text-align: center;
              font-size: var(--normal-font-size);
            }
          .gallery__item__inner.message .gallery__item__inner__link{
            position: static;
            display: block;

            width: fit-content;
          }
          .gallery__item__inner.message .gallery__item__inner__link__wrapper{
            border: solid 1px var(--black);
            height: 50px;
            width: 150px;
          }
            
  .gallery__inner.gallery-main{
    /* 10分割の時 */
    /* height: calc(200vh - 160px); */
    height: 220vh;
    padding: 0 30px;
  }
      .gallery__inner.gallery-main .gallery__inner__grid__wrapper{
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        grid-template-rows: repeat(12, 1fr);
        grid-column-gap: 15px;
        grid-row-gap: 15px;
      }
          .gallery__inner.gallery-main .item-5{   grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 5;}
          .gallery__inner.gallery-main .item-6{   grid-column-start: 4; grid-column-end: 8; grid-row-start: 1; grid-row-end: 6;}
          .gallery__inner.gallery-main .item-7{   grid-column-start: 8; grid-column-end: 11; grid-row-start: 1; grid-row-end: 3;}
          .gallery__inner.gallery-main .item-8{   grid-column-start: 8; grid-column-end: 11; grid-row-start: 3; grid-row-end: 6;}
          .gallery__inner.gallery-main .item-9{   grid-column-start: 1; grid-column-end: 4; grid-row-start: 5; grid-row-end: 6;}
          .gallery__inner.gallery-main .item-10{   grid-column-start: 1; grid-column-end: 11; grid-row-start: 6; grid-row-end: 9;}
          .gallery__inner.gallery-main .item-11{   grid-column-start: 1; grid-column-end: 6; grid-row-start: 9; grid-row-end: 11;}
          .gallery__inner.gallery-main .item-12{   grid-column-start: 6; grid-column-end: 8; grid-row-start: 9; grid-row-end: 11;}
          .gallery__inner.gallery-main .item-13{   grid-column-start: 8; grid-column-end: 11; grid-row-start: 9; grid-row-end: 11;}
          .gallery__inner.gallery-main .item-14{   grid-column-start: 1; grid-column-end: 5; grid-row-start: 11; grid-row-end: 13;}



section.hover{}

  .hover__card{
    position: fixed;
    right: -650px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    z-index: 6000;

    max-width: 600px;
    width: calc(100% - 60px);
    height: 94vh;

    /* opacity: 0;
    visibility: hidden; */

    transition: right 1.3s cubic-bezier(0.83, 0, 0.17, 1);

    /* background-image: url("../image/works/bg.webp");
    background-size: cover;
    background-position: center; */
    background: rgba(255, 255, 255, 0.63);
    border-radius: 30px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5.2px);
    -webkit-backdrop-filter: blur(5.2px);

    overflow-y: scroll;
  }
    .hover__card__header{
      height: 60px;
      padding: 0 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
      .hover__card__header h3{
        visibility: hidden;
        font-size: var(--accent--font-size);
      }
      .hover__card__header a{
      }
        .hover__card__header__close-btn{
          width: 40px;
          height: 40px;
          border-radius: 20px;

          display: flex;
          justify-content: center;
          align-items: center;

          background-color: var(--white);
        }
          .hover__card__header__close-btn img{
            height: 20px;
          }
    .hover__card__content{
      width: 100%;
      padding: 0 10px;
    }
    .hover__card__content.slider{
      margin-bottom: 20px;
    }
      .hover__card__content__slider{
        width: 100%;
        aspect-ratio: 7 / 4;
        border-radius: 30px;
      }
        .hover__card__content__slider .slider__wrapper{
          position: relative;
          width: 100%;
          aspect-ratio: 7 / 4;
          border-radius: 30px;
        }
          .hover__card__content__slider .slider__wrapper .slider-img{
            position: absolute;
            width: 100%;
            aspect-ratio: 7 / 4;
            object-fit: cover;

            opacity: 0;
            visibility: hidden;
            transition: 1s;
            border-radius: 30px;
          }
          .hover__card__content__slider .slider__wrapper img.active{
            opacity: 1;
            visibility: visible;
          }
          .hover__card__content__slider .slider__wrapper .slider__control{
            position: absolute;
            width: 100%;
            height: 100%;
          }
            .slider__control__inner{
              position: relative;
              width: 100%;
              height: 100%;
            }
              .slider__control__next-prev-btn{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);

                width: calc(100% - 40px);
                height: fit-content;

                display: flex;
                justify-content: space-between;
                align-items: center;
              }
                .slider__control__next-prev-btn a{
                  box-sizing: border-box;
                  width: 40px;
                  height: 40px;
                  padding: 7px;
                  display: flex;
                  justify-content: center;
                  background-color: var(--white);
                  border-radius: 50%;
                }
                  .slider__control__next-prev-btn a img{
                    display: block;
                    height: 100%;

                  }
              .slider__control__counter{
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);

                width: fit-content;

                display: flex;
                justify-content: center;
                gap: 10px;
              }
                .slider__control__counter a{
                  width: 7px;
                  height: 7px;
                  border-radius: 50%;
                  border: 1px solid var(--white);
                }
                .slider__control__counter a.active{
                  background-color: rgba(255, 255, 255, 0.6);
                }
      .hover__card__content__info{
        width: 100%;
        padding:40px;

        background: rgba(255, 255, 255, 0.05);
        border-radius: 30px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
      }
        .hover__card__content__info__about{
          margin-bottom: 30px;
        }
          .hover__card__content__info__about h4{
            font-size: var(--subtitle-font-size);
          }
          .hover__card__content__info__about p.date{
            margin: 5px 0;
          }
          .hover__card__content__info__about p{
            font-size: var(--desc-font-size);
            color: gray;
          }
        .hover__card__content__info__desc{
          display: flex;
          flex-direction: column;
          gap: 30px;
        }
          .hover__card__content__info__desc p{
            font-size: var(--normal-font-size);
          }
/* active */
  .hover__card.active{
    right: 30px;
    /* opacity: 1;
    visibility: visible; */
  }
  .blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  
    z-index: 5999; /* hover__cardの下に配置 */
  
    pointer-events: none;
    opacity: 0;
    transition: 1.3s;
    background: transparent;
  
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
  }
  .blur-overlay.active {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }


              


@media screen and (max-width: 1125px){
  .gallery__item__inner .gallery__item__inner__link a .gallery__item__inner__link__wrapper p{
    display: none;
  }
  .gallery__item__inner.message .gallery__item__inner__link a .gallery__item__inner__link__wrapper p{
    display: block;
  }
}

@media screen and (max-width: 768px){
  .gallery__inner{
    width: 100%;
    height: fit-content;

    display: flex;
    justify-content: center;
    padding: 0 30px;
  }
  .gallery__inner.gallery-hero{
    height: 100vh;
    padding: 80px 30px 15px;
  }
  .gallery__inner.gallery-main{
    height: calc(150vh - 160px);
    padding: 0 30px;
  }
  .gallery__item__inner.contact .gallery__item__inner__link{
    right: 20px;
    left: unset;
  }
/* message */
  .gallery__item__inner.message p{
    font-size: var(--normal-font-size);
  }
  .gallery__item__inner.message .gallery__item__inner__info{
    padding: 0;
  }
  .gallery__item__inner.message .gallery__item__inner__link__wrapper{
    height: 40px;
    width: 130px;
  }
        /* .gallery__inner.gallery-hero .item-1{   grid-column-start: 1; grid-column-end: 7; grid-row-start: 1; grid-row-end: 4;}
        .gallery__inner.gallery-hero .item-2{   grid-column-start: 7; grid-column-end: 11; grid-row-start: 1; grid-row-end: 3;}
        .gallery__inner.gallery-hero .item-3{   grid-column-start: 7; grid-column-end: 11; grid-row-start: 3; grid-row-end: 6;}
        .gallery__inner.gallery-hero .item-4{   grid-column-start: 1; grid-column-end: 7; grid-row-start: 4; grid-row-end: 6;} */
        .gallery__inner.gallery-main .item-5{   grid-column-start: 1; grid-column-end: 5; grid-row-start: 1; grid-row-end: 4;}
        .gallery__inner.gallery-main .item-6{   grid-column-start: 5; grid-column-end: 11; grid-row-start: 1; grid-row-end: 4;}
        .gallery__inner.gallery-main .item-7{   grid-column-start: 1; grid-column-end: 7; grid-row-start: 4; grid-row-end: 6;}
        .gallery__inner.gallery-main .item-8{   grid-column-start: 7; grid-column-end: 11; grid-row-start: 4; grid-row-end: 6;}
        .gallery__inner.gallery-main .item-9{   grid-column-start: 1; grid-column-end: 11; grid-row-start: 6; grid-row-end: 7;}
        .gallery__inner.gallery-main .item-10{   grid-column-start: 1; grid-column-end: 11; grid-row-start: 7; grid-row-end: 9;}
        .gallery__inner.gallery-main .item-11{   grid-column-start: 1; grid-column-end: 5; grid-row-start: 9; grid-row-end: 11;}
        .gallery__inner.gallery-main .item-12{   grid-column-start: 5; grid-column-end: 8; grid-row-start: 9; grid-row-end: 11;}
        .gallery__inner.gallery-main .item-13{   grid-column-start: 8; grid-column-end: 11; grid-row-start: 9; grid-row-end: 11;}
        .gallery__inner.gallery-main .item-14{   grid-column-start: 1; grid-column-end: 7; grid-row-start: 11; grid-row-end: 13;}
    .gallery__item__inner__info__desc h3{
      font-size: var(--accent--font-size);
      color: var(--white);
      margin: 7px 0;
    }
}





@media screen and (max-width: 440px){
.gallery__inner{
  width: 100%;
  height: fit-content;

  display: flex;
  justify-content: center;
  padding: 0 10px;
}
.gallery__inner.gallery-hero{
  height: 80vh;
  padding: 80px 10px 10px;
}
.gallery__inner.gallery-main{
  height: calc(135vh - 160px);
  padding: 0 10px;
}
  .gallery__inner.gallery-hero .gallery__inner__grid__wrapper{
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
  .gallery__inner.gallery-main .gallery__inner__grid__wrapper{
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    grid-template-rows: repeat(14, 1fr);
  }
/* .item-hero */
  .gallery__item.item-hero .gallery__item__inner .gallery__item__inner-title.pc{
    display: none;
  }
  .gallery__item.item-hero .gallery__item__inner .gallery__item__inner-title.sp{
    display: block;
    width: 100%;
    padding: 0 10%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
    .gallery__item.item-hero .gallery__item__inner .gallery__item__inner-title.sp h5{
      font-size: 3rem;
      text-align: center;
    }
  .gallery__item.item-hero .gallery__item__inner .gallery__item__inner-count{
    display: none;
  }
      .gallery__inner.gallery-hero .item-hero{ grid-column-start: 1; grid-column-end: 11; grid-row-start: 1; grid-row-end: 8; }
      .gallery__inner.gallery-hero .item-logo{ grid-column-start: 1; grid-column-end: 11; grid-row-start: 8; grid-row-end: 10; }
      .gallery__inner.gallery-hero .item-1{   grid-column-start: 1; grid-column-end: 6; grid-row-start: 10; grid-row-end: 21;}
      .gallery__inner.gallery-hero .item-2{   grid-column-start: 6; grid-column-end: 11; grid-row-start: 10; grid-row-end: 16;}
      .gallery__inner.gallery-hero .item-3{   grid-column-start: 6; grid-column-end: 11; grid-row-start: 16; grid-row-end: 21;}

      .gallery__inner.gallery-main .item-5{   grid-column-start: 1; grid-column-end: 6; grid-row-start: 1; grid-row-end: 4;}
      .gallery__inner.gallery-main .item-6{   grid-column-start: 6; grid-column-end: 11; grid-row-start: 1; grid-row-end: 5;}
      .gallery__inner.gallery-main .item-7{   grid-column-start: 6; grid-column-end: 11; grid-row-start: 5; grid-row-end: 7;}
      .gallery__inner.gallery-main .item-8{   grid-column-start: 1; grid-column-end: 6; grid-row-start: 4; grid-row-end: 7;}
      .gallery__inner.gallery-main .item-9{   grid-column-start: 1; grid-column-end: 6; grid-row-start: 6; grid-row-end: 7; display: none;}
      .gallery__inner.gallery-main .item-10{   grid-column-start: 1; grid-column-end: 11; grid-row-start: 7; grid-row-end: 9;}
      .gallery__inner.gallery-main .item-11{   grid-column-start: 1; grid-column-end: 11; grid-row-start: 9; grid-row-end: 11;}
      .gallery__inner.gallery-main .item-12{   grid-column-start: 1; grid-column-end: 6; grid-row-start: 11; grid-row-end: 13;}
      .gallery__inner.gallery-main .item-13{   grid-column-start: 6; grid-column-end: 11; grid-row-start: 11; grid-row-end: 13;}
      .gallery__inner.gallery-main .item-14{   grid-column-start: 1; grid-column-end: 6; grid-row-start: 13; grid-row-end: 15;}
  .gallery__item__inner__info__desc h3{
    font-size: var(--accent--font-size);
    color: var(--white);
    margin: 7px 0;
  }
  .gallery__item__inner__link{
    display: none;
  }
  .gallery__item__inner__info{
    bottom: 10px;
    padding: 0 15px;

    opacity: 1;
    visibility: visible;
  }
        .gallery__item__inner__info__desc h3{
          font-size: var(--accent--font-size);
        }
        .gallery__item__inner__info__desc p{
          display: none;
        }
    .gallery__item__inner.contact .gallery__item__inner__info{
      bottom: 10px;
      padding: 0 15px;
    }
        .gallery__item__inner.contact .gallery__item__inner__info__desc p{
          display: block;
          font-size: 1.2rem;
        }

  .gallery__item__trigger{
    bottom: 10px;
    right: 10px;
  }
    .gallery__item__trigger a{
      width: 40px;
      height: 40px;
    }
      .gallery__item__trigger a img{
        height: 20px;
        width: auto;
      }
  .gallery__item__inner__info__tag{
    display: none;
  }





  .hover__card{
    width: calc(100% - 20px);
    height: 85vh;
  }
  /* active */
  .hover__card.active{
    right: 10px;
  }
}