@charset "UTF-8";
/*==========================
ローディング
==========================*/
/*logo*/

.loader_img {
  & > img {
    display: block;
    width: auto;
    height: 120px;
    fill: transparent;
    animation: line-animation 2s ease;
  }
}
@keyframes line-animation {
  0% {
    -ms-filter: blur(20px);
    filter: blur(20px);
    }
  100% {
    -ms-filter: blur(0);
    filter: blur(0);
  }
}
@media print, screen and (min-width:768px) {
.loader_img {
  & > img {
    width: auto;
    height: auto;
  }
}
}

/*loading*/
#loading {
  transition: all 1s;
  background-color: var(--white);
  position: fixed;
  z-index: 99999;
  inset: 0;
  display: grid;
  place-items: center;

  .centerHoleMask {
    position: fixed;
    inset: auto;
  }
}

.loaded {
  animation: open-animation 0.8s ease forwards;
}

@keyframes open-animation {
  0% {
    /*transform: translateY(0);*/
    opacity: 1;
  }
  100% {
    /*transform: translateY(-100%);*/
    opacity: 0;
    visibility: hidden;
  }
}

/*=======================================
mainimg 
=======================================*/
.mainimg {
  position: relative;
  .swiper-container,
  .swiper-slide {
    height: 100vh;
    height: 100dvh;
    width: 100%;
  }

  /*pagination*/
  .swiper-horizontal > .swiper-pagination-bullets,
  .swiper-pagination-bullets.swiper-pagination-horizontal,
  .swiper-pagination-custom,
  .swiper-pagination-fraction {
    left: auto;
    bottom: var(--ctr-pd);
    right: calc(var(--ctr-pd) - 4px);
    width: max-content;
    height: max-content;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .swiper-pagination-bullet {
    width: 4px;
    height: clamp(20px, 60vw/13.66, 40px);
    border-radius: 0;
    background: var(--white);
    opacity: 0.4;
  }
  .swiper-pagination-bullet-active {
    background: var(--white);
    opacity: 1;
  }

  /*catch*/
  .catch {
    position: absolute;
    bottom: calc(var(--ctr-pd) + 105px);
    left: var(--ctr-pd);
      width: calc(100% - (var(--ctr-pd) * 2));
    z-index: 5;
    text-align: left;
    color: var(--white);

    .catch_ti {
      line-height: 1.25;
      font-family: var(--font-serif);
      font-weight: 900;
      font-size: var(--font-xl);
      opacity: 0;
        span {
            display: block;
        }
    }
  }

}

.swiper-mainimg {
  position: relative;
  z-index: 1;


  .swiper-slide {
    overflow: hidden;
    backface-visibility: hidden;
      position: relative;
      
      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2) 100%);
        position: absolute;
        inset: 0;
        z-index: 2;
      }
      &.sheer {
          &::before {
            content: "";
            display: block;
            width: 100%;
            height: 100%;
            background: none!important;
            position: absolute;
            inset: 0;
            z-index: 2;
          }
      }

    &.swiper-slide-active .slide_img,
    &.swiper-slide-duplicate-active .slide_img,
    &.swiper-slide-prev .slide_img {
      animation: zoomUp 8s linear 0s;
      animation-fill-mode: both;
      height: 100%;
    }
      .catch_tx {
        position: absolute;
        left: var(--ctr-pd);
        top: calc(100% - 110px);
        font-family: var(--font-serif);
        font-size: var(--font-ll);
        font-weight: 700;
        color: #fff;
        line-height: 1.3;
        z-index: 9999;
          span {
              display: block;
          }
     }
    .slide_img {
      &.img01 {
        background: url(../img/index_img/slide01.jpg) top center no-repeat;
        background-size: cover;
      }
      &.img02 {
        background: url(../img/index_img/slide02.jpg) center center no-repeat;
        background-size: cover;
      }
      &.img03 {
        background: url(../img/index_img/slide03.jpg) center center no-repeat;
        background-size: cover;
      }
      &.img04 {
        background: url(../img/index_img/slide04.jpg) center center no-repeat;
        background-size: cover;
      }
      &.img05 {
        background: url(../img/index_img/slide05.jpg) center center no-repeat;
        background-size: cover;
      }
    }
  }
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@media print, screen and (min-width:576px) {
.mainimg {
  /*catch*/
  .catch {
    bottom: calc(var(--ctr-pd) + 90px);
    .catch_ti {
        span {
            display: inline-block;
        }
    }
  }

}
.swiper-mainimg {
  .swiper-slide {
      .catch_tx {
        span {
            display: inline-block;
        }
     }
  }
}

}


/*------------------------------------------------------------content*/

/*---------intro*/
.intro_wrap {
    display: flex;
    flex-direction: column;
    padding: var(--ctr-td) var(--ctr-pd);
    gap: var(--ctr-inpd);
    & > div {
        text-align: left;
        position: relative;
        z-index: 1;
        & > div {
            display: inline-block;
        }
    }
& > figure {
      & > img {
          width: 100%;
          height: auto;
      } 
  }
}
@media print, screen and (min-width:768px) {
.intro_wrap {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 0;
    min-width: var(--ctr-min);
    padding: var(--ctr-td) var(--ctr-pd);
    & > div {
        text-align: left;
        padding-right: var(--ctr-inpd);
        position: relative;
        z-index: 1;
        & > div {
            display: inline-block;
        }
    }
& > figure {
    width: 70%;
    overflow: hidden;
      & > img {
          width: 100%;
          max-width: 100%;
          height: 100%;
          object-fit: cover;
      } 
  }
}
}


/*---------pickup*/
.pickup_wrap {
    padding: 0 var(--ctr-pd) var(--ctr-td);
    text-align: left;
    & ul {
        display: flex;
        flex-direction: column;
        gap: var(--ctr-td);
        & li a {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        color: var(--base-tx-color);
        transition: all 0.5s;
            & > div {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 180px;
            margin-left: -80px;
            padding: 16px;
            aspect-ratio: 1 / 1;
            background: var(--bg-wood);
            z-index: 1;
                .title_group01 {
                    margin-bottom: 0;
                    .ti_group_ti {
                        span {
                            display: inline-block;
                        }
                    }
                }
                & div {
                    text-align: right;
                    & p {
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                        height: 40px;
                        padding: 0 1.5em;
                        line-height: 1.1;
                        font-family: var(--font-serif);
                        font-weight: 700;
                        border: solid 1px var(--maincolor);
                        transition: all 0.5s;
                        & span {
                            position: relative;
                            display: inline-block;
                            padding-right: 34px;
                        }
                        & span::before {
                            position: absolute;
                            right: 0;
                            bottom: 0;
                            display: block;
                            width: 24px;
                            height: 1px;
                            content: "";
                            background: var(--maincolor);
                            transition: all 0.5s;
                        }
                        & span::after {
                            position: absolute;
                            right: 0;
                            bottom: 3px;
                            display: block;
                            width: 8px;
                            height: 1px;
                            content: "";
                            background: var(--maincolor);
                            transform: rotate(45deg);
                            transition: all 0.5s;
                        }
                    }
                }
            }
            & > figure {
                width: calc(100% - 80px);
                height: 300px;
                margin-right: -80px;
                overflow: hidden;
                & img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        & li a:hover, li a:visited {
            color: var(--base-tx-color);
        }
        & li:nth-child(2n) a {
            flex-direction: row;
            & > div {
                margin-left: 0;
                margin-right: -80px;
            }
            & > figure {
                margin-right: 0;
                margin-left: -80px;
            }
        }
    }
}

@media print, screen and (min-width:576px) {
.pickup_wrap{
    & ul {
        & li a {
            & > div {
            width: 200px;
            margin-left: -100px;
            padding: 16px;
            }
            & > figure {
                width: calc(100% - 100px);
                height: 300px;
                margin-right: -100px;
            }
        }
        & li:nth-child(2n) a {
            flex-direction: row;
            & > div {
                margin-right: -100px;
            }
            & > figure {
                margin-left: -100px;
            }
        }
    }
}
}
@media print, screen and (min-width:768px) {
.pickup_wrap{
    min-width: var(--ctr-min);
    & ul {
        & li a {
            & > div {
            width: 360px;
            margin-left: -60px;
            padding: var(--ctr-inpd);
                & div{
                    & p {
                        min-width: 200px;
                        height: 48px;
                        padding: 0 1.5em;
                        & span {
                            padding-right: 40px;
                        }
                    }                
                }
            }
            & > figure {
                width: calc(100% - 300px);
                height: 480px;
                margin-right: -60px;
            }
        }
        & li a:hover {
            opacity: 0.6;
            & > div div p {
                color: var(--white);
                background: var(--maincolor);
                & span::before {
                    background: var(--white);
                }
                & span::after {
                    background: var(--white);
                }
            }
        }
        & li:nth-child(2n) a {
            flex-direction: row;
            & > div {
                margin-right: -60px;
            }
            & > figure {
                margin-left: -60px;
            }
        }
    }
}
}