/* ふわっとさせる */
/* 共通の枠（Box）デザイン */
.split-box {
	min-width: 680px;
	min-height: 680px;
	border: 1px solid #ddd;
	background: rgba(255, 255, 255, 0.8);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
}
/* コンテンツを包む白い箱 */
.glass-container {
	background: rgba(255, 255, 255, 0.6);
	max-width: 1300px; /* content-innerより小さいのでOK */
	width: 100%;	   /* 親要素に合わせて広がるように修正 */
	min-height: auto;
	text-align: center;
	margin: 0 auto; /* これが中央揃えの肝です */
	box-shadow: 0 15px 35px rgba(0,0,0,0.05);
	border: 1px solid rgba(0,0,0,0.05);
	box-sizing: border-box;
}
/* --- アニメーション設定 --- */
.fade-up {
	opacity: 0;
	transform: translateY(200px);
	transition: all 1.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.fade-left {
	opacity: 0;
	transform: translateX(200px);
	transition: all 1.5s cubic-bezier(0.33, 1, 0.68, 1);
}
.fade-section {
	opacity: 0;
	transform: translateY(200px); 
	transition: opacity 1.2s cubic-bezier(0.33, 1, 0.68, 1), 
				transform 1.2s cubic-bezier(0.33, 1, 0.68, 1);
	will-change: opacity, transform;
}
.is-visible {
	opacity: 1 !important;
	transform: translate(0, 0) !important;
}
.img-top-prof {
	width: 600px; 
	height: 600px; 
	object-fit: cover;
}
/* 水玉アニメーション */
.container_mizutama {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background-color: #fffafb; /* ほんのりピンクがかった白 */
}
.bg-anime-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
.anime-canvas-content {
    position: relative;
    z-index: 1;
    padding: 40px;
    text-align: center;
    font-family: sans-serif;
    color: #555;
}