html{
    overflow-x: hidden;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    background-color: #303A4F;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
    color: orange;
}
@keyframes fade-in{
    from {
		opacity: 0;
		transform: translateX(-30px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
.string{
    animation: fade-in 1.5s ease-in;
    margin-top: 50px;
    font-size: 200%;
    margin-left: 25%;
    margin-right: 25%;
}
.link{
    text-decoration: underline;
    color: orange;
}
#p_link{
    margin-left: 0px;
    margin-right: 30%;
    border: 3px solid #1f2635;
    background-color: #2b3447;
}
@media screen and (max-width: 1280px) {
    .string {
        margin-top: 50px;
        font-size: 150%;
        margin-left: 18.75%;
        margin-right: 18.75%;
    }
}
@media screen and (max-width: 1120px) {
    .string {
        margin-top: 50px;
        font-size: 125%;
        margin-left: 14.0625%;
        margin-right: 14.0625%;
    }
}
@media screen and (max-width: 960px) {
    .string {
        margin-top: 50px;
        font-size: 100%;
        margin-left: 12.5%;
        margin-right: 12.5%;
    }
}
@media screen and (max-width: 800px) {
    .string {
        margin-top: 50px;
        font-size: 75%;
        margin-left: 7.8125%;
        margin-right: 7.8125%;
    }
}
@media screen and (max-width: 640px) {
    .string {
        margin-top: 50px;
        font-size: 50%;
        margin-left: 6.25%;
        margin-right: 6.25%;
    }
}
@media screen and (max-width: 480px) {
    .string {
        margin-top: 50px;
        font-size: 37.5%;
        margin-left: 4.6875%;
        margin-right: 4.6875%;
    }
}
@media screen and (max-width: 320px) {
    .string {
        margin-top: 50px;
        font-size: 25%;
        margin-left: 3.125%;
        margin-right: 3.125%;
    }
}