kobitoDevelopment

.accordionTrigger {
  position: relative;
  width: 100%;
}

.accordionTrigger[aria-expanded="true"] + .accordionBody {
  grid-template-rows: 1fr;
}

.accordionTrigger[aria-expanded="false"] + .accordionBody {

kobitoDevelopment

#myCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100vh;
}

kobitoDevelopment

const triggerElement = document.querySelector(".trigger");
let scrollY;

const openMenu = () => {
  triggerElement.setAttribute("aria-expanded", "true");
  scrollY = window.scrollY;
  document.body.style.position = "fixed";
  document.body.style.top = `-${scrollY}px`;
  document.body.style.width = `100%`;
};

kobitoDevelopment

.container {
  position: relative;
  width: 100%;
  height: 200vh;
  max-width: 1920px;
  margin-inline: auto;
  background-color: green;
  overflow-x: clip;
}

kobitoDevelopment

<!-- 画像URLは直接的に表示せず、うまいこと迂回する(完全に隠蔽するのは無理なため)-->
<canvas id="myCanvas"></canvas>

kobitoDevelopment

site:ドメイン名　で検索
例：site:kobito.zombie.jp

kobitoDevelopment

.corner{
  width:32px;
  height:32px;
  background-color:green;
  margin-bottom:4px;
}

.corner-1{
  clip-path: path("M0 0.509766V32.5098H32C14.33 32.5098 0 18.1798 0 0.509766Z");
}

kobitoDevelopment

.box{
  width:400px;
  height:400px;
  background-color:green;
  clip-path: inset(0 0 round 40px 40px 40px 40px);
}

kobitoDevelopment

<svg
  class="ho-top-fv-animation-svg"
  viewBox="0 0 120 158"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
>
  <!-- Path1 -->
  <path
    d="M12.9302 25.877C20.0713 25.877 25.8604 20.0842 25.8604 12.9385C25.8604 5.79276 20.0713 0 12.9302 0C5.78904 0 0 5.79276 0 12.9385C0 20.0842 5.78904 25.877 12.9302 25.877Z"
    fill="#FFCAE3"

kobitoDevelopment

.path {
  fill: #ff5ab3;
}