/* スピナー */
.loader {
    width: 60px;
    aspect-ratio: 1;
    border: 5px solid #ccc; /* 薄いグレー */
    border-top: 5px solid #3498db; /* 上部分だけ別の色にする */
    border-radius: 50%; /* 円形にする */
    animation: spin 1s linear infinite; /* くるくる回転 */
    margin: 0px 0px 0px 1em;
}

/* 回転アニメーション定義 */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loadcontainer:not(.tips) {
    scrollbar-width: none;
}

#centralImage {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}

@keyframes myLeftIn {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes myRightIn {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes myTopIn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes myBottomIn {
    0% {
        opacity: 0;
        transform: translateY(50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ページ全体の余白をリセット */
html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* コンテナで左右のエリアを横並びに */
.loadcontainer {
    display: flex;
    height: 100dvh;
}

/* ロゴ画像のスタイル */
.leftarea img {
    max-width: 80%;
    height: auto;
}


/* 左側40%のエリア*/
.leftarea {
    width: 40%;
    background-color: #607d8b;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: myLeftIn 0.8s ease-in-out 0s 1 normal forwards;
}

/* 右側60%のエリア */
.rightarea {
    width: 60%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: myRightIn 0.8s ease-in-out 0s 1 normal forwards;

	background-image: url("images/texture.jpg"); /* テクスチャ画像のパスを指定 */
  	background-size: 200px 200px; /* 背景画像のサイズを指定 */
  	background-repeat: repeat; /* 縦横にタイル状に繰り返す */
}

/* 中央に配置する画像 */
.rightarea img {
    max-width: 100%;
    height: auto;
}

/* 下部に表示するtips（トランジション除外） */
.tips {
	font-family: 'Arial', sans-serif !important; /* フォントを指定 */
    line-height: 1.5em !important;
    position: absolute;
	bottom: 20px;
	display: block;
    text-align: center;
	padding: 1em;
    color: #333;
	font-size: large;
}

@media (max-width: 768px) {
	.loadcontainer {
		flex-direction: column;
		width:100vw
	}

	.leftarea {
		width: 100%;
		height: 40%;
		flex-direction: column;
	    animation: myTopIn 0.8s ease-in-out 0s 1 normal forwards;
	}

	.rightarea {
		width: 100%;
		height: 60%;
	    animation: myBottomIn 0.8s ease-in-out 0s 1 normal forwards;
	}

	/* ロゴ画像のスタイル */
	.leftarea img {
		margin-top: 150px;
		max-width: 80%;
		height: auto;
	}

	/* 中央に配置する画像 */
	.rightarea img {
		max-width: 100%;
	    position: absolute;
		top: clac( 20px + 5em);
	}

	/* 下部に表示するtips（トランジション除外） */
	.tips {
		font-family: 'Arial', sans-serif !important; /* フォントを指定 */
		font-size: smaller;
		line-height: 1.5em !important;
		position: absolute;
		top: 1em;
		display: block;
		text-align: center;
		padding: 1em;
		color: #333;
	}
}