/* 1. 全体の枠：ここをレスポンシブの起点にする */
.rotary-wrapper {
    position: relative;
    width: 90%;            /* スマホ：画面幅の90%を使用 */
    max-width: 600px;      /* PC：最大サイズ（お好みで調整） */
    aspect-ratio: 1 / 1;   /* ★重要：常に正方形を維持。height指定は不要 */
    margin: 50px auto;
    /* もし既存の height: 73rem; などが残っていたら必ず削除してください */
    flex: 0 0 auto;
    align-self: flex-start;
}

/* 2. サークル（背景の線）：親のサイズに連動 */
.rotary-wrapper::before {
    content: "";
    display: block;
    width: 90.5%;
    height: 90.5%;
    border: 3px solid #6F82A8;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.center-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68.5%;
    height: 68.5%;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    background-color: #fff;
}

/* 4. 中央画像の表示設定 */
.center-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.center-img.active {
    opacity: 1;
}

/* 回転するトラック */
.circle-track {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 0.5s ease-in-out;
}

/* ボタンの土台 */
.circle-btn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: center center; 
    pointer-events: none;
}

.circle-btn:nth-child(1) {
    transform: rotate(0deg);
}
.circle-btn:nth-child(1) .btn-content {
    background: #6F82A8;
}
.circle-btn:nth-child(2) {
    transform: rotate(120deg);
}
.circle-btn:nth-child(2) .btn-content {
    background: #566A93;
}
.circle-btn:nth-child(3) {
    transform: rotate(240deg);
}
.circle-btn:nth-child(3) .btn-content {
    background: #3E557E;
}

/* 実際のボタン（テキスト部分 */
.btn-content {
    position: absolute;
    top: 0; 
    left: 50%;
    transform: translateX(-50%);
    min-width: 120px;
    width: 35%;
    font-size: clamp(1.4rem, 4vw, 2.4rem);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    padding: 0.5rem 1rem;
    transition: background-color 0.3s;
    white-space: nowrap;
	pointer-events: auto;
	cursor: pointer;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <=1024px) {

    .rotary-wrapper {
        margin: auto;
    }
    
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */