body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
}

h1 {
    margin-bottom: 20px;
}

a {
    text-decoration: none; /* ????? */
    color: #007bff; /* ???? */
}

a:hover {
    text-decoration: underline; /* ?????????? */
}

.canvas-container {
    position: relative;
    width: 100%;
    max-width: 600px; /* ?????? */
    padding-top: 56.25%; /* 16:9?????????? */
    margin-bottom: 20px;
}

canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* iframe????? */
.iframe-container {
    position: relative;
    width: 100%;
    max-width: 1000px; /* ??100%??? */
    padding: 10px; /* 16:9?????????? */
    box-sizing: border-box;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ???????????? */
@media (max-width: 600px) {
    iframe-container {
        max-width: 100%; /* 4:3?????????? */
	padding-top: 75%;
    }
	iframe{
		height:auto;
		}

}