/* kv */
#kv {
    width: 100%;
    height: 100svh;
    background: url(../img/top/kv_sp.webp) 0 / cover no-repeat;
    position: relative;
}
#kv .logo {
    width: 51.28vw;
    margin: auto;
    padding-top: 10.25vw;
}
#kv .menu-btn {
    width: 10.51vw;
    height: 10.51vw;
    transition: all 0.4s ease;
    position: absolute;
    top: 0;
    right: 4.1vw;
    z-index: 13;
    cursor: pointer;
}
#kv .menu-btn > span {
    width: 5.12vw;
    height: 1px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: all 0.4s ease;
    background-color: #fff;
}
#kv .menu-btn > span:nth-of-type(1) {
    top: 4.61vw;
}
#kv .menu-btn > span:nth-of-type(2) {
    top: 6.92vw;
}
#kv .header-nav:not(.openNav),
#kv .header-menu {
    display: none;
}

/* open */
#kv .menu-btn.openNav > span {
    background-color: #333;
}
#kv .menu-btn.openNav > span:nth-of-type(1) {
    transform: translateX(-45%) rotate(-45deg);
    top: 50%;
}
#kv .menu-btn.openNav > span:nth-of-type(2) {
    transform: translateX(-45%) rotate(45deg);
    top: 50%;
}
#kv .header-nav.openNav {
    position: absolute;
    width: 50%;
    height: 100vh;
    top: 0;
    right: 0;
    opacity: 1;
    padding: 21.8vw 0 12.82vw;
    background-color: rgba(255,255,255,.8);
}
#kv .header-nav.openNav .header-menu {
    display: grid;
    row-gap: 12.82vw;
    text-align: center;
}
#kv .header-nav .header-menu li a {
    display: block;
    font-size: 4.1vw;
}
@media only screen and (min-width: 900px) {
    #kv {
        margin-bottom: 0;
        background: url(../img/top/kv.webp) 0 / cover no-repeat;
    }
    #kv .logo {
        width: 39.4rem;
        padding-top: 7.3rem;
    }
}

/* scroll */
.scroll {
  position: absolute;
  bottom: -23.07vw;
  left: 50%;
  transform: translateX(-50%);
}
.scroll .f-ga {
  color: #fff;
  font-size: 3.07vw;
  text-align: center;
  transform: rotate(90deg);
}
.scroll-border {
  position: relative;
  display: block;
  top: 2.56vw;
  width: 1px;
  height: 46.15vw;
  background-color: #D6D6D6;
  overflow: hidden;
  margin: auto;
}
.scroll-border::before {
  content: "";
  display: block;
  position: absolute;
  width: 1px;
  height: 8.717vw;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  animation: scrollbar 2.0s ease-in-out infinite;
  margin: auto;
}
@keyframes scrollbar {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(450%);
    transform: translateY(450%);
  }
}
@media only screen and (min-width: 900px) {
    .scroll {
        bottom: -7.3rem;
    }
    .scroll .f-ga {
        font-size: 1.6rem
    }
    .scroll-border {
        height: 18rem;
    }
    .scroll-border::before {
        height: 3.4rem;
    }
}

/* about */
#about {
    background-color: #fff;
}
#about .about-top,
#about .about-btm {
    display: grid;
}
#about .jp-ttl {
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 2;
    text-indent: -.5em;
}
#about .sub-ttl {
    font-weight: 600;
    letter-spacing: .1em;
    line-height: 2;
}
@media only screen and (max-width: 899px) {
    #about {
        padding: 45.3vw 0 20.51vw;
    }
    #about .about-top {
        margin: 0 0 14.35vw auto;
        width: 93.5%;
        row-gap: 14vw;
    }
    #about .en-ttl {
        font-size: 4.61vw;
        margin: 0 0 11vw 8vw;
    }
    #about .jp-ttl {
        font-size: 6.41vw;
        margin: 0 0 8vw 8vw;
    }
    #about .sub-ttl {
        font-size: 4.1vw;
        margin: 0 0 14vw 8vw;
    }
    #about .about-btm {
        grid-template-columns: 65.38vw 26.15vw;
        justify-content: space-between;
        row-gap: 14.35vw;
    }
    #about .about-btm .img01 {
        margin-top: 19.23vw;
    }
    #about .about-btm .txt-wrap {
        grid-area: 2 / span 2;
        width: 87.17%;
        margin: auto;
    }
    #about .arrow-btn {
        margin: 14.35vw 0 0 auto;
    }
}
@media only screen and (min-width: 900px) {
    #about .inner {
        max-width: 1920px;
        margin: auto;
    }
    #about .about-top {
        padding: 30rem 0 20rem;
        margin-left: auto;
        width: 89.1%;
        display: grid;
        grid-template-columns: 1fr 64%;
        column-gap: 3%;
        align-items: flex-end;
    }
    #about .en-ttl {
        font-size: 3rem;
        margin-bottom: 9rem;
    }
    #about .jp-ttl {
        font-size: 4.5rem;
        margin-bottom: 4rem;
    }
    #about .sub-ttl {
        font-size: 2.6rem;
        margin-bottom: 12rem;
    }
    #about .about-top .img {
        order: 2;
    }
    #about .about-btm {
        padding-bottom: 35rem;
        margin-right: auto;
        width: 96.8%;
        display: grid;
        grid-template-columns: 38.9% 1fr 16.1%;
        column-gap: 11%;
    }
    #about .about-btm .img01 {
        margin-top: 15rem;
    }
    #about .about-btm .img02 {
        order: 3;
    }
    #about .about-btm .txt-wrap {
        margin-top: 22rem;
    }
    #about .arrow-btn {
        margin-top: 6rem;
    }
}

/* ttl */
.en-ttl {
    font-family: trajan-pro-3, serif;
    font-size: 4.61vw;
    font-weight: 500;
    letter-spacing: .1em;
}
@media only screen and (min-width: 900px) {
    .en-ttl {
        font-size: 3rem;
    }
}

/* news */
#news .en-ttl {
    color: #fff;
    text-align: left;
}
#news .news-meta {
    color: #D6D6D6;
    display: flex;
    border-bottom: 1px solid #666666;
}
#news .news-cat {
    position: relative;
}
#news .news-cat:before {
    content: "";
    height: 1px;
    background-color: #666666;
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg) ;
}
#news .news-item img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
#news .txt {
    color: #fff;
}
#news .news-slider .arrow-wrap {
    padding: 0 14rem 0 1rem;
    box-sizing: content-box;
}
#news .news-slider .arrow-wrap .scroll-txt {
    font-size: 2.82vw;
    position: absolute;
    right: 0;
    bottom: 6.5rem;
    font-family: shippori-mincho, sans-serif;
    color: #fff;
    z-index: 9;
}
#news .news-slider .slick-dots {
    width: 75%;
    bottom: initial;
    box-sizing: content-box;
    position: relative;
    display: flex;
}
#news .news-slider .slick-dots li {
    width: calc(100% / 4);
    height: 1px;
    margin: 0;
}
#news .news-slider .slick-dots li button {
    width: 100%;
    height: 1px;
    padding: 0;
}
#news .news-slider .slick-dots li button:before {
    content: "";
    width: 100%;
    height: 1px;
    line-height: 1px;
    background-color: #666666;
    opacity: 1;
    top: 50%;
    transform: translateY(-50%);
}
#news .news-slider .slick-dots li.slick-active button:before {
    background-color: #fff;
}

@media only screen and (max-width: 899px) {
    #news .inner {
        background: url(../img/top/bg-news_sp.webp) 0 / cover no-repeat;
        padding: 15.38vw 11.53vw;
    }
    #news .en-ttl {
        margin-bottom: 10.25vw;
    }
    #news .news-item {
        margin-bottom: 15.38vw;
    }
    #news .news-list {
        padding-bottom: 16vw;
    }
    #news .news-meta {
        font-size: 3.07vw;
        column-gap: 11.28vw;
        padding-bottom: 4.61vw;
        margin-bottom: 3.58vw;
    }
    #news .news-cat:before {
        width: 7.69vw;
        left: -9.28vw;
    }
    #news .txt {
        font-size: 4.1vw;
        margin-top: 7.69vw;
    }
    #news .arrow-b {
        margin: auto;
    }
}
@media only screen and (min-width: 900px) {
    #news {
        background: #fff;
    }
    #news .inner {
        max-width: 1920px;
        margin: auto;
        padding-bottom: 38rem;
    }
    #news .en-ttl {
        margin-top: -1rem;
    }
    #news .news-wrap {
        width: 96.8%;
        margin-left: auto;
        padding: 20rem 0 19rem 14.9rem;
        background: url(../img/top/bg-news.webp) 0 / cover no-repeat;
        display: grid;
        grid-template-columns: 22% 1fr;
        overflow: hidden;
    }
    #news .news-meta {
        font-size: 1.3rem;
        column-gap: 3.9rem;
        padding-bottom: 1.7rem;
        margin-bottom: 2.5rem;
    }
    #news .news-cat:before {
        width: 3rem;
        left: -3.5rem;
    }
    #news .txt {
        font-size: 1.6;
        margin-top: 3.5rem;
    }
    #news .news-slider .slick-slide {
        width: 35.5rem!important;
    }
    #news .news-slider .news-item {
        margin: 0 3rem 15rem;
    }
    #news .news-slider .arrow-wrap .scroll-txt {
        font-size: 1.4rem;
        bottom: 0;
        left: 88rem;
        right: initial;
    }
    #news .news-slider .arrow-wrap,
    #news .news-slider .slick-dots {
        width: 85rem;
    }
    #news .arrow-b {
        margin-top: -5.5rem;
    }
}

/* lineup */
#lineup {
    background: #fff;
}
#lineup .lineup-top, #lineup .lineup-btm {
    display: grid;
}
#lineup .en-ttl {
    text-align: center;
    position: relative;
}
#lineup .en-ttl:after {
    content: "";
    width: 1px;
    background-color: #D6D6D6;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: 1.2s cubic-bezier(0.22, 1, 0.36, 1);
    animation: line-effect linear forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
    bottom: 0;
}
#lineup .txt-g {
    font-family: shippori-mincho, sans-serif;
    color: #969696;
}
#lineup .txt-b {
    font-family: adobe-garamond-pro, serif;
    font-weight: 600;
}
@media only screen and (max-width: 899px) {
    #lineup {
        padding: 23.07vw 0 20.51vw;
    }
    #lineup .en-ttl {
        padding-bottom: 25.64vw;
        margin-bottom: 15.38vw;
    }
    #lineup .txt-g {
        font-size: 3.33vw;
        margin-bottom: 1.28vw;
    }
    #lineup figcaption {
        margin-top: 3.58vw;
    }
    #lineup .lineup-top {
        grid-template-columns: 50vw 43.58vw;
        justify-content: space-between;
        margin-bottom: 13.58vw;
    }
    #lineup .lineup-top .img01 {
        order: 2;
        margin-top: 14.87vw;
    }
    #lineup .lineup-top .img02 figcaption {
        margin-left: 3.84vw;
    }
    #lineup .lineup-btm {
        width: 71.7%;
        margin: 0 auto 13.58vw;
        row-gap: 6.66vw;
    }
    #lineup .lineup-btm .img04 {
        width: 55.12vw;
        margin-left: auto;
    }
    #lineup .arrow-btn {
        margin: auto;
    }
    @keyframes line-effect {
        from {
            opacity: 0;
            height: 0;
        }
        to {
            opacity: 1;
            height: 20.51vw;
        }
    }
}
@media only screen and (min-width: 900px) {
    #lineup {
        margin-top: -1px;
        padding-bottom: 27rem;
    }
    #lineup .inner {
        max-width: 1920px;
        margin: auto;
    }
    #lineup .en-ttl {
        padding-bottom: 22.9rem;
        margin-bottom: 17rem;
    }
    #lineup .txt-g {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
    }
    #lineup .txt-b {
        font-size: 2;
    }
    #lineup figcaption {
        margin-top: 5rem;
    }
    #lineup .lineup-top {
        grid-template-columns: 57rem 70rem;
        column-gap: 30rem;
        width: 157.8rem;
        max-width: 1578px;
        margin: 0 auto 18rem 0;
    }
    #lineup .lineup-top .img01 {
        margin-top: -27.6rem;
    }
    #lineup .lineup-top .img01 figcaption {
        margin-left: 5rem;
    }
    #lineup .lineup-btm {
        grid-template-columns: 78rem 50.4rem;
        column-gap: 27.6rem;
        width: 156rem;
        max-width: 1560px;
        margin: 0 0 5rem auto;
    }
    #lineup .lineup-btm .img03 {
        margin-top: 8rem;
    }
    #lineup .btn-wrap {
        width: 157.8rem;
        max-width: 1578px;
        margin-right: auto;
    }
    #lineup .arrow-btn {
        margin-left: auto;
    }
    @keyframes line-effect {
        from {
            opacity: 0;
            height: 0;
        }
        to {
            opacity: 1;
            height: 18rem;
        }
    }
}

/* parallax */
.parallax {
  height: 117.94vw;
}

/* 背景画像 */
.parallax::before {
  background-image: url(../img/top/kv02_sp.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  height: 100vh;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}
@media only screen and (min-width: 900px) {
    .parallax {
        height: 88rem;
    }
    .parallax::before {
        background-image: url(../img/top/kv02.webp);

    }
}

/* brand */
#brand {
    background-color: #fff;
    padding: 25.64vw 0;
}
#brand .inner {
    width: 87.17%;
    margin: auto;
}
#brand .en-ttl {
    text-align: center;
    margin-bottom: 15.38vw;
}
#brand .brand-list {
    display: grid;
    row-gap: 12.82vw;
}
#brand .name {
    font-size: 4.35vw;
    margin: 7.69vw 0 3.84vw;
}
#brand .txt {
    font-size: 3.33vw;
    color: #969696;
}
#brand .arrow-btn {
    margin: 16.41vw auto 0;
}
@media only screen and (min-width: 900px) {
    #brand {
        padding: 32rem 0;
    }
    #brand .inner {
        width: 78%;
        max-width: 1500px;
        margin: auto;
    }
    #brand .en-ttl {
        text-align: left;
        margin-bottom: 10rem;
    }
    #brand .brand-list {
        padding: 0 4%;
        grid-template-columns: repeat(2,1fr);
        column-gap: 9%;
        row-gap: 12rem;
    }
    #brand .brand-list .item:nth-of-type(even) {
        margin-top: -14rem;
    }
    #brand .name {
        font-size: 2.2rem;
        margin: 4rem 0 1.5rem;
    }
    #brand .txt-wrap {
        padding: 0 4.6rem;
    }
    #brand .txt {
        font-size: 1.3rem;
    }
    #brand .arrow-btn {
        margin: 5rem 0 0 auto;
    }
}


/* btm-slide */
.btm-slide-wrap {
    margin-top: -1px;
}
@media only screen and (max-width: 899px) {
    .btm-slide-wrap {
        padding-bottom: 35.38vw;
        background-color: #fff;
    }
    #btm-slide {
        height: 64.1vw;
        background-image: url(../img/top/slide_sp.png);
        background-size: auto 100%;
        background-repeat: repeat-x;

        animation: slideBackground 140s linear infinite;
    }
    @keyframes slideBackground {
        from {
            background-position: 0 top;
        }

        to {
            background-position: 726.1vw top;
        }
    }
}
@media only screen and (min-width: 900px) {
    .btm-slide-wrap {
        padding-bottom: 40rem;
        background-color: #fff;
    }
    .btm-slide-wrap .inner {
        max-width: 1920px;
        margin: auto;
    }
    #btm-slide {
        height: 60rem;
        background: url(../img/top/slide.png) top center / auto 100% repeat-x ;
        animation: slideBackground 70s linear infinite;
    }
    @keyframes slideBackground {
        from {
            background-position: 200vw top;
        }
        to {
            background-position: 0 top;
        }
    }
}


/* access */
#access {
    background: url(../img/top/bg-access_sp.webp) 0 / cover no-repeat;
    color: #fff;
    padding: 23.07vw 0;
}
#access .inner {
    width: 82%;
    margin: auto;
    text-align: center;
}
#access .en-ttl {
    margin-bottom: 10.25vw;
}
#access .address {
    font-size: 3.58vw;
    letter-spacing: .1em;
    line-height: 2;
}
#access .arrow-btn {
    margin: 7.69vw auto 13.58vw;
}
#access .img-wrap {
    margin-top: 13.58vw;
}
#access .en-txt {
    margin-top: 7.17vw;
    font-size: 2.82vw;
    color: #969696;
    line-height: 1.8;
}
@media only screen and (min-width: 900px) {
    #access {
        padding: 20rem 0;
        background: url(../img/top/bg-access.webp) 0 / cover no-repeat;
    }
    #access .inner {
        width: 52.6%;
        max-width: 1010px;
    }
    #access .en-ttl {
        margin-bottom: 7rem;
    }
    #access .address {
        font-size: 1.6rem;
    }
    #access .arrow-btn {
        margin: 7rem auto 14rem;
    }
    #access .img-wrap {
        margin-top: 14rem;
    }
    #access .en-txt {
        margin-top: 5.7rem;
        font-size: 1.4rem;
    }
}

/* reveal-type */
@keyframes reveal-effect {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(100px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
@keyframes reveal-txt-effect {
    from {
        opacity: 0;
        transform: matrix(1, 0, 0, 1, 0, 100);
    }
    to {
        opacity: 1;
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

/* 2. アニメーションの適用 */
.reveal-type {
    animation: reveal-effect linear forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}
.reveal-txt {
    animation: reveal-txt-effect linear forwards;
    animation-timeline: view();
    animation-range: entry 10% cover 40%;
}