@charset "UTF-8";
 @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");    .p-louisvuitton-mainvisual {
overflow: hidden;
}
.p-louisvuitton-mainvisual--wrap {
background-size: cover;
background-position: center;
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
padding: 5% 0;
position: relative;
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual--wrap {
max-height: 450px;
}
}
.p-louisvuitton-mainvisual_title {
font-size: calc(28 * (100vw / 520));
font-weight: 700;
line-height: 1.3;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_title {
font-size: calc(28 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_title {
font-size: calc(32 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-louisvuitton-mainvisual_title {
font-size: 32px;
font-size: 2rem;
}
}
.p-louisvuitton-mainvisual_animation .brandname {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
opacity: 0;
visibility: hidden;
animation-name: mv_logo;
animation-duration: 10s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: -35vw;
margin: auto;
z-index: 4;
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_animation .brandname {
left: -40vw;
}
}
@media screen and (min-width: 1150px) {
.p-louisvuitton-mainvisual_animation .brandname {
left: -30vw;
}
}
.p-louisvuitton-mainvisual_animation .brandname img {
max-width: calc(385 * (100vw / 768));
width: 50%;
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_animation .brandname img {
max-width: calc(385 * (100vw / 980));
left: -50vw;
}
}
@media screen and (min-width: 980px) {
.p-louisvuitton-mainvisual_animation .brandname img {
max-width: 385px;
left: -40vw;
}
}
.p-louisvuitton-mainvisual_animation .slide01 {
opacity: 0;
visibility: hidden;
animation-name: mv_fadein01;
animation-duration: 6s;
animation-fill-mode: forwards;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
max-width: 976px;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_animation .slide01 {
top: auto;
right: -30vw;
max-height: none;
}
}
.p-louisvuitton-mainvisual_animation .slide01 .mv_flare {
animation-name: mv_flare01_sp;
animation-duration: 6s;
animation-timing-function: ease-in;
position: absolute;
bottom: 35vw;
right: -20vw;
z-index: 1;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_animation .slide01 .mv_flare {
animation-name: mv_flare01;
bottom: 10%;
right: -10vw;
}
}
.p-louisvuitton-mainvisual_animation .slide01 .mv_product {
animation-name: mv_left_sp;
animation-duration: 6s;
animation-timing-function: ease-in;
height: 100%;
position: relative;
bottom: -10vw;
right: -25vw;
z-index: 3;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_animation .slide01 .mv_product {
animation-name: mv_left;
bottom: 0;
right: 0;
max-height: 450px;
}
}
.p-louisvuitton-mainvisual_animation .slide02 {
opacity: 0;
visibility: hidden;
animation-name: mv_fadein01;
animation-duration: 6s;
animation-fill-mode: forwards;
animation-delay: 5s;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
max-width: 928px;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_animation .slide02 {
top: 0;
bottom: auto;
right: -50vw;
max-height: none;
}
}
@media screen and (min-width: 980px) {
.p-louisvuitton-mainvisual_animation .slide02 {
right: -40vw;
}
}
.p-louisvuitton-mainvisual_animation .slide02 .mv_flare {
animation-name: mv_flare02;
animation-duration: 6s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 5s;
position: absolute;
bottom: 10%;
right: -20vw;
z-index: 1;
}
.p-louisvuitton-mainvisual_animation .slide02 .mv_product {
animation-name: mv_top_sp;
animation-duration: 6s;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 5s;
height: 100%;
position: relative;
top: -20px;
right: -10vw;
z-index: 3;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_animation .slide02 .mv_product {
animation-name: mv_top;
right: 0;
max-height: 450px;
}
}
.p-louisvuitton-mainvisual_carousel {
animation-name: mv_fadein02;
animation-duration: 12s;
animation-fill-mode: forwards;
padding: 0 40px;
}
.p-louisvuitton-mainvisual_carousel--list {
margin: 30px auto 0;
max-width: 600px;
position: relative;
width: 100vw;
}
.p-louisvuitton-mainvisual_carousel .carousel-arrow {
height: 18px;
width: 30px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
.p-louisvuitton-mainvisual_carousel .carousel-arrow:before {
background-color: #394656;
content: '';
display: block;
height: 1px;
width: 30px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.p-louisvuitton-mainvisual_carousel .carousel-arrow:after {
background-color: #394656;
content: '';
display: block;
height: 1px;
width: 12px;
transform: rotate(45deg);
position: absolute;
top: 0;
bottom: 9px;
margin: auto;
}
.p-louisvuitton-mainvisual_carousel .carousel-arrow:hover {
cursor: pointer;
}
.p-louisvuitton-mainvisual_carousel .carousel-arrow.prev-arrow {
left: 15px;
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel .carousel-arrow.prev-arrow {
left: -30px;
}
}
.p-louisvuitton-mainvisual_carousel .carousel-arrow.prev-arrow:after {
transform: rotate(-45deg);
left: -1px;
margin: auto;
}
.p-louisvuitton-mainvisual_carousel .carousel-arrow.next-arrow {
right: 15px;
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel .carousel-arrow.next-arrow {
right: -30px;
}
}
.p-louisvuitton-mainvisual_carousel .carousel-arrow.next-arrow:after {
right: -1px;
margin: auto;
}
.p-louisvuitton-mainvisual_carousel--wrap {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
}
.p-louisvuitton-mainvisual_carousel figure > picture img {
margin: auto;
max-height: calc(250 * (100vw / 768));
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel figure > picture img {
max-height: 180px;
}
}
.p-louisvuitton-mainvisual_carousel figure figcaption .brandname {
font-family: Georgia, 游明朝, "Yu Mincho", YuMincho, "Noto Serif JP", "Hiragino Mincho ProN", HGS明朝E, メイリオ, Meiryo, serif;
font-size: calc(32 * (100vw / 768));
line-height: 1.1;
margin: 20px 0 0;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .brandname {
font-size: calc(32 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .brandname {
font-size: calc(22 * (100vw / 980));
margin: 18px 0 0;
}
}
@media screen and (min-width: 980px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .brandname {
font-size: 22px;
font-size: 1.375rem;
}
}
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li {
font-family: "EB Garamond", serif;
font-size: calc(22 * (100vw / 768));
letter-spacing: .1rem;
line-height: 1.4;
margin: 5px 0 0;
text-align: center;
word-break: break-all;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li {
font-size: calc(22 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li {
font-size: calc(15 * (100vw / 980));
margin: 0;
}
}
@media screen and (min-width: 980px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li {
font-size: 15px;
font-size: 0.9375rem;
}
}
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li.amount {
font-size: calc(36 * (100vw / 768));
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li.amount {
font-size: calc(36 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li.amount {
font-size: calc(27 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li.amount {
font-size: 27px;
font-size: 1.6875rem;
}
}
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li .unit {
font-size: calc(24 * (100vw / 768));
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li .unit {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li .unit {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li .unit {
font-size: 16px;
font-size: 1rem;
}
}
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li .btn {
font-size: calc(32 * (100vw / 768));
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li .btn {
font-size: calc(16 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li .btn {
font-size: calc(16 * (100vw / 980));
}
}
@media screen and (min-width: 980px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .list > li .btn {
font-size: 16px;
font-size: 1rem;
}
}
.p-louisvuitton-mainvisual_carousel figure figcaption .btn {
margin: 15px 0 0;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .btn {
margin: 32px 0 0;
text-align: left;
}
}
.p-louisvuitton-mainvisual_carousel figure figcaption .btn a {
background-color: initial;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 5px;
color: #ffffff;
display: inline-block;
font-size: calc(18 * (100vw / 768));
padding: 20px 50px;
text-align: center;
}
@media screen and (min-width: 520px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .btn a {
font-size: calc(12 * (100vw / 768));
}
}
@media screen and (min-width: 768px) {
.p-louisvuitton-mainvisual_carousel figure figcaption .btn a {
font-size: 12px;
font-size: 0.75rem;
}
}
@keyframes mv_fadein01 {
0% {
opacity: 0;
visibility: visible;
}
50% {
opacity: 1;
}
60% {
opacity: 1;
}
99% {
opacity: 0;
visibility: visible;
}
100% {
visibility: hidden;
}
}
@keyframes mv_fadein02 {
0% {
opacity: 0;
visibility: hidden;
}
90% {
opacity: 0;
visibility: visible;
}
100% {
opacity: 1;
}
}
@keyframes mv_top {
0% {
top: -50px;
}
100% {
top: 10px;
}
}
@keyframes mv_top_sp {
0% {
top: -10px;
}
100% {
top: 50px;
}
}
@keyframes mv_left {
0% {
right: -5vw;
}
100% {
right: 5vw;
}
}
@keyframes mv_left_sp {
0% {
right: -35vw;
}
100% {
right: -10vw;
}
}
@keyframes mv_logo {
0% {
opacity: 0;
visibility: visible;
}
20% {
opacity: 1;
}
90% {
opacity: 1;
}
99% {
opacity: 0;
visibility: visible;
}
100% {
visibility: hidden;
}
}
@keyframes mv_flare01 {
0% {
opacity: .6;
bottom: 5vw;
}
80% {
opacity: .9;
}
100% {
opacity: .6;
bottom: 10vw;
}
}
@keyframes mv_flare01_sp {
0% {
opacity: .6;
bottom: 10vw;
}
80% {
opacity: .9;
}
100% {
opacity: .6;
bottom: 20vw;
}
}
@keyframes mv_flare02 {
0% {
opacity: .6;
right: -15vw;
}
80% {
opacity: .9;
}
100% {
opacity: .6;
right: -5vw;
}
}