html
{
    scroll-behavior: smooth;/*スクロールを滑らかに*/
}
.menu-btn
{
    position: absolute;/*絶対配置*/
    right: 30px;/*右端から30px*/
    font-size: 40px;/*文字サイズ*/
    cursor: pointer;/*カーソル変更*/
}
.menu
{
    position: absolute;/*ヘッダ基準で配置*/
    top: 80px;/*ヘッダの下*/
    right: 20px;/*右端から20px*/
    width: 200px;/*横幅*/
    max-height: 0;/*閉じた状態*/
    overflow: hidden;/*はみ出し非表示*/
    background-color: skyblue;/*背景色*/
    transition: max-height 0.3s ease;/*開閉アニメーション*/
}
.menu.open
{
    max-height: 500px;/*開いた状態の高さ*/
}
.menu a
{
    display: block;/*縦並び*/
    margin-bottom: 15px;/*下余白*/
    color: black;/*文字色*/
    text-decoration: none;/*下線削除*/
    font-size: 20px;/*文字サイズ*/
}
body 
{
    font-family: "Noto Sans JP", sans-serif; /*フォント*/
    /*background-color: #bbbbbb;/*背景色*/
    padding-top: 80px;/*固定ヘッダ分余白*/
}
header 
{
    position: fixed;/*画面上部に固定*/
    top: 0;/*上端から0px*/
    left: 0;/*左端から0px*/
    width: 100%;/*横幅いっぱい*/
    height: 80px;/*高さ*/
    background-color: skyblue;/*背景色*/
    color: black;/*文字色*/
    display: flex;/*flexレイアウト*/
    justify-content: center;/*横中央*/
    align-items: center;/*縦中央*/
    z-index: 1000;/*z座標 最前面*/
}
h1 
{
    font-size: 50px;/*文字サイズ*/
}
main 
{
    /*width: 70%;/*横幅割合
    max-width: 700px;/*横幅最大値*/
    margin-left: 50px;/*左側外側余白*/
    margin-right: 50px;/*右側外側余白*/
}
rt
{
    font-size: 10px;
}
section 
{
    background-color: white;/*背景色*/
    margin-bottom: 10px;/*外側余白*/
    padding: 20px;/*内側余白*/
    scroll-margin-top: 80px;
    /*border-radius: 5px;/*角を丸く*/
    /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);/*影*/
}
p
{
    padding-left: 20px;/*左側内側空白*/
    font-size: 20px;/*文字サイズ*/
}
h2 
{
    border-left: 5px solid greenyellow;/*見出し棒と色*/
    padding-left: 20px;/*左側内側空白*/
    color: black;/*文字色*/
    font-size: 40px;/*文字サイズ*/
}
.timeline
{
    position: relative;/*縦線配置用*/
    margin-left: 10px;/*外側左余白*/
    padding-left: 30px;/*内側左余白*/
}
.timeline::before
{
    content: "";/*疑似要素生成*/
    position: absolute;/*絶対配置*/
    left: 0;/*左端*/
    top: 0;/*上端*/
    width: 5px;/*線の太さ*/
    height: 100%;/*全高さ*/
    background-color: blue;/*背景色*/
}
.timeline-item 
{
    position: relative;/*丸配置用*/
    margin-bottom: 30px;/*外側下余白*/
}
.timeline-item::before 
{
    content: "";/*疑似要素生成*/
    position: absolute;/*絶対配置*/
    left: -36px;/*左位置*/
    top: 0;/*上端*/
    width: 17px;/*横幅*/
    height: 17px;/*縦幅*/
    border-radius: 50%;/*円化*/
    background-color: blue;/*背景色*/
}
a
{
    font-size: 20px;/*文字サイズ*/
}