@charset "utf-8";
/*--------------------------------------------------- */
html{scroll-behavior: smooth;}
body { line-height: 1.6; color: #333; font-size: 16px; font-family:"Century Gothic","Poppins",Verdana,"Hiragino Kaku Gothic ProN","游ゴシック",YuGothic,Meiryo,sans-serif;background: #fff; box-sizing: border-box; overflow-x: hidden; overflow-x: clip; }
p a{text-decoration: none; color:#333;}
p a:hover{text-decoration: underline; color:#333;}
/*------------------base.css-------------------*/
.container { width: 100%; margin: 0 auto; overflow-x: hidden;}
/*.footer { text-align: center; padding: 20px;}*/
/*------------------style.css-------------------*/
h1, h2, h3 { text-align: center; }
h1 { margin: 30px auto 20px; }
section { margin-bottom: 120px; }
/*.footer p { text-align: center; text-decoration: none; font-size:12px;}
.footer p a{text-decoration: none; color:#333;}*/
/*COMMON*/
br.sponly_br{
display:none;
}
br.pconly_br{
display:block;
}
a:hover{
opacity: 0.5;
transition : 0.5s;
}
.wrapper {
display:block;
margin:auto;
width: 100%;
/*border:1px #333 solid;*/
}
/* COMINGSOON */
/*.comingsoon{
display: flex;
margin:auto;
width:30%;
justify-content: center;
align-items: center;
}
.comingsoon img{
width:100%;
}*/

/*FADEIN*/
.fadeInBlock {
display: grid;
}
.fadeInout {
opacity: 0;
transform: translateY(20px);
}
.fadeInout.show{
  animation: fadeIn 1s forwards;
  animation-delay: 0.5s;
}

/* TOP SLIDE */
.top_slide{
position: relative;
display: flex;
justify-content: center;
width: 100%;
height: 600px;
margin:auto;
}
.slide_img1 img{
position: absolute;
top: 50%;
left: -100%;
transform: translate(-20%, -50%);
opacity: 0.8;
width:250px;
z-index: 1;
}
.top_slide_fade1 {
opacity: 0;
transform: translateX(200px);
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.slide_img2 img{
position: absolute;
top: 30%;
left: 50%;
transform: translate(-40%, -40%);
opacity: 0.8;
width:250px;
z-index: 2;
}
.top_slide_fade2 {
opacity: 0;
transform: translateY(-200px);
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0.8s;
}
.slide_img3 img{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-80%, -40%);
opacity: 0.8;
width:250px;
z-index: 3;
}
.top_slide_fade3 {
opacity: 0;
transform: translateX(-200px);
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 1.3s;
}
.slide_img4 img{
position: absolute;
top: 50%;
left: 60%;
transform: translate(-60%, -40%);
opacity: 0.8;
width:250px;
z-index: 4;
}
.top_slide_fade4 {
opacity: 0;
transform: translateY(200px);
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 1.8s;
}
.slide_img5 img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
width:700px;
z-index: 5;
}
.top_slide_fade5 {
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 3s;
}

/* TOP TITLE */
.top_title_SP{
display:none;
}
.top_title{
display:block;
width: 100%;
margin:auto auto 60px;
text-align:center;
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0.5s;
}
.top_title_season{
display:block;
margin:0 auto;
}
.top_title_title{
display:block;
margin:20px auto;
}
.top_title_title img{
width:auto;
}
.top_title_text{
display:block;
width: 100%;
margin:30px auto;
text-align:center;
}
.top_title_text p{
font-size:16px;
}

/* MENU */
.menu{
position: relative;
isolation: isolate;
}
.menu__bg{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
width: calc(100vw - (100vw - 100%));
background-color: rgba(222,207,195,1);
pointer-events: none;
}
.menu_title{
display:block;
width:350px;
margin:50px auto;
}
.menu_item_grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 60px 50px;
width: 700px;
margin: 0 auto 60px;
}
.menu_item_card {
width: 100%;
}
.menu_img_box {
width:200px;
height:200px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.menu_img_box img {
position: absolute;
max-width: 100%;
max-height: 100%;
transition: opacity 0.3s;
}
.img_hover {
opacity: 0;
}
.menu_img_box:hover .img_normal {
opacity: 0;
}
.menu_img_box:hover .img_hover {
opacity: 1;
}
.menu_text_box {
display:block;
margin:10px auto 0;
width: fit-content;
max-width: 100%;
text-align: left;
}
.menu_text_box p {
margin: 0;
line-height: 1.4;
font-size: 12px;
font-family: sans-serif;
font-weight: bold;
}
.menu_text_box .title {
margin-bottom: 5px;
}

.menu_text_box .price,
.menu_text_box .code,
.menu_text_box .color {
font-weight: normal;
}

/* BOX */
.box_margin{
scroll-margin-top: 50px;
}
.box01{ 
display:block;
padding:80px 0;
margin-top:80px;
width:100%;
}
.box_title{
display:block;
margin:auto;
text-align:center;
}
.box_titleline{
display:block;
height:1px;
margin:5px auto 15px;
background-color:#333;
width:600px;
}
.box_number{
display:block;
margin:auto auto 30px;
text-align:center;
}
.box_title2{
display:block;
margin:auto auto 20px;
text-align:center;
}
p.box_copy{
display:block;
margin:auto auto 20px;
font-size:18px;
font-weight:bold;
text-align:center;
}
p.box_text{
display:block;
margin:auto;
width:580px;
font-size:16px;
}
.product-links {
list-style: none;
padding: 0;
display:block;
margin: 30px auto;
width:400px;
}
.product-row {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 3px 0;
}
.product-name {
flex: 1 1 auto;
text-decoration: none;
color: inherit; 
font-size:16px;
font-weight: 700;
}
.product-name span{
font-size:14px;
font-weight: 700;
}
.product-name a{
color:#333;
text-decoration: none;
}
.product-name a:hover{
text-decoration: underline;
}
.buy-link {
flex: 0 0 auto;
margin-left: auto;
white-space: nowrap;
text-decoration: none;
color: inherit;
padding:2px 14px;
font-size:12px;
font-weight: 700;
background-color: #fff;
border:1px #333 solid;
}
.buy-link:hover {
background-color: #666;
color:#fff;
border:1px #333 solid;
}
.box01 .box_image,
.box04 .box_image{
display:block;
margin:auto auto 30px;
text-align:center;
}
.box03 .box_image1,
.box06 .box_image1{
display:block;
margin:auto auto 30px;
text-align:center;
}
.box03 .box_image2,
.box06 .box_image2{
display:none;
margin:0 0 0;
text-align:center;
}
.box02 .box_image_movie{
display:block;
position:relative;
width:800px;
height:600px;
margin:auto auto 30px;
}
.box02 .box_image{
display:block;
position:absolute;
left:0;
top:0;
margin:auto auto 30px;
text-align:left;
z-index:1;
}
.box02 .box_movie{
display:block;
position:absolute;
margin:auto auto;
text-align:right;
z-index:2;
width:300px;
height:533px;
top: 50%;
right: 0;
transform: translateY(-50%);
/*border:1px #333 solid;*/
}
.box05 .box_image_movie{
display:block;
position:relative;
width:800px;
height:600px;
margin:auto auto 30px;
}
.box05 .box_image{
display:block;
position:absolute;
right:0;
top:0;
margin:auto auto 30px;
text-align:left;
z-index:1;
}
.box05 .box_movie{
display:block;
position:absolute;
margin:auto auto;
text-align:right;
z-index:2;
width:300px;
height:533px;
top: 50%;
lreft: 0;
transform: translateY(-50%);
/*border:1px #333 solid;*/
}

/*MOVIE*/
/*.video-background {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 533px;
  border:1px solid;
}*/
.box02 .box_movie video,
.box05 .box_movie video{
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.controls {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
  display: flex;
  gap: 10px;
  z-index: 2;
}
.controls button {
  padding: 5px;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
}
.fadeInout.show .bottom_image .bottom_image01 {
  animation: fadeIn 3s forwards;
  animation-delay: 1.5s;
}
.fadeInout.show .bottom_image .bottom_image02 {
  animation: fadeIn 3s forwards;
  animation-delay: 2s;
}
.fadeInout.show .bottom_image .bottom_image03 {
  animation: fadeIn 3s forwards;
  animation-delay: 2.5s;
}
.bottom_image{
position: relative;
display: flex;
margin:60px auto;
width:500px;
height:630px;
}
.box01 .bottom_image .bottom_image01{
position:absolute;
top:0;
right:0;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box01 .bottom_image .bottom_image02{
position:absolute;
top:100px;
left:0;
z-index:3;
opacity: 0;
transform: translate(0);
}
.box01 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:160px;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box02 .bottom_image .bottom_image01{
position:absolute;
top:0;
left:80px;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box02 .bottom_image .bottom_image02{
position:absolute;
top:180px;
right:0;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box02 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:0;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box03 .bottom_image .bottom_image01{
position:absolute;
top:0px;
left:0px;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box03 .bottom_image .bottom_image02{
position:absolute;
top:100px;
right:0;
z-index:3;
opacity: 0;
transform: translate(0);
}
.box03 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:130px;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box04 .bottom_image .bottom_image01{
position:absolute;
top:0px;
right:0px;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box04 .bottom_image .bottom_image02{
position:absolute;
top:80px;
left:0;
z-index:3;
opacity: 0;
transform: translate(0);
}
.box04 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:150px;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box05 .bottom_image .bottom_image01{
position:absolute;
top:0px;
right:0px;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box05 .bottom_image .bottom_image02{
position:absolute;
top:80px;
left:0;
z-index:3;
opacity: 0;
transform: translate(0);
}
.box05 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:150px;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box06 .bottom_image .bottom_image01{
position:absolute;
top:0px;
left:0px;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box06 .bottom_image .bottom_image02{
position:absolute;
top:80px;
right:0;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box06 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:100px;
z-index:3;
opacity: 0;
transform: translate(0);
}

/* FOOTER */
.footer{
position: relative;
isolation: isolate;
}
.footer__bg{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
width: calc(100vw - (100vw - 100%));
background-color: #000;
pointer-events: none;
}
.footer_history_pierrecardin{
display:block;
width:500px;
padding:50px 10px;
margin:auto;
color:#fff;
text-align: center;
}
.footer_history_pierrecardin p{
display:block;
margin:10px auto;
text-align: left;
font-size:16px;
}
.footer_history_pierrecardin p span{
display:block;
margin:20px auto 10px;
text-align: center;
font-weight:700;
}
.footer_history_pierrecardin p a{
color:#fff;
text-decoration: underline;
} 
.footer_line{
display:block;
width:200px;
height:1px;
margin:30px auto;
background-color:#fff;
}
.footer_box{
display: flex;
justify-content: space-between;
align-items: center;
width:500px;
padding:30px 10px;
margin: 10px auto;
}
.footer-left a {
color: #fff;
margin:0 20px 0;
font-size:12px;
text-decoration: none;
}
.footer-right p a {
color: #fff;
margin-right: 20px;
font-size:12px;
text-decoration: none;
}
/* fadeinanime */
@keyframes fadeIn {
0% {
}
100% {
opacity: 1;
transform: translate(0);
}
}
/*---------------SP------------------*//*---------------SP------------------*//*---------------SP------------------*/
/*---------------SP------------------*//*---------------SP------------------*//*---------------SP------------------*/
@media screen and (max-width: 680px) {
*, *::before, *::after { box-sizing: border-box; }

/*COMMON*/
br.sponly_br{
display:block;
}
br.pconly_br{
display:none;
}
html{
font-size: calc(100vw / 40);
}
.wrapper {
display:block;
width: 100%;
margin:0;
padding:0;
}
/* COMINGSOON */
/*.comingsoon{
display: flex;
margin:auto;
width:30%;
justify-content: center;
align-items: center;
}
.comingsoon img{
width:100%;
}*/

/*FADEIN*/
.fadeInBlock {
display: grid;
}
.fadeInout {
opacity: 0;
transform: translateY(20px);
}
.fadeInout.show{
  animation: fadeIn 1s forwards;
  animation-delay: 0.5s;
}

/* TOP SLIDE */
.top_slide{
position: relative;
display: flex;
justify-content: center;
width: 100%;
max-height: 500px;
margin:auto;
}
.slide_img1 img{
position: absolute;
top: 50%;
left: -60%;
transform: translate(-30%, -50%);
opacity: 0.8;
width:200px;
z-index: 1;
}
.top_slide_fade1 {
opacity: 0;
transform: translateX(200px);
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0s;
}
.slide_img2 img{
position: absolute;
top: 30%;
left: 50%;
transform: translate(-55%, -30%);
opacity: 0.8;
width:200px;
z-index: 2;
}
.top_slide_fade2 {
opacity: 0;
transform: translateY(-200px);
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 0.8s;
}
.slide_img3 img{
position: absolute;
top: 40%;
left: 60%;
transform: translate(-65%, -40%);
opacity: 0.8;
width:200px;
z-index: 3;
}
.top_slide_fade3 {
opacity: 0;
transform: translateX(-200px);
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 1.3s;
}
.slide_img4 img{
position: absolute;
top: 40%;
left: 55%;
transform: translate(-40%, -20%);
opacity: 0.8;
width:200px;
z-index: 4;
}
.top_slide_fade4 {
opacity: 0;
transform: translateY(200px);
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 1.8s;
}
.slide_img5 img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 1;
width:300px;
z-index: 5;
}
.top_slide_fade5 {
opacity: 0;
animation-name: fadeIn;
animation-duration: 3s;
animation-fill-mode: forwards;
animation-delay: 3s;
}

/* TOP TITLE */
.top_title_SP{
display:block;
width: 100%;
margin:10px auto 0;
text-align:center;
}
.top_title_SP img{
width:auto;
}
.top_title{
display:block;
width: 100%;
margin:auto auto 60px;
text-align:center;
}
.top_title .top_title_season{
display:none;
}
.top_title_title{
display:block;
width: 100%;
margin:0 auto 40px;
text-align:center;
}
.top_title_title img{
width:60%;
}
.top_title_text{
display:block;
width: 98%;
margin:20px auto;
text-align:center;
}
.top_title_text p{
font-size:1.4rem;
}

/* MENU */
.menu{
position: relative;
isolation: isolate;
}
.menu__bg{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
width: calc(100vw - (100vw - 100%));
background-color: rgba(222,207,195,1);
pointer-events: none;
}
.menu_title{
display:block;
width:60%;
margin:30px auto;
}
.menu_title img{
width:100%;
}
.menu_item_grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px 0;
width: 100%;
margin: 0 auto 40px;
}
.menu_item_card {
width: 80%;
display:block;
margin:auto;
}
.menu_img_box {
width: 200px;
height: 200px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
margin:auto;
}
.menu_img_box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
animation: fade 6s infinite;
}
.menu_img_box img.img_normal {
animation-delay: 0s;
}
.menu_img_box img.img_hover {
animation-delay: 3s;
}
@keyframes fade 
{
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.menu_text_box {
display:block;
margin:10px auto 0;
width: fit-content;
max-width: 100%;
text-align: left;
}
.menu_item_card::after {
content: "";
display: block;
width: 60%;
height: 1px;
background: #000;
margin: 30px auto 0;
}
.menu_item_card:last-child::after {
  display: none;
}
.menu_text_box p {
margin: 0;
line-height: 1.4;
font-size: 1.2rem;
font-family: sans-serif;
font-weight: bold;
}
.menu_text_box .title {
margin-bottom: 5px;
}
.menu_text_box .price,
.menu_text_box .code,
.menu_text_box .color {
font-weight: normal;
}

/* BOX */
.box_margin{
scroll-margin-top: 50px;
}
.box01{ 
display:block;
padding:20px 0;
margin:20px 0;
width:100%;
}
.box_title{
display:block;
margin:auto;
text-align:center;
}
.box_title img{
width:60%;
}
.box_titleline{
display:block;
height:1px;
margin:5px auto 15px;
background-color:#333;
width:80%;
}
.box_number{
display:block;
margin:auto auto 30px;
text-align:center;
}
.box_number img{
width:5%;
}
.box_title2{
display:block;
margin:auto auto 20px;
text-align:center;
}
.box_title2 img{
width:90%;
}
p.box_copy{
display:block;
margin:auto auto 20px;
font-size:1.6rem;
font-weight:bold;
text-align:center;
width:90%;
}
p.box_text{
display:block;
margin:auto;
width:90%;
font-size:1.4rem;
}


.product-links {
list-style: none;
padding: 0;
display:block;
margin: 30px auto;
width:90%;
}
.product-row {
display: flex;
align-items: baseline;
gap: 1rem;
padding: 3px 0;
}
.product-name {
flex: 1 1 auto;
text-decoration: none;
color: inherit; 
font-size:1.4rem;
font-weight: 700;
}
.product-name span{
font-size:1.2rem;
font-weight: 700;
}
.product-name a{
color:#333;
text-decoration: none;
}
.product-name a:hover{
text-decoration: underline;
}
.buy-link {
flex: 0 0 auto;
margin-left: auto;
white-space: nowrap;
text-decoration: none;
color: inherit;
padding:2px 10px;
font-size:1.2rem;
font-weight: 700;
background-color: #fff;
border:1px #333 solid;
}
.buy-link:hover {
background-color: #666;
color:#fff;
border:1px #333 solid;
}


.box01 .box_image,
.box04 .box_image{
display:block;
margin:auto auto 30px;
text-align:center;
width:100%;
}
.box03 .box_image1,
.box06 .box_image1{
display:none;
margin:0 0 0;
text-align:center;
}
.box03 .box_image2,
.box06 .box_image2{
display:block;
margin:auto auto 30px;
text-align:center;
width:100%;
}
.box01 .box_image img,
.box03 .box_image2 img,
.box04 .box_image img,
.box06 .box_image2 img{
width:80%;
}
.box02 .box_image_movie{
display:block;
position:static;
width:100%;
height:auto;
margin:auto auto 30px;
text-align:center;
}
.box02 .box_image{
display:block;
position:static;
margin:auto auto 30px;
text-align:center;
width:100%;
z-index:1;
}
.box02 .box_image img{
width:80%;
}
.box02 .box_movie{
display:block;
position:relative;
margin:0 auto;
text-align:right;
z-index:2;
width:80%;
max-width:300px;
height:533px;
top: auto;
right: 0;
transform: none;
/*border:1px #333 solid;*/
}
.box05 .box_image_movie{
display:block;
position:relative;
width:100%;
height:auto;
margin:auto auto 30px;
}
.box05 .box_image{
display:block;
position:static;
margin:auto auto 30px;
text-align:center;
width:100%;
z-index:1;
}
.box05 .box_image img{
width:80%;
}
.box05 .box_movie{
display:block;
position:relative;
margin:0 auto;
text-align:right;
z-index:2;
width:100%;
max-width:300px;
min-height:533px;
top: 0;
right: 0;
transform: none;
/*border:1px #333 solid;*/
}
.box05 .box_image_movie{
display:block;
position:relative;
width:100%;
height:auto;
margin:auto auto 30px;
}

/*MOVIE*/
/*.video-background {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 533px;
  border:1px solid;
}*/
.box02 .box_movie video,
.box05 .box_movie video{
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.controls {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translate(-50%, 0);
  display: flex;
  gap: 10px;
  z-index: 2;
}
.controls button {
  padding: 5px;
  background: rgba(0,0,0,0.5);
  border: none;
  cursor: pointer;
}
.fadeInout.show .bottom_image .bottom_image01 {
  animation: fadeIn 3s forwards;
  animation-delay: 1.5s;
}
.fadeInout.show .bottom_image .bottom_image02 {
  animation: fadeIn 3s forwards;
  animation-delay: 2s;
}
.fadeInout.show .bottom_image .bottom_image03 {
  animation: fadeIn 3s forwards;
  animation-delay: 2.5s;
}
.bottom_image{
position: relative;
display: flex;
margin:20px auto;
width:100%;
max-height:450px;
text-align:center;
}
.bottom_image img{
width:65%;
}
.box01 .bottom_image .bottom_image01{
position:absolute;
top:0;
right:0;
z-index:1;
opacity: 0;
}
.box01 .bottom_image .bottom_image02{
position:absolute;
top:15%;
left:0%;
z-index:3;
opacity: 0;
transform: translate(0);
}
.box01 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:30%;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box02 .bottom_image .bottom_image01{
position:absolute;
top:0;
left:15%;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box02 .bottom_image .bottom_image02{
position:absolute;
top:35%;
right:0;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box02 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:0;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box03 .bottom_image .bottom_image01{
position:absolute;
top:0px;
left:5%;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box03 .bottom_image .bottom_image02{
position:absolute;
top:10%;
right:0;
z-index:3;
opacity: 0;
transform: translate(0);
}
.box03 .bottom_image .bottom_image03{
position:absolute;
bottom:5%;
left:15%;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box04 .bottom_image .bottom_image01{
position:absolute;
top:5%;
right:0;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box04 .bottom_image .bottom_image02{
position:absolute;
top:15%;
left:0;
z-index:3;
opacity: 0;
transform: translate(0);
}
.box04 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:25%;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box05 .bottom_image .bottom_image01{
position:absolute;
top:0;
right:0;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box05 .bottom_image .bottom_image02{
position:absolute;
top:10%;
left:0;
z-index:3;
opacity: 0;
transform: translate(0);
}
.box05 .bottom_image .bottom_image03{
position:absolute;
bottom:5%;
left:30%;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box06 .bottom_image .bottom_image01{
position:absolute;
top:0;
left:0;
z-index:1;
opacity: 0;
transform: translate(0);
}
.box06 .bottom_image .bottom_image02{
position:absolute;
top:10%;
right:0;
z-index:2;
opacity: 0;
transform: translate(0);
}
.box06 .bottom_image .bottom_image03{
position:absolute;
bottom:0;
left:15%;
z-index:3;
opacity: 0;
transform: translate(0);
}

/* FOOTER */
.footer{
position: relative;
isolation: isolate;
width:100%;
}
.footer__bg{
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
width: calc(100vw - (100vw - 100%));
background-color: #000;
pointer-events: none;
}
.footer_history_pierrecardin{
display:block;
width:90%;
padding:50px 10px;
margin:auto;
color:#fff;
text-align: center;
}
.footer_history_pierrecardin p{
display:block;
margin:10px auto;
text-align: left;
font-size:1.4rem;
}
.footer_history_pierrecardin p span{
display:block;
margin:20px auto 10px;
text-align: center;
font-weight:700;
}
.footer_line{
display:block;
width:200px;
height:1px;
margin:30px auto;
background-color:#fff;
}
.footer_box{
display: flex;
flex-direction: column;
align-items: center;
width: 90%;
margin: 0 auto;
}
.footer-left a {
color: #fff;
margin:10px 20px 10px;
font-size:1.2rem;
text-decoration: none;
display:block;
}
.footer-right p a {
color: #fff;
margin-right: 20px;
font-size:1.2rem;
text-decoration: none;
}
/* fadeinanime */
@keyframes fadeIn {
0% {
}
100% {
opacity: 1;
transform: translate(0);
}
}
