/*-------リセットcss-------:*/
body,
header,
menu,
div,
section {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 【重要】全体の背景色 
  ヘッダー、メニュー、コンテンツの「外側の余白」の色をここで統一します
/*ボディ*/
body {

    background-color: rgb(23, 175, 142)
}

/* ヘッダー全体を管理する箱 */
.header-container {
    position: relative;
    /* 子要素（文字）の基準点 */
    width: 100%;
    height: 300px;
    /* ここで高さを決定 */
    overflow: hidden;
    /* はみ出しをカットして余白を消す */
}

/* 画像の設定 */
.header-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 枠に合わせてきれいに表示 */
    display: block;
}

/* 文字の設定 */
.header-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    margin: 0;
    padding: 0;

    color: rgb(0, 0, 0);
    font-size: 48px;
    text-align: center;
    white-space: nowrap;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    line-height: normal;
}

/*メニュー*/

/* 親タグに背景色を当てる */
menu {
    background-color: rgb(91, 245, 232);
    width: 100%;
    /* これで背景は全画面に伸びます */
}

/* 中身のリンクを中央に寄せる */
.menu {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
}

.menu a {
    display: block;
    background-color: rgb(27, 197, 160);
    color: rgb(0, 0, 0);
    text-decoration: none;
    padding: 8px;
    flex: 1;
    text-align: center;
}

.menu a:hover {
    background-color: rgb(123, 238, 211);
    transition-duration: 0.3s;
}

/*コンテンツ*/
section.content-container {
    background-color: rgb(72, 143, 167);
    /* メニューの背景色と完全に合わせました */
}

.content {
    background-color: rgb(178, 240, 219);
    max-width: 1000px;
    margin: 0 auto;
    /*センタリング*/
    padding: 20px;
}

.line {
    padding-left: 15px;
    border-left: 5px solid rgb(83, 207, 166);
}

/* ページ全体をふわっと表示させる設定 */
body {
    animation: pageFadeIn 1.5s ease-out forwards;
}

/* アニメーションの具体的な動き（透明度と位置） */
@keyframes pageFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
        /* 最初は20px下にずらしておく */
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        /* 元の位置に戻る */
    }
}