@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap");

@font-face {
  font-family: Aharoni;
  src: url("../fonts/ahronbd.ttf");
}

@font-face {
  font-family: Futura;
  src: url("../fonts/Futura.ttc");
}

:root {
  /* COLOR */
  --main-color: #90001e;
  --secondary-color: #fffbf7;
  --tertiary-color: #d7c596;
  --mainv1-color: #74001a;
  --mainv2-color: #2a0001;
  --mainv3-color: #b80025;
  --mainv4-color: #590112;
  /* WIDTH */
  --main-width: 1385px;
  --secondary-width: 1550px;
  --tertiary-width: 1200px;
  --quaternary-width: 1375px;
  /* SPECIAL */
  --lead-height: 1168px;
  --lead-top-slope: 0.1;
  --lead-bottom-slope: 0.3;
  --cake-bottom-slope: 116px;
  --restaurant-bottom-slope: 145px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.pc {
  display: block;
}
.sp {
  display: none;
}

body {
  word-break: auto-phrase;
}

.bottom-item {
  list-style: none;

  /* p */
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 3.6px;
  word-break: normal;
}

.bottom-item:before {
  content: "※";
}

.copyright-ctn {
  margin: 14px 0 13px;
  text-align: center;
}

#copyright {
  color: black;
}

.logo-img {
  width: 200px;
}

.social {
  margin-bottom: 32px;
  display: flex;
  gap: 24px;
}

.logo {
  margin-bottom: 115px;
}

.footer-ctn {
  margin: 52px 0 68px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#bottom {
  background: var(--main-color);
  color: var(--secondary-color);
}

.bottom-ctn {
  margin: 107px 0 115px;
}

.even-ctn {
  width: 100%;
  margin: 165px 0 110px;
  max-width: var(--quaternary-width);
}

.plan-ctn {
  width: 100%;
  max-width: var(--tertiary-width);
  margin: 236px 0 120px;
}

.restaurant-ctn {
  width: 100%;
  max-width: var(--main-width);
  margin-bottom: 292px;
}

.card-pic {
  grid-row: span 4;
}

#plan .card-pic {
}

.hidden {
  display: none;
}

.svg4 {
  width: 115px;
  height: 132px;
}

.svg3 {
  width: 199px;
  height: 228px;
}

.svg2 {
  width: 112px;
  height: 127px;
}

.cake-svg-box5 {
  top: clamp(400px, calc(42.1vw + 92.4px), 744px);
  left: calc(50% + clamp(300px, calc(52.43vw - 102.66px), 710px));
}

.cake-svg-box6 {
  top: clamp(312px, calc(-1px + 40.79vw), 631px);
  left: calc(50% + clamp(233px, calc(43.61vw - 101.9px), 574px));
}

.cake-svg-box7 {
  top: clamp(390px, calc(49.68vw + 19.4px), 790px);
  left: calc(50% + clamp(100px, calc(43.61vw - 234.9px), 441px));
}

.cake-svg-box8 {
  top: clamp(280px, calc(40.26vw - 28.1px), 596px);
  left: calc(50% + clamp(12px, calc(47.06vw - 349.41px), 380px));
}

.svg1 {
  width: 126px;
  height: 123px;
}

.cake-svg-box {
  position: absolute;
  z-index: -1;
}

.cake-svg-box:before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 1000px;
  background: var(--tertiary-color);
  top: 1px;
  left: 50%;
  translate: -50% -100%;
}

.cake-svg-box1 {
  top: clamp(320px, calc(63vw - 164px), 813px);
  right: calc(50% + clamp(320px, calc(51.789vw - 78.57px), 725px));
}

.cake-svg-box2 {
  top: clamp(252px, calc(61.86vw - 224.8px), 735px);
  right: calc(50% + clamp(240px, calc(47.19vw - 124.5px), 608px));
}

.cake-svg-box3 {
  top: clamp(328px, calc(70.05vw - 206.9px), 876px);
  right: calc(50% + clamp(100px, calc(47.7vw - 265.34px), 472px));
}

.cake-svg-box4 {
  top: clamp(220px, calc(65.18vw - 279.3px), 731px);
  right: calc(50% + clamp(60px, calc(48.08vw - 309.27px), 436px));
}

#cake .card-pic {
  margin-bottom: 79px;
}

#cake .card-text {
  text-align: center;
}

a {
  color: unset;
  text-decoration: none;
}

.navigation-item {
  position: relative;
  padding-inline: 8px;
  border-left: 1px solid;
}

.navigation-item:last-of-type {
    border-right: 1px solid;
}

.para-link {
  text-decoration: underline;
}

.card-link {
  display: flex;
  padding: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  color: var(--mainv3-color);

  /* 日本語h2B */
  font-family: "Noto Sans JP";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 43.2px */
  letter-spacing: 4.8px;
  background: var(--secondary-color);
  border-radius: 81px;
}

#event .card-link {
  color: var(--mainv2-color);
}

#plan .card-link {
  width: 100%;
  max-width: 522px;
  background: var(--mainv3-color);
  color: var(--secondary-color);
  margin-top: 58px;
}

#cake .card-link {
  width: 522px;
}

.card-text {
  /* p */
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 3.6px;
  margin-bottom: 58px;
}

#plan .card-text {
    width: fit-content;
    margin: 0;
}

.card-title-number {
  font-family: Futura;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  letter-spacing: 4.4px;
}

.card-title {
  font-family: Aharoni;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 43.2px */
  letter-spacing: 4.8px;
  border-bottom: 4px dotted;
  padding-bottom: 4px;
  margin-bottom: 15px;
  width: fit-content;
}

#cake .card-img {
  width: 679px;
}

.card {
  display: grid;
  column-gap: clamp(32px, calc(7.42vw - 25px), 90px);
  grid-template-columns: clamp(300px, calc(30.4vw + 66.8px), 538px) auto;
}

#event .card {
  grid-template-columns: clamp(300px, calc(66vw - 207px), 816px) auto;
  column-gap: clamp(32px, calc(2.94vw + 9.43px), 55px);
}

#plan .card {
  grid-template-columns: clamp(300px, calc(65.74vw - 204.89px), 584px) auto;
  column-gap: clamp(32px, calc(2.05vw + 16.3px), 48px);
}

#cake .card {
  grid-template-columns: auto;
  justify-items: center;
  text-align: center;
  gap: 0;
}

.card-img {
  width: 100%;
}

.list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

#cake .list {
  margin-bottom: 213px;
}

.cake-ctn {
  max-width: var(--main-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--secondary-color);
}

.title {
  /* h2 */
  font-family: Aharoni;
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 12.92px;
  text-align: center;
}

#event .title {
  margin-bottom: 58px;
}

#plan .title {
  margin-bottom: 64px;
}

#restaurant .title {
  margin-bottom: 75px;
}

#cake .title {
  margin-bottom: 116px;
}

.sub-title {
  text-align: center;

  /* 日本語h2T */
  font-family: "Noto Sans JP";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 180%;
  /* 43.2px */
  letter-spacing: 4.8px;
  display: block;
}

.lead-intro-text {
  /* p */
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 180%;
  /* 32.4px */
  letter-spacing: 3.6px;
}

.lead-text {
  color: var(--mainv3-color);
  position: relative;
  z-index: 4;
  text-shadow: 2px 2px 4px var(--secondary-color);
  top: -60px;
}

.lead-main-text {
  font-family: Aharoni;
  font-size: 41px;
  font-style: normal;
  font-weight: 700;
  line-height: 57px;
  /* 139.024% */
  letter-spacing: 13.94px;
  margin-bottom: 22px;
  display: inline-block;
}

.lead-ctn {
  width: 100%;
  height: 1168px;
  max-width: var(--secondary-width);
  display: flex;
  align-items: center;
}

.ball-garlands-pic {
  position: absolute;
}

.ball-garlands-pic:before {
  content: "";
  display: block;
  position: absolute;
  width: 33.5px;
  height: 59px;
  background: url(../icons/tie.svg);
  left: 50%;
  translate: -50% -100%;
}

.ball-garlands-pic:after {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 1000px;
  background: var(--tertiary-color);
  top: -59px;
  left: 50%;
  translate: -50% -100%;
}

.ball-garlands-pic:nth-of-type(1) {
  /* top: 164px; */
  left: 75px;
  z-index: 3;
  top: clamp(
    120px,
    calc(120px + (164 - 120) * ((100vw - 768px) / (1550 - 768))),
    164px
  );
  left: clamp(
    12px,
    calc(12px + (75 - 12) * ((100vw - 768px) / (1550 - 768))),
    75px
  );
}

.ball-garlands-pic:nth-of-type(2) {
  top: 468px;
  left: 365px;
  z-index: 2;
  top: clamp(
    260px,
    calc(260px + (468 - 260) * ((100vw - 768px) / (1550 - 768))),
    468px
  );
  left: clamp(
    365px,
    calc(520px + (365 - 520) * ((100vw - 768px) / (1550 - 768))),
    520px
  );
}

.ball-garlands-pic:nth-of-type(3) {
  top: 645px;
  left: 32px;
  z-index: 1;
  top: clamp(
    580px,
    calc(580px + (645 - 580) * ((100vw - 768px) / (1550 - 768))),
    645px
  );
  left: clamp(
    -100px,
    calc(-100px + (32 - (-100)) * ((100vw - 768px) / (1550 - 768))),
    32px
  );
}

.ball-garlands-img {
  width: 320px;
  border-radius: 50%;
}

.ball-garlands-pic:first-of-type > img {
  width: 360px;
}

.ball-garlands {
  position: relative;
  align-self: start;
  flex-basis: 738px;
}

#page {
  background: var(--secondary-color);
  overflow: hidden;
}

#lead {
  clip-path: polygon(
    0 0,
    100% calc(86px + (149 - 86) * ((100vw - 375px) / (1550 - 375))),
    100% calc(100% - (86px + (360 - 86) * ((100vw - 375px) / (1550 - 375)))),
    0 100%
  );
  margin: calc(-1 * var(--lead-height) * var(--lead-top-slope)) 0
    calc(-1 * var(--lead-height) * var(--lead-bottom-slope));
  background: var(--secondary-color);
  position: relative;
  z-index: 3;
  margin: calc((86px + (149 - 86) * ((100vw - 375px) / (1550 - 375))) * -1) 0
    calc((86px + (360 - 86) * ((100vw - 375px) / (1550 - 375))) * -1);
}

.text-o {
  letter-spacing: clamp(
    -9.319px,
    calc(-9.319px + ((-1px - (-9.319px)) * ((100vw - 768px) / (1550 - 768)))),
    -1px
  );
}

.header-sub-title {
  -webkit-text-stroke-width: 0.49px;
  -webkit-text-stroke-color: var(--secondary-color);
  font-family: Futura;
  font-size: min(31.362px, 2vw);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 2.509px;
  display: block;
  margin-bottom: min(49px, 4%);
}

.header-title {
  color: var(--secondary-color);
  font-family: Aharoni;
  font-size: min(155.313px, 10vw);
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 4.659px;
}

.col {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: 60px;
  color: var(--secondary-color);
}

#footer {
  background: var(--mainv4-color);
}

#event {
  background: var(--mainv2-color);
  color: var(--secondary-color);
}

#plan {
  background: url(../images/plan-bg.png) center / cover no-repeat;
  color: var(--mainv3-color);
}

#restaurant {
  color: var(--secondary-color);
  background: var(--main-color);
  padding-top: calc(var(--cake-bottom-slope) + 116px);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - clamp(35px, calc(-69.85px + 27.96vw), 145px))
  );
  margin-bottom: calc(-1 * clamp(35px, calc(-69.85px + 27.96vw), 145px));
  position: relative;
  z-index: 1;
}

#cake {
  background: var(--mainv1-color);
  padding-top: calc(var(--lead-bottom-slope) * var(--lead-height) + 58px);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    0 calc(100% - clamp(45px, calc(-22.76px + 18.07vw), 116px))
  );
  margin-bottom: calc(-1 * var(--cake-bottom-slope));
  position: relative;
  z-index: 2;
}

#header {
  height: 924px;
  background: linear-gradient(90deg, var(--main-color) 48%, transparent 100%),
    url(../images/kv01.png) center / cover no-repeat;
  padding-inline: clamp(
    80px,
    calc(80px + (185 - 80) * ((100vw - 768px) / (1550 - 768))),
    185px
  );
  padding-bottom: calc(86px + (149 - 86) * ((100vw - 375px) / (1550 - 375)));
  justify-content: center;
}

.header-ctn {
  width: 100%;
  max-width: var(--secondary-width);
  position: relative;
}

/* MARK: DECOR
*/

/* Container chứa các svg bay */
.decor-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  pointer-events: none;
  /* để không chặn thao tác chuột */
  z-index: -1;
  overflow: hidden;
}

.svg-dot {
  position: absolute;
  opacity: 0;
  transform: scale(0);
  animation: float 3s ease-in-out forwards;
}

/* Hiệu ứng: to dần, rồi biến mất */
@keyframes float {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  30% {
    opacity: 1;
    transform: scale(1);
  }

  70% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

a:hover {
  opacity: 0.7;
  transition: opacity 0.3s;
}

.fade {
  opacity: 0;
  transform: translateY(20px);
}

.fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

@media (min-width: 1401px) {
  .lead-intro-text {
    text-wrap: nowrap;
  }
}

/* MARK: MOBILE
 */

@media (max-width: 767px) {
  * {
    box-sizing: border-box;
  }

.lead-text {
  top: 0;
}

.navigation-item:last-of-type {
    border: none;
}

.navigation-item {
    border: none;
}

  .pc {
    display: none;
  }
  .sp {
    display: block;
  }

  .copyright-ctn {
    font-size: 12px;
  }

  .navigation-item:not(:last-of-type):after {
    content: "";
    width: 16px;
    height: 1px;
    display: block;
    position: absolute;
    background: var(--secondary-color);
    left: 50%;
    translate: -50%;
    bottom: -8px;
  }

  .navigation {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 17px;
  }

  .social-img {
    width: 50px;
  }

  .logo {
    margin-bottom: 64px;
    width: 200px;
  }

  #event .title {
    margin-bottom: 34px;
  }

  .even-ctn {
    margin: 78px 0 90px;
  }

  #plan .title {
    margin-bottom: 48px;
  }

  .plan-ctn {
    margin: 80px 0 100px;
  }

  .restaurant-ctn {
    margin-bottom: calc(78px + clamp(35px, calc(-69.85px + 27.96vw), 145px));
  }

  .card-text {
    margin-bottom: 28px;
  }

  #restaurant .title {
    margin-bottom: 50px;
    font-size: 28px;
  }

  #restaurant .sub-title {
    font-size: 20px;
  }

  #cake .sub-title {
    font-size: 20px;
  }

  #cake .title {
    margin-bottom: 32px;
    font-size: 28px;
  }

  .cake-svg-box1 {
    top: 243px;
    right: calc(50% + 200px);
  }

  .cake-svg-box2 {
    top: 208px;
    right: calc(50% + 168px);
  }

  .cake-svg-box3 {
    top: 249px;
    right: calc(50% + 128px);
  }

  .cake-svg-box4 {
    top: 208px;
    right: calc(50% + 116px);
  }

  .cake-svg-box5 {
    top: 212px;
    left: calc(50% + 204px);
  }

  .cake-svg-box6 {
    top: 180px;
    left: calc(50% + 176px);
  }

  .cake-svg-box7 {
    top: 220px;
    left: calc(50% + 136px);
  }

  .cake-svg-box8 {
    top: 176px;
    left: calc(50% + 120px);
  }

  .cake-svg-box:before {
    width: 0.5px;
  }

  #cake {
    padding-top: 172px;
  }

  .svg4 {
    width: 34px;
    height: 39px;
  }

  .svg3 {
    width: 58px;
    height: 65px;
  }

  .svg2 {
    width: 32px;
    height: 37px;
  }

  .svg1 {
    width: 37px;
    height: 36px;
  }

  .card-img {
    width: 100%;
  }

  #cake .card-img {
    width: 258px;
  }

  .list {
    gap: 58px;
  }

  .card-link {
    width: 100%;
  }

  #cake .card-link {
    width: 100%;
  }

  .card-pic {
    width: 100%;
  }

  .card-pic {
    margin-bottom: 30px;
  }

  #event .card-pic {
    margin-bottom: 55px;
  }

  #plan .card-pic {
    margin-bottom: 48px;
  }

  #cake .card-pic {
    margin-bottom: 45px;
  }

  .card {
    width: 100%;
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
  }

  #event .card {
    grid-template-columns: 1fr;
  }

  #plan .card {
    grid-template-columns: 1fr;
  }

  .lead-intro-text {
    width: max-content;
    text-align: center;
  }

  .ball-garlands {
    flex-basis: 352px;
  }

  .lead-ctn {
    flex-direction: column;
    height: 980px;
  }

  .lead-main-text {
    width: max-content;
    font-size: 28px;
    letter-spacing: 10px;
  }

  .header-sub-title {
    font-size: 16px;
  }

  #header {
    height: 494px;
    padding-inline: 20px;
  }

  .ball-garlands-img {
    width: clamp(
      89px,
      calc(89px + (320 - 89) * ((100vw - 375px) / (768 - 375))),
      320px
    );
  }

  .ball-garlands-pic:first-of-type > img {
    width: clamp(
      100px,
      calc(100px + (360 - 100) * ((100vw - 375px) / (768 - 375))),
      360px
    );
  }

  .ball-garlands-pic:nth-of-type(1) {
    top: clamp(
      58px,
      calc(58px + (120 - 58) * ((100vw - 375px) / (768 - 375))),
      120px
    );
    left: clamp(
      12px,
      calc(93px + (12 - 93) * ((100vw - 375px) / (768 - 375))),
      93px
    );
  }

  .ball-garlands-pic:nth-of-type(2) {
    top: clamp(
      142px,
      calc(142px + (260 - 142) * ((100vw - 375px) / (768 - 375))),
      260px
    );
    left: clamp(
      173px,
      calc(173px + (520 - 173) * ((100vw - 375px) / (768 - 375))),
      520px
    );
  }

  .ball-garlands-pic:nth-of-type(3) {
    top: clamp(
      191px,
      calc(191px + (580 - 191) * ((100vw - 375px) / (768 - 375))),
      580px
    );
    left: clamp(
      -100px,
      calc(81px + (-100 - 81) * ((100vw - 375px) / (768 - 375))),
      81px
    );
  }

  .ball-garlands-pic:before {
    width: clamp(
      9px,
      calc(9px + (33 - 9) * ((100vw - 375px) / (768 - 375))),
      33px
    );
    height: clamp(
      16px,
      calc(16px + (59 - 16) * ((100vw - 375px) / (768 - 375))),
      59px
    );
  }

  .ball-garlands-pic:after {
    top: clamp(
      -59px,
      calc(-16px + (-59 - (-16)) * ((100vw - 375px) / (768 - 375))),
      -16px
    );
  }

  .col {
    padding-inline: 20px;
  }
}