html,
body {
  overflow-x: hidden;
  max-width: 100vw;
  position: relative;
}

.noto-sans-jp {
  font-family: 'Noto Sans JP', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.fot-cezanne {
  font-family: 'Cezanne', sans-serif;
}

/* Diagonal section transitions */

/* Chat bubble arrows */
.chat-bubble {
  position: relative;
}
.chat-bubble::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}
.chat-bubble-right::after {
  left: 40px; /* adjust to move toward center */
  bottom: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #000; /* arrow color */
  transform: skewX(-45deg);
}
.chat-bubble-left::after {
  right: 40px;
  bottom: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 20px solid #000;
  transform: skewX(45deg);
}
.clip-bottom-diagonal {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%);
}

.clip-top-diagonal {
  clip-path: polygon(0 8vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -8vw; /* Overlap to align with previous section */
}

.clip-pentagon {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8vw),
    50% 100%,
    0 calc(100% - 8vw)
  );
}

.tail-down::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #eeee13;
}

/* Diagonal bottom edges */
.clip-diagonal-bottom {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 8vw),
    50% 100%,
    0 calc(100% - 8vw)
  );
}

/* Polaroid photo frame */
.polaroid-frame {
  background: white;
  padding: 15px 15px 15px 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: rotate(-3deg);
  position: relative;
  display: inline-block;
}

.polaroid-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* Triangle overlay at top of white section */
.clip-triangle-overlay {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* Hexagon shape */
.hexagon {
  --size: 80px; /* Controls hexagon size (side length) */

  width: calc(var(--size) * 2);
  height: calc(
    var(--size) * 1.732
  ); /* 1.732 = sqrt(3) for perfect proportions */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hexagon with image */
.hexagon-with-image {
  --size: 160px; /* Controls hexagon size (side length) */

  width: calc(var(--size) * 2);
  height: calc(
    var(--size) * 1.732
  ); /* 1.732 = sqrt(3) for perfect proportions */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #000;
  padding: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.hexagon-with-image::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  background-color: rgba(0, 0, 0, 0.3);
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  pointer-events: none;
  z-index: 1;
}

.hexagon-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

/* Pentagon with triangle pointing down at bottom */
.clip-triangle-down {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% + 8vw), 0 100%);
}

/* Triangle cutout at top */
.clip-triangle-up {
  clip-path: polygon(50% 8vw, 100% 0, 100% 100%, 0 100%, 0 0);
  margin-top: -8vw;
}

/* Custom dotted border for company section */
.border-dotted-custom {
  border-bottom: 2px dotted #9ca3af;
  background-image: linear-gradient(to right, #9ca3af 40%, transparent 40%);
  background-position: bottom;
  background-size: 8px 2px;
  background-repeat: repeat-x;
  border-bottom: none;
}

@media (max-width: 768px) {
  .hexagon {
    --size: 60px;
  }

  .hexagon-with-image {
    --size: 110px;
  }
}