@charset "UTF-8";
/* 全体設定 */
@font-face{
  font-family: 'Ferrari-Sans';
  src: url(../font/Ferrari-SansLight.woff) format('woff');
  font-weight: 300;
  font-style: normal;
}
@font-face{
  font-family: 'Ferrari-Sans';
  src: url(../font/Ferrari-SansRegular.woff) format('woff');
  font-weight: 400;
  font-style: normal;
}
@font-face{
  font-family: 'Ferrari-Sans';
  src: url(../font/Ferrari-SansBold.woff) format('woff');
  font-weight: 700;
  font-style: normal;
}
@font-face{
  font-family: 'Ferrari-Sans';
  src: url(../font/Ferrari-SansBoldItalic.woff) format('woff');
  font-weight: 700;
  font-style: italic;
}
:root{
  --color-black: #000;
  --color-red: #ED1C24;
  --color-white: #fff;
  --size-8px: clamp(.5rem, 2.133vw, 1.25rem);
  --size-10px: clamp(.625rem, 2.667vw, 1.625rem);
  --size-12px: clamp(.75rem, 3.2vw, 2rem);
  --size-16px: clamp(1rem, 4.267vw, 2.625rem);
  --size-20px: clamp(1.25rem, 5.333vw, 3.25rem);
  --size-24px: clamp(1.5rem, 6.4vw, 4rem);
  --size-30px: clamp(1.875rem, 8vw, 5rem);
  --size-32px: clamp(2rem, 8.533vw, 5.25rem);
  --size-42px: clamp(2.625rem, 11.2vw, 7rem);
  --size-44px: clamp(2.75rem, 11.733vw, 7.125rem);
  --size-62px: clamp(3.875rem, 16.533vw, 10.25rem);
  --size-64px: clamp(4rem, 17.067vw, 10.375rem);
  --size-80px: clamp(5rem, 21.33vw, 13.25rem);
  --size-84px: clamp(5.25rem, 22.4vw, 13.5rem);
  --size-90px: clamp(5.625rem, 24vw, 15rem);
  --size-100px: clamp(6.25rem, 26.667vw, 16.625rem);
  --fs-6px: clamp(.375rem, 1.6vw, .75rem);
  --fs-8px: clamp(.5rem, 2.133vw, .875rem);
  --fs-10px: clamp(.625rem, 2.667vw, 1rem);
  --fs-12px: clamp(.75rem, 3.2vw, 1.125rem);
  --fs-14px: clamp(.875rem, 3.733vw, 1.25rem);
  --fs-16px: clamp(1rem, 4.267vw, 1.375rem);
  --fs-20px: clamp(1.25rem, 5.333vw, 1.625rem);
  --fs-22px: clamp(1.375rem, 5.867vw, 1.75rem);
  --fs-36px: clamp(2.25rem, 9.6vw, 1.75rem);
  --header-height-sp: var(--size-64px);
  --header-height-pc: 80px;
}
@media screen and (min-width: 1001px){
}
*{
  color: var(--color-black);
  font-family: 'Ferrari-Sans', 'Noto Sans JP', sans-serif;
  font-style: normal;
  font-weight: 400;
  word-wrap: break-word;
  box-sizing: border-box;
  line-height: 1.625;
  margin: 0;
  padding: 0;
}
body{
  font-family: 'Ferrari-Sans', sans-serif;
  background-color: var(--color-white);
}
ul{
  list-style: none;
}
a{
  text-decoration: none;
}
img{
  width: 100%;
  max-width: max-content;
  vertical-align: bottom;
}
.sp{
  display: none;
}
@media screen and (max-width: 768px){
  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
}
/* 横幅指定 */
main, header, footer{
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}
main .inner,
header .inner{
  padding: 0 clamp(var(--size-16px), var(--size-16px), 42px);
}

/* header */
header{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  background: var(--color-white);
  z-index: 999;
}
header:has(.active){
  background: var(--color-black);
}
header .inner{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: var(--header-height-sp);
}
.site-title{
  font-size: var(--fs-12px);
  line-height: 1;
}
header:has(.active) .site-title{
  color: var(--color-white);
}
#menu-btn{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--fs-10px);
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background: transparent;
  font-size: var(--fs-10px);
  padding: 0 var(--size-16px);
  border: none;
}
#menu-btn .close{
  display: none;
  color: var(--color-white);
}
#menu-btn.active .menu{
  display: none;
}
#menu-btn.active .close{
  display: block;
}
#menu-btn div{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 6px;
}
#menu-btn div span{
  background: var(--color-black);
  width: var(--fs-36px);
  height: 2px;
}
#menu-btn.active div span{
  background: var(--color-white);
}
#menu-btn.active div span{
  transform: rotate(30deg) translate(-5%, -150%);
}
#menu-btn.active div span:nth-child(1){
  transform: rotate(-30deg) translate(-5%, 200%);
}
#menu-content{
  display: none;
  min-height: calc(100vh - var(--header-height-sp));
  background: var(--color-black);
  padding: 50px var(--size-32px);
  transition: .3s;
}
#menu-content.open{
  display: block;
}
#menu-content ul{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
#menu-content ul li a{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  line-height: 1;
  color: var(--color-white);
  font-size: var(--fs-22px);
  font-weight: 700;
  width: 100%;
  height: 100px;
  padding-right: var(--fs-12px);
  border-top: 1px solid var(--color-white);
  transition: .3s;
}
#menu-content ul li:nth-child(1) a{
  border-top: none;
}
#menu-content ul li a::after{
  content: '';
  position: absolute;
  top: 50%;
  right: -5px;
  transform: translate(0, -50%) rotate(-90deg);
  width: var(--fs-16px);
  height: var(--fs-8px);
  background: transparent url(../img/arrow.svg) no-repeat center center / contain;
}
#menu-content .contact{
  padding-top: var(--size-42px);
}

/* footer */
footer p{
	font-size: var(--fs-6px);
  line-height: 1;
  text-align: right;
  padding: 2px 2px 4px;
}

/* 共通 */
.bg-bk{
  background: var(--color-black);
  margin-bottom: var(--size-80px);
}
.bg-bk *{
  color: var(--color-white);
}
h2{
	font-size: var(--fs-22px);
  font-weight: 700;
  line-height: 1.3;
}
h3{
  font-size: var(--fs-16px);
}
p{
	font-size: var(--fs-10px);
}
p span{
  font-weight: 300;
}
.btn{
  position: relative;
  display: block;
  width: 65%;
  background: var(--color-red);
  font-size: var(--fs-10px);
  font-weight: 700;
  text-align: center;
  margin: var(--size-32px) auto 0;
  padding: var(--fs-10px);
  border: 1px solid var(--color-white);
}
.btn::after{
  content: '';
  position: absolute;
  top: 50%;
  right: var(--size-16px);
  transform: translate(0, -50%) rotate(-90deg);
  width: var(--fs-16px);
  height: var(--fs-8px);
  background: transparent url(../img/arrow.svg) no-repeat center center / contain;
}
.contact p{
  color: var(--color-white);
  text-align: center;
}
.contact .contact-title{
  font-size: var(--fs-12px);
  letter-spacing: .05rem;
}
.contact p span{
  color: var(--color-white);
}
.contact .btn{
  color: var(--color-white);
  font-size: clamp(.75rem, 3.2vw, 1.25rem);
  text-decoration: underline;
  margin-top: var(--size-8px);
  margin-bottom: var(--size-12px);
}

/* main */
main{
  padding-top: var(--header-height-sp);
}

/* #mv */
#mv{
  position: relative;
  background: var(--color-black);
  min-height: calc(100vh - var(--header-height-sp));
}
#mv h1{
  position: relative;
  height: 0;
  padding-top: 199.467%;
}
#mv h1::after{
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  background: linear-gradient(0deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
#mv h1 img{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
}
#mv .mv-bottom{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
#mv .mv-bottom p,
#mv .mv-bottom p span{
  color: var(--color-white);
  font-size: clamp(.625rem, 2.667vw, 1.625rem);
  line-height: 1.8;
  letter-spacing: .05rem;
}
#mv .mv-bottom .arrow{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: var(--size-32px) auto var(--size-24px);
}
#mv .mv-bottom .arrow p{
  font-size: var(--fs-10px);
  margin-bottom: var(--size-8px);
}
#mv .mv-bottom .arrow img{
  max-width: var(--size-32px);
}

/* #intro */
#intro{
  padding: var(--size-64px) var(--size-16px);
}
#intro .text-top{
  font-size: clamp(1rem, 4.267vw, 2.25rem);
  margin-bottom: var(--size-32px);
}
#intro p{
  font-size: clamp(.75rem, 3.2vw, 1.5rem);
  font-weight: 700;
  margin-bottom: var(--size-24px);
}
#intro .place{
  background: var(--color-black);
}
#intro .place-detail{
  padding: 0 var(--size-16px) var(--size-32px);
}
#intro .place img{
  margin-bottom: var(--size-8px);
}
#intro .place p,
#intro .place span,
#intro .place a{
  color: var(--color-white);
}
#intro .place-title,
#intro .place-name,
#intro .place-address{
  font-size: var(--fs-12px);
  font-weight: 700;
  line-height: 1.65;
  margin-bottom: var(--size-8px);
}
#intro .place-title{
  font-size: clamp(.75rem, 3.2vw, 1.5rem);
}
#intro .place-name{
  margin-bottom: var(--size-12px);
}
#intro .place-address{
  font-weight: 400;
}
#intro .place-address span{
  font-weight: 300;
}

/* #experience-collection */
#experience-collection{
  padding: var(--size-32px) 0 var(--size-64px);
}
#experience-collection h2{
  margin-bottom: var(--size-64px);
}
#experience-collection .text-top{
  font-size: var(--fs-16px);
  margin-bottom: var(--size-64px);
}
#experience-collection .collection{
  margin-bottom: var(--size-64px);
}
#experience-collection .collection-item{
  margin-bottom: var(--size-32px);
}
#experience-collection .collection-item img{
  display: block;
  width: 66.666%;
  margin-left: auto;
}
#experience-collection .collection-item:nth-child(2n+1) img{
  margin-right: auto;
  margin-left: 0;
}
#experience-collection .collection-item .collection-text{
  background: var(--color-white);
  width: calc(100% - var(--size-62px));
  max-width: 600px;
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  margin-top: calc(-1 * var(--fs-20px));
  margin-right: auto;
}
#experience-collection .collection-item:nth-child(2n+1) .collection-text{
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 0% 100%);
  margin-right: 0;
  margin-left: auto;
}
#experience-collection .collection-item .collection-text div{
  color: var(--color-black);
  font-weight: 700;
}
#experience-collection .collection-item .collection-text .name{
  font-size: var(--fs-22px);
  font-style: italic;
  padding-left: var(--size-16px);
}
#experience-collection .collection-item:nth-child(2n+1) .collection-text .name{
  padding-left: var(--size-30px);
}
#experience-collection .collection-item .collection-text .price{
  position: relative;
  font-size: var(--fs-14px);
  text-align: right;
  padding-right: var(--size-30px);
}
#experience-collection .collection-item:nth-child(2n+1) .collection-text .price{
  padding-right: var(--size-16px);
}
#experience-collection .collection-item .collection-text .price::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: var(--color-black);
}
#experience-collection .note{
  font-size: clamp(.75rem, 3.2vw, 1.5rem);
  text-align: center;
}

/* #ferrari-approved-world */
#ferrari-approved-world h2,
#ferrari-approved-world h3,
#ferrari-approved-world p{
  text-align: center;
}
#ferrari-approved-world{
  padding: var(--size-64px) 0;
}
#ferrari-approved-world h2{
  margin-bottom: var(--size-8px);
}
#ferrari-approved-world h3{
  font-weight: 700;
  margin-bottom: var(--size-20px);
}
#ferrari-approved-world p{
  font-size: var(--fs-12px);
  line-height: 1.8;
}
#ferrari-approved-world .bg-img{
  position: relative;
  background: transparent url(../img/04_Ferrari_F8_Tributo_Interni_36509.jpg) no-repeat center center / cover;
  margin-top: var(--size-84px);
  padding-top: var(--size-44px);
}
#ferrari-approved-world .bg-img::before,
#ferrari-approved-world .bg-img::after{
content: '';
position: absolute;
left: 0;
width: 100%;
height: var(--size-90px);
}
#ferrari-approved-world .bg-img::before{
  top: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,1));
}
#ferrari-approved-world .bg-img::after{
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0));
}
#ferrari-approved-world .bg-img *{
  position: relative;
  z-index: 1;
}
#ferrari-approved-world .bg-img p{
  margin-bottom: var(--size-100px);
}

/* #ferrari-financial-services */
#ferrari-financial-services{
  padding-bottom: var(--size-64px);
}
#ferrari-financial-services .top-img{
  position: relative;
}
#ferrari-financial-services .top-img h2{
  position: absolute;
  top: var(--size-16px);
  left: var(--size-16px);
}
#ferrari-financial-services h3{
  position: relative;
  background: linear-gradient(90deg, rgba(0,0,0,1), rgba(0,0,0,0));
  color: var(--color-white);
  line-height: 1;
  margin-top: calc(-1 * var(--size-64px));
  margin-bottom: var(--size-16px);
  padding: var(--fs-8px) var(--fs-16px);
}
#ferrari-financial-services .inner{
  position: relative;
}
#ferrari-financial-services .card-bk{
  background: var(--color-black);
  margin-bottom: var(--size-16px);
  padding: var(--size-16px);
}
#ferrari-financial-services .card-bk *{
  color: var(--color-white);
}
#ferrari-financial-services .card-bk dl>div{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: var(--size-10px);
}
#ferrari-financial-services .card-bk dt,
#ferrari-financial-services .card-bk dd{
  font-size: clamp(.625rem, 2.667vw, 1.25rem);
}
#ferrari-financial-services .card-bk dt{
  width: clamp(4.75rem, 20.267vw, 8.25rem);
}
#ferrari-financial-services .card-bk dd span{
  font-size: var(--fs-6px);
}
#ferrari-financial-services .note{
  font-size: var(--fs-8px);
  letter-spacing: .05rem;
}
#ferrari-financial-services .inner>p{
  margin-bottom: var(--size-10px);
}
#ferrari-financial-services .text-bottom{
  font-size: clamp(.75rem, 3.2vw, 1.5rem);
  font-weight: bold;
  text-align: center;
  letter-spacing: .05rem;
  margin-top: var(--size-32px);
}

/* #benefit */
#benefit{
  position: relative;
}
#benefit .text{
  position: absolute;
  top: var(--size-42px);
  left: 0;
  width: 100%;
}
#benefit .bg{
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  margin-top: var(--size-32px);
  padding: var(--size-32px) 0;
}
#benefit p{
  color: var(--color-white);
  font-size: clamp(.625rem, 2.667vw, 1.25rem);
  text-align: center;
}

/* #access */
#access{
  margin-bottom: 0;
  padding-top: var(--size-32px);
  padding-bottom: var(--size-32px);
}
#access h2{
  margin-bottom: var(--size-24px);
}
#access .name{
  font-size: var(--fs-12px);
  line-height: 1;
  margin-bottom: var(--size-8px);
}
#access .address{
  font-size: var(--fs-10px);
  margin-bottom: var(--size-16px);
}
#access .map-wrap{
  position: relative;
  width: 100%;
  height: 0;
  margin-bottom: var(--size-32px);
  padding-top: clamp(200px, 65.598%, 299px);
}
#access iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
@media screen and (min-width: 501px){
  header .inner{
    height: var(--header-height-pc);
  }
  #menu-content{
    min-height: calc(100vh - var(--header-height-pc));
  }
  main{
    padding-top: var(--header-height-pc);
  }
  #mv{
    min-height: calc(100vh - var(--header-height-pc));
  }
}