@charset "utf-8";

/* ページ全体をフェードインさせるアニメーション */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

body {
    animation: fadeIn 0.65s ease-in; /* 0.8秒かけてふわっと表示 */
}


:root {
	/* ページ全体の背景色 */
	--body-bg: linear-gradient(to top, #cfd9df 20%, #e2ebf0 100%);

	/* メインの文字色 */
	--main-text-color: #252833;

	/* アクセントカラー */
	--accent: #657fa2;

	/* レイアウトボックスの背景色 */
	--sub-bg-color: rgba(243,247,251,0.7);

	/* 赤文字の色 */
	--red: #e55a17;

	/* レイアウトボックスの角丸 */
	--radius: 0.3rem;

	/* レイアウトボックスのドロップシャドウ */
	--shadow: none;

	/* メインのフォントファミリー */
	--main-font-family: 'メイリオ', 'ヒラギノ角ゴ', sans-serif;
}
body::before{
	background: var(--body-bg);
	background-size: cover;
	content: "";
	inset: 0;
	position: fixed;
	z-index: -1;
}

/* てがろぐ全体の基準サイズを design81 に合わせる */
html {
    font-size: 81.25%; /* PC表示：13px相当（16pxの81.25%） */
}

/* スマホ表示向けのサイズ変更（design81と同じ800pxで切り替え） */
@media (max-width: 800px) {
    html {
        font-size: 68.75%; /* スマホ表示：11px相当（16pxの68.75%） */
    }
}

/* スムーススクロール（ふわっと上に戻る動き） */
html {
    scroll-behavior: smooth;
}

/* ページ上部へ戻るボタンの見た目 */
.page-top-btn {
    position: fixed;
    bottom: 20px;  /* 下からの位置 */
    right: 20px;   /* 右からの位置 */
    width: 40px;
    height: 40px;
    background-color: #657fa2;
    color: #fff;
    border-radius: 50%; /* まん丸にする */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    font-size: 1.5rem; /* アイコンの大きさ */
    box-shadow: none;
    transition: background-color 0.3s ease-in-out;
    z-index: 9999; /* 一番手前に表示 */
}

/* マウスを乗せた時の色 */
.page-top-btn:hover {
    background-color: var(--main-text-color);
    color: #fff;
}

/* スマホ表示向けの調整（ボタンを少し小さくする） */
@media (max-width: 800px) {
    .page-top-btn {
        bottom: 15px;
        right: 15px;
        width: 35px;
        height: 35px;
        font-size: 1.2rem;
    }
}