@charset "utf-8";

#vi3 {
    background-color: #f4e8ea;
    position: relative;
    line-height: 1.8;
    letter-spacing: 2px;
}

#vi3 a:hover {
    text-decoration: none;
}

#vi3 .en {
    font-family: Whisper, cursive !important;
}

#vi3 .serif {
    font-family: Noto Serif JP, serif !important;
}

#vi3 .sans-serif {
    font-family: Zen Kaku Gothic New, sans-serif !important;
}

#vi3 .summary{
    background-color: #ff458b;
}

#vi3 .content-left {
    position: sticky;
    z-index: 1;
    top: 0;
    width: 50%;
    height: 100%;
}

/**********
** bx-item-link
***********************************/
.bx-item-link {
    padding-top: 25%;
  }
  
  @media(max-width: 840px) {
    .bx-item-link {
      display: none;
    }
  }
  
  .bx-item-link_inner {
    padding: 0 20px;
    max-width: 680px;
    width: 100%;
    margin-inline: auto;
  }
  
  .bx-item-link_title {
    max-width: 183px;
    width: 100%;
    margin-inline: auto;
  }
  
  .bx-item-link_title img {
    aspect-ratio: 367 / 115;
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  
  .bx-item-link_contents {
    margin-top: 54px;
    display: flex;
    gap: 32px;
  }
  
  .bx-item-link_img {
    width: calc(238 / 841 * 100%);
  }
  
  .bx-item-link_img img {
    aspect-ratio: 238 / 357;
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
  
/**********
** bx-list
***********************************/

.bx-list {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 22px;
    color: #808080 !important;
  }
  .bx-list img{
    opacity: .4;
  }
  .bx-list.is-current img{
    opacity: 1;
  }
  
  .bx-list.is-current {
    color: #4F4845 !important;
    font-weight: 700 !important;
    font-size: 130%;
  }
  
  .bx-list_text {
    font-size: 16px;
    font-weight: 100;
  }
  
  .bx-list.is-current .bx-list_text {
    font-size: 102%;
  }
  
  .bx-list.is-current img{
    width: 110%;
    height: auto;
  }
  
  .bx-list_text span {
    font-size: 13px;
    font-weight: 400;
    display: block;
  }
  
  .bx-list.is-current .bx-list_text span {
    font-weight: 700;
    font-size: 62%;
  }


#vi3 .content-left a {
    transition: .3s;display: inline-block;position: relative;
}

#vi3 .content-left a:hover {
    text-decoration: none;
}

@media screen and (min-width:521px) and (max-width:1280px) {
    #vi3 .content-left {
        display: none;
    }

    #vi3 .content-main {
        width: 80% !important;
        margin: 0 auto;
    }
}

#vi3 .content-main{
    background-color: #f4e8ea;
}

#vi3 .content-main {
    width: 50%;
}

#vi3 .fvText1 {
    right: -26%;
    z-index: 1;
    top: -15%;
}

#vi3 .fvSubText {
    writing-mode: vertical-rl;
    text-orientation: upright;
    top: -1%;
    left: -21%;
    transform: rotate(-3deg);
    z-index: 1;
    background-color: #b7a573;
}

#vi3 .corner {
    margin-top: -200px;
    padding-top: 200px;
}

#vi3 .swiper-wrapper>div:nth-of-type(even) {
    transform: rotate(359deg);
}

#vi3 .swiper-wrapper>div:nth-of-type(odd) {
    transform: rotate(4deg);
}

#vi3 .itemname {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    font-size: 12px;
}

#vi3 .mainCopy {
    top: 5%;
    right: 55%;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#vi3 .mainCopy li {
    background-color: #b7a573;
}

#vi3 .mainImage>li:nth-of-type(2) {
    margin-top: 15% !important;
}

#vi3 .other:before,
.other:after {
    content: '';
    background: inherit;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#vi3 .other:before {
    transform: skewY(-6deg);
    transform-origin: top left;
}

#vi3 .other:after {
    transform: skewY(-6deg);
    transform-origin: top right;
}

@media screen and (max-width:520px) {
    #vi3 .content-left {
        display: none;
    }
    #vi3 .content-main {
        width: 100%;
        margin-left: 0;
    }
    #vi3 .fvText1 img {
        z-index: 1;
        top: -65px;
    }

    #vi3 .mainCopy {
        top: 3%;
        right: 8%;
    }

    #vi3 .fvText1 {
        right: 2%;
        border: 0;
        z-index: 1;
        bottom: 26%;
        top: auto;
    }

    #vi3 .fvSubText {
        top: 4%;
        left: 11%;
    }
}