/* 全体のリセット */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden; /* 横スクロールを無効化 */
    background-color: #FFD5EC;
    font-family: 'Noto Serif JP', serif;
}

/* 花びらのエフェクトを画面内に固定 */
#sakura_block {
    position: fixed; /* 画面内で固定 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* ユーザー操作を無効に */
    z-index: 10; /* 他の要素よりも上に表示 */
}

/* スクロール可能なコンテンツ */
.content {
    position: relative;
    z-index: 0; /* 花びらのエフェクトの下に配置 */
    background-color: #ffffff; /* 背景色 */
}

/* セクションスタイル */
.section {
    padding: 100px 20px;
    border-bottom: 1px solid #ddd;
    height: 100vh; /* 各セクションが画面全体の高さを占める */
}

.section h1 {
    font-size: 2em;
    margin-bottom: 20px;
}

.section p {
    font-size: 1.2em;
    line-height: 1.6;
}

/* 桜の花びらアニメーション */
@keyframes sakura {
    0% {
        transform: translate(0, 0) rotate(0deg); /* 初期位置 */
        opacity: 0.4; /* 最初は透明 */
    }
    20% {
        opacity: 1.2; /* 徐々に現れる */
    }
    100% {
        transform: translate(50vw, 100vh) rotate(360deg); /* 下に落ちながら右へ流れる */
        opacity: 0; /* 最後に消える */
    }
}

/* 桜の花びら要素 */
#sakura_block img {
    position: absolute;
    width: 20px; /* 初期サイズ（ランダム化される） */
    height: auto;
    animation: sakura linear infinite; /* アニメーションを無限ループで適用 */
    opacity: 0; /* 初期状態で非表示 */
}

.img_wrap{
  position:relative;
}
.img_wrap::after{
  content:"";
  display:block;
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  backdrop-filter:blur(8px);
  animation:blur 4s ease-in-out forwards;
}
@keyframes blur{
  0%{backdrop-filter:blur(8px);}
  100%{backdrop-filter:none;}
}

img.img{
white:100%;
}
img.example1 {
width: 50%;
}





.sns-x {
    width: 8%;
    display: inline-block;
}

.sns-x img {
    width: 100%;
    height: auto;
}