body {
margin: 0;
display: flex;
flex-wrap: wrap;
height: 100vh;
font-size: 12pt;
transition: background-color 0.3s, color 0.3s;
overflow: hidden;
font-family: 'Work Sans', sans-serif;
}

.left, .right {
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
transition: background-color 0.3s, color 0.3s;
position: relative;
}

.left {
background-color: #000;
color: #FFF;
flex: 3;
}

.right {
background-color: #FFF;
color: #000;
flex: 2;
}

.text {
padding: 80px;
text-align: left;
max-width: 600px;
overflow-wrap: break-word;
line-height: 160%;
}

.text p {
margin-top: 24px;
font-size: 12px;
}
/* リンク全体のスタイル */
.links {
margin: 24px 0;
}

.links p {
display: inline;
margin: 0 24px 0 0;
font-size: 24px;
}

/* アイコンのデフォルトスタイル */
.links i {
color: black; /* デフォルトで黒 */
transition: color 0.3s, transform 0.3s; /* スムーズな色とサイズの変更 */
}

/* hover時のスタイル */
.links a:hover i {
transform: scale(1.2); /* 1.2倍に拡大 */
}

/* rightがactiveの場合のリンクのカラー */
.right.active .links i {
color: #000be9; /* rightがactiveの時の色 */
}
.mode-toggle {
position: absolute;
top: 24px;
right: 24px;
background-color: #000;
color: #FFF;
border: none;
padding: 20px 20px;
cursor: pointer;
border-radius: 50%;
font-size: 14px;
transition: background-color 0.3s, color 0.3s;
z-index: 1000; /* ボタンを最前面に表示 */
}

.left.active {
background-color: #000be9;
color: #fde5d1;
}

.right.active {
background-color: #fde5d1;
color: #000be9;
}

/* SVGのデフォルト色 */
.left svg path {
fill: white; /* デフォルトは白 */
}

/* active クラスがついたときにSVGの色を赤に変更 */
.left.active svg path {
fill: #fde5d1; /* アクティブ時の色を赤に設定 */
}

canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}

.mouse-stalker {
position: fixed;
top: 0;
left: 0;
width: 80px;
height: 80px;
background-color: white;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
mix-blend-mode: difference;
z-index: 999; /* マウスストーカーを前面に表示 */
}
/* スマホビュー (画面幅768px以下) */
@media (max-width: 768px) {
body {
flex-direction: column; /* 縦並びに変更 */
font-size: 12pt;
overflow: auto; /* スクロールを有効化 */
height: auto; /* 高さを自動調整 */
}
.left {
width: 100%; /* 横幅を100%に設定 */
height: 60vh; /* 画面の半分の高さ */
flex: none;
}
.right {
width: 100%; /* 横幅を100%に設定 */
height: auto; /* 高さをコンテンツに合わせる */
padding: 24px 24px 48px 24px;
}
.text {
padding: 24px;
}
.mouse-stalker {
display: none; /* スマホではマウスストーカーを非表示 */
}
}