@charset "UTF-8";
.p-products-top {
    background: var(--brand-cream);
}
.g-main .u-mininner {
    max-width: 100%;
    width: calc(946vw /14);
}
@media screen and (min-width: 1px) and (max-width: 767px) {
.g-main .u-mininner {
    width: 98%;
}
}
.kv {
    padding: calc(107vw /14) 0 calc(200vw /14);
    position: relative;
    background-color: var(--brand-yellow);
}
.kv:before {
    display: block;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(640vw /14);
    background: url(../img/products/top/bg_kv.png) no-repeat;
    background-size: auto 100%;
    z-index: 0;
    pointer-events: none;
}
.kv-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin-left: calc(50vw /14);
}
.kv picture {
    width: calc(282vw /14);
    margin-left: calc(40vw /14);
    /* transform: translateY(20px); */
}
.kv picture.is-state_scroll img {
    animation: kvpicture 0.6s forwards;
    animation-delay: 0.8s;
    opacity: 0;
}
@keyframes kvpicture {
0% {
    transform: rotate(0);
    opacity: 0;
}
25% {
    transform: rotate(15deg);
    opacity: 1;
}
50% {
    transform: rotate(0);
    opacity: 1;
}
75% {
    transform: rotate(15deg);
    opacity: 1;
}
100% {
    transform: rotate(0);
    opacity: 1;
}
}

.kv .c-heading_en {
    color: #fff;
    font-size: calc(80vw /14);
}
.kv .c-heading_jp {
    font-size: calc(20vw /14);
}
.kv-acklink {
    position: absolute;
    background-color: var(--brand-cream);
    color: #0d6fb8;
    padding: .8em 1.3em;
    font-size: calc(12vw /14);
    max-width: 100%;
    border-radius: calc(24vw /7.5);
    bottom: calc(30vw /14);
    right: calc(-50vw /14);
    line-height: 1.4;
    font-weight: 500;
    width: calc(100vw /14);
}
.kv-acklink .u-enkunoji {
    position: relative;
    right: calc(-2vw /14);
    top: calc(4vw /14);
    width: calc(16vw /14);
    height: calc(16vw /14);
    transform: rotate(90deg);
    display: inline-block;
}
.kv-acklink .u-enkunoji::before {
    width: calc(4vw /14);
    height: calc(4vw /14);
    left: calc(4vw / 14);
}

@media screen and (min-width: 768px) {
    .kv a:hover {
      transform: scale(1.05);
    }
    .kv .u-hoverButton:hover  {
        transform: scale(1);
    }
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .kv {
        padding: calc(110vw /7.5) 0 calc(200vw /7.5);
    }
    .kv:before {
        height: calc(643vw /7.5);
        background: url(../img/products/top/bg_kv_sp.png) no-repeat;
        background-size: auto 100%;
    }
    .kv-inner {
        margin-left: calc(0vw / 7.5);
    }
    .kv picture {
        width: calc(400vw /7.5);
        margin-left: calc(-90vw /7.5);
    }
    .kv .c-heading {
        margin-left: calc(50vw/7.5);
    }
    .kv .c-heading_en {
        color: #fff;
        font-size: calc(80vw /7.5);
    }
    .kv .c-heading_jp {
        font-size: calc(30vw /7.5);
    }
    .kv-acklink {
        font-size: calc(20vw /7.5);
        border-radius: calc(38vw / 7.5);
        bottom: calc(-10vw / 7.5);
        right: calc(0vw / 7.5);
        width: calc(160vw /7.5);
    }
    .kv-acklink .u-enkunoji {
        right: calc(-2vw /7.5);
        top: calc(4vw /7.5);
        width: calc(16vw /7.5);
        height: calc(16vw /7.5);
    }
    .kv-acklink .u-enkunoji::before {
        width: calc(4vw /7.5);
        height: calc(4vw /7.5);
        left: calc(4vw / 7.5);
    }
}


h3.c-section-heading .c-heading_en {
    font-size: 3.125rem;
    margin: 0 20px;
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    h3.c-section-heading .c-heading_en {
        font-size: 2.0625rem;
        margin: 0 4%;
    } 
}

/* collaboration
//* -------------------------------------------------- */
.collaboration {
    background-color: var(--brand-cream);
    margin-top: calc(-1vw /14);
    padding: 40px 0 90px;
}
.collaboration  h3.c-section-heading .c-heading_en {
    color: #fca027;
}
.collaboration ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.collaboration li {
    width: calc(226vw /14);
    margin: 50px auto 0;
    position: relative;
}
.collaboration p {
    font-size: calc(14vw /14);
    line-height: 1.25;
    margin-top: 0.5em;
}
.collaboration p span {
    font-size: calc(8vw /14);
    display: block;
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .collaboration {
        margin-top: calc(-1vw /7.5);
        padding: 40px 0 50px;
    }
    .collaboration ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .collaboration li {
        width: calc(304vw /7.5);
        margin: 30px auto 0;
    }
    .collaboration p {
        font-size: calc(24vw /7.5);
    }
    .collaboration p span {
        font-size: calc(12vw /7.5);
    }
}

/* pickup
//* -------------------------------------------------- */
.pickup {
    background-color: var(--brand-yellow);
    padding: 100px 0;
}
.pickup  h3.c-section-heading .c-heading_en {
    color: #fff;
}
.pickup ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.pickup li {
    width: calc(414vw /14);
    margin: 60px auto 0;
    position: relative;
}
.pickup p {
    font-size: calc(16.8vw /14);
    line-height: 1.5;
    margin-top: 0.5em;
}
.pickup p span {
    font-size: calc(12vw /14);
    display: block;
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .pickup {
        padding: 50px 0;
    }
    .pickup ul {
        display: block;
    }
    .pickup li {
        width: 90%;
        margin: 30px auto 0;
    }
    .pickup p {
        font-size: calc(28vw /7.5);
    }
    .pickup p span {
        font-size: calc(20vw /7.5);
    }
}

/* lineup
//* -------------------------------------------------- */
.lineup {
    background-color: var(--brand-cream);
    padding: 100px 0;
}
.lineup  h3.c-section-heading .c-heading_en {
    color: #fdd416;
}
.lineup ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.lineup li {
    width: calc(190vw /14);
    margin: 80px auto 0;
    position: relative;
}
.lineup p {
    font-size: calc(16.8vw /14);
    line-height: 1.5;
    margin-top: 0.5em;
}
.lineup .u-txt_sm {
    font-size: calc(10vw /14);
    display: block;
}
.lineup p span {
    font-size: calc(12vw /14);
    display: block;
}
@media screen and (min-width: 1px) and (max-width: 767px) {
    .lineup {
        padding: 50px 0;
    }
    .lineup ul {
        grid-template-columns: repeat(2, 1fr);
    }
    .lineup li {
        width: 90%;
        margin: 50px auto 0;
    }
    .lineup p {
        font-size: calc(28vw /7.5);
    }
    .lineup p span {
        font-size: calc(20vw /7.5);
    }
    .lineup .u-txt_sm {
        font-size: calc(20vw / 7.5);
    }
}

.lineup-lists p.u-ico__new {
    position: absolute;
    color: #fff;
    text-align: center;
    width: calc(75vw /14);
    height: calc(74vw /14);
    right: calc(10vw /14);
    top: calc(5vw /14);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.lineup-lists p.u-ico__new::before {
    display: block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(75vw /14);
    height: calc(74vw /14);
    background: url(../img/common/bg_new.svg) no-repeat;
    background-size: 100% auto;
}
.lineup-lists .is-state_scroll p.u-ico__new::before {
    animation: rotate 5s linear infinite;
}
@keyframes rotate {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.lineup-lists p.u-ico__new span {
    font-family: komet, "zen-maru-gothic", sans-serif;
    font-weight: 400;
    font-size: calc(14vw /14);
    line-height: 1.2;
    position: relative;
    z-index: 1;
}
.lineup-lists p.u-ico__new.u-ico__new_jp span {
    font-size: calc(12vw /14);
    margin-top: 2px;
}
.lineup .lineup-lists p.u-ico__new {
    width: calc(59vw /14);
    height: calc(57vw /14);
    right: calc(-10vw /14);
    top: calc(-30vw /14);
}
.lineup .lineup-lists p.u-ico__new::before {
    width: calc(59vw /14);
    height: calc(57vw /14);
}
.lineup .lineup-lists p.u-ico__new span {
    font-size: calc(12vw /14);
}
.collaboration .lineup-lists p.u-ico__new {
    right: calc(-15vw /14);
    top: calc(-40vw /14);
}

@media screen and (min-width: 1px) and (max-width: 767px) {
    .lineup-lists p.u-ico__new {
        width: calc(122vw / 7.5);
        height: calc(119vw / 7.5);
        right: calc(15vw / 7.5);
        top: calc(5vw / 7.5);
    }
    .lineup-lists p.u-ico__new::before {
        width: calc(122vw /7.5);
        height: calc(119vw /7.5);
    }
    .lineup-lists p.u-ico__new span {
        font-size: calc(24vw /7.5);
    }
    .lineup-lists p.u-ico__new.u-ico__new_jp span {
        font-size: calc(20vw /7.5);
    }
    .lineup .lineup-lists p.u-ico__new {
        width: calc(97vw /7.5);
        height: calc(95vw /7.5);
        right: calc(-10vw /7.5);
        top: calc(-50vw /7.5);
    }
    .lineup .lineup-lists p.u-ico__new::before {
        width: calc(97vw /7.5);
        height: calc(95vw /7.5);
    }
    .lineup .lineup-lists p.u-ico__new span {
        font-size: calc(26vw /7.5);
    }
    
    .collaboration .lineup-lists p.u-ico__new {
        right: calc(-15vw /7.5);
        top: calc(-40vw /7.5);
    }
}

.collaboration li img,
.pickup li img,
.lineup li img {
    transform: scale(0.8,0.8);
}
.collaboration li.is-state_scroll img,
.pickup li.is-state_scroll img,
.lineup li.is-state_scroll img {
    animation: zoom 0.5s forwards;
    animation-delay: 0.3s;
}
@keyframes zoom {
0% {
    transform: scale(0.8,0.8);
}
100% {
    transform: scale(1);
}
}

@media screen and (min-width: 768px) {
    .collaboration li a:hover,
    .pickup li a:hover,
    .lineup li a:hover {
      transform: scale(1.1);
    }
}