.top_box {
	transition: all 500ms 0s ease;
   	position:relative;
    top: -52px;
    width: 100%;
    height: 200px;
    z-index: 0;
    background-image: url(../BACK.png);
	background-size: cover;
}

.top_img {
	transition: all 500ms 0s ease;
	position: absolute;
	transform: translateY(-50%);
	object-fit: cover;
	top: 50%;
    width: 30%;
	left: 3%;
    max-height: 300px;
	max-width: 600px;
}

.top_text {
	transition: all 500ms 0s ease;
	position: absolute;
    top: 50%;            /* ← 親の縦中央ライン */
    right: 10%;           /* ← 右端からのオフセット（自由に調整） */
    transform: translateY(-50%);  /* ← 完全に縦中央に補正 */

    z-index: 7;
    font-size: 5vw;
	font-weight: 300;
    color: white;
    text-align: right;   /* ← テキスト内も右寄せにしたいなら */
	text-shadow: 5px 5px 8px #808080;
}

.Description {
    margin-top: -52px;
    background-image: linear-gradient(90deg, rgba(65, 164, 253, 1), rgba(14, 244, 255, 1));
	overflow-wrap: break-word;
	width: 100%;
	height: auto;
    padding: 30px;
    box-sizing: border-box;
	color: white;
	font-size: 5vw;
}

.container {
    transition: all 500ms 0s ease;
    display: flex;
    flex-direction: column;  /* 縦並び */
    justify-content: center;
    align-items: center;
    gap: 80px;               /* ボックス間の空白 */
    padding: 80px;           /* 上下左右の余白 */
    box-sizing: border-box;
}

.quad {
    transition: all 500ms 0s ease;
    width: 80vw;             /* スマホでは横幅広め */
    aspect-ratio: 1 / 1;     /* 正方形維持 */
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
}

.quad:hover {
	transform: scale(1.05);
}

.left { background-color: rgb(82, 82, 82); }
.center { background-color: rgb(82, 82, 82); }
.right { background-color: rgb(82, 82, 82); }

.quadImage {
	height: 95%;
	width: 95%;
	object-fit: cover;
	border-radius: 2%;
}