@charset "utf-8";

body {
    font-family: "教科書体", YuMincho, "serif";
}

/* ここから header 部分 */
/* ヘッダー全体のデザイン */
header {
    background: linear-gradient(90deg, #c7f1fb, #d7f7ff, #94d2f3);
    /* 柔らかい青と白を基調にしたグラデーション */
    padding: 15px 25px;
    /* 上下15px、左右25pxの余白 */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
    animation: gradientShift 8s infinite;
    /* グラデーションの動き */
    background-size: 300% 300%;
    /* アニメーションを滑らかにするため背景サイズを拡大 */
}

iframe {
    width: 100%;
}

/* グラデーションの動き */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
        /* グラデーションの開始位置 */
    }

    50% {
        background-position: 100% 50%;
        /* グラデーションが右に移動 */
    }

    100% {
        background-position: 0% 50%;
        /* グラデーションが左に戻る */
    }
}

/*メニューの横並び表示*/
.menu {
    display: flex;
    justify-content: space-between;
}

.menu img {
    border-radius: 8px;
}

/* ナビゲーションメニュー */
nav {
    display: flex;
    /* 横並びにする */
    align-items: center;
    /* 縦方向の位置を中央揃え */
    justify-content: flex-start;
    /* 左寄せ */
}

/* メニューアイテムのデザイン */
nav ul {
    list-style: none;
    /* リストのスタイルを削除 */
    margin: 0;
    padding: 0;
    display: flex;
    /* リスト項目を横並びに */
}

/* 各メニュー項目 */
nav ul li {
    margin-right: auto;
    /* メニュー項目間のスペース */
    margin-left: auto;
}

#index,
#report,
#about,
#contact {
    color: rgb(170, 0, 255);
    /* テキストの色 */
    text-decoration: none;
    /* 下線を消す */
    font-size: 16px;
    /* 文字サイズ */
    /* font-weight: bold;  太字 */
    padding: 1px 3px;
    /* 内側の余白（枠内の文字の余裕） */
    border: 2px solid #0f0f0f;
    /* 枠の太さ、スタイル、色 */
    border-radius: 5px;
    /* 角を丸くする */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* なめらかな色変化 */
}

/* ホバー時の効果 */
#index:hover,
#report:hover,
#about:hover,
#contact:hover {
    color: #04ff00;
    /* ホバー時の色 */
}

/* 検索アイコンのデザイン */
.search-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* ここまで header 部分 */

footer {
    background-color: #f0f0f0;
    align-items: center;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

footer iframe {
    width: 100%;
    /* 横幅をページ全体に広げる */
    height: auto;
    /* 高さは自動調整 */
    border: none;
    /* 枠線を非表示 */
    overflow: hidden;
    /* スクロールバーを非表示 */
}