body {
    display: block;
    margin: 0px;

    background-image: url(bg.jpg);
    background-attachment: fixed;
    background-position: calc(100% - 100px) center; /* 背景画像を右寄せに配置し、右側に20pxの余白を持たせる */
    background-repeat: repeat-y; /* 縦方向にのみ画像を繰り返し */

}

header {
    width: 100%;
    height: 100vh; /* ビューポートの高さいっぱいにする */
    background-color: #f2f2f2; /* ヘッダーの背景色 */
    background-image: url("top.png"); /* 画像を背景に追加 */
    background-repeat: no-repeat; /* 画像を繰り返さないように設定 */
    background-position: center top; /* 画像を中央寄せに配置 */
    background-size: cover; /* 画像サイズをビューポートに収まるように調整 */
    background-attachment: fixed; /* 背景画像を固定 */
    margin: 0;
}


header img{
    display:block;
    margin-left: auto;
    margin-right: auto;
}

header .title {
    font-size: small;
    color: #b48b8b;
    text-align: center;
    text-shadow:
        0px 0px 0 #000,
        0px 0px 0 #000,
        0px 0px 0 #fff,
        -1px -1px 0 #fff; /* テキストにフチの影を追加 */
}

header nav {
    width:60%;
    margin-left: auto;
    margin-right: auto;
    margin-top:150px;
    padding:50px;
}

header ul {
    display: flex;
    justify-content: space-between; /* アイテム間のスペースを均等に分配 */
    padding: 0; /* デフォルトのリストスタイルを除去するために必要 */
    list-style: none; /* リストのマーカー（デフォルトの点）を削除 */
}

header ul li{
    font-size: xx-large;
    font-family: 'Courier New', Courier, monospace;
    background-color: #85db34; /* ボタンの背景色 */
    color: #fff; /* ボタンのテキスト色 */
    padding: 10px 20px; /* ボタンのパディング */
    border: none; /* ボーダーを削除 */
    border-radius: 5px; /* ボタンの角を丸くする */
    cursor: pointer; /* カーソルをポインターに変更する */
}

header ul li:hover {
    background-color: #2980b9; /* マウスホバー時の背景色 */
}

header ul li a{
    text-decoration: none;
    color:#bd420a
}

h2 {
    position: relative;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size:xx-large;
    margin:100px 100px 20px 50px;
  }

  h2:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 7px;
    z-index: -1;
    background: -webkit-repeating-linear-gradient(-45deg, #85db34, #85db34 2px, #fff 2px, #fff 4px);
    background: repeating-linear-gradient(-45deg, #85db34, #85db34 2px, #fff 2px, #fff 4px);
  }

  section{
    width:60%;
    margin:auto;
    margin-bottom:500px;
    font-size: 0.95rem;
    line-height: 1.8; /* 行間を1.5倍に設定 */
  }

  section a {
    color:#2980b9;
    text-decoration: underline;
    text-decoration-style: dotted; /* 下線のスタイルを点線にする */
}

section a:hover{
    text-decoration: none;
}

/* スタイルを追加する場合はここに記述 */
.top-link {
    border: 1px solid #b48b8b; /* ボーダーのスタイルを指定 */
    border-radius: 50%; /* ボーダーの角を丸くする半径を指定 */
    display: block;
    float:right;
    width:min-content;
    padding: 5px 10px; /* リンクの内側の余白を指定 */
    background-color: #ffffff; /* リンクの背景色を指定 */
    color: #b48b8b; /* リンクのテキスト色を指定 */
    text-decoration: none; /* 下線を削除 */
    margin-top: 20px; /* トップへ戻るリンクとセクションの間にマージンを追加 */
}

.top-link:hover {
    background-color: #b48b8b; /* リンクの背景色を指定 */
    color: #fff; /* リンクのテキスト色を指定 */
}
footer{
  font-size:small;
    background-color: #b48b8b;
    height:200px;

    word-wrap: break-word; /* 単語の途中で折り返しを許可 */
    padding:20px 100px;
}

footer .clogo{
    height:95%;
    float:right;
    margin-top:10px;
}

.clogo img{
  width:100%;
  height:90%;
}

footer a{
  color:#2980b9;
}



  @media screen and (max-width: 768px) {
    /* 768px以下の画面幅の場合のスタイル */
    body {
      background-size: 15%;
        background-position: calc(100% - 50px) center; /* 背景画像を右寄せに配置し、右側に20pxの余白を持たせる */
        background-repeat: repeat-y; /* 縦方向にのみ画像を繰り返し */

    }

    header {
        background-repeat: no-repeat; /* 画像を繰り返さないように設定 */
        background-repeat: no-repeat;
        background-position: 10% 50%; /* 背景画像を左揃えに配置 */
        background-attachment: fixed; /* 背景画像を固定 */
        margin: 0;
    }

    header img{
      width:100%;
    }
    header nav {
        width:90%;
        margin-left: auto;
        margin-right: auto;
        margin-top:0;
        padding:5px;
    }

    header ul {
        display: flex;
        justify-content: space-between; /* アイテム間のスペースを均等に分配 */
        padding: 0; /* デフォルトのリストスタイルを除去するために必要 */
        list-style: none; /* リストのマーカー（デフォルトの点）を削除 */
    }

    header ul li{
        font-size: large;
        font-family: 'Courier New', Courier, monospace;
        background-color: #85db34; /* ボタンの背景色 */
        color: #fff; /* ボタンのテキスト色 */
        padding: 15px 30px; /* ボタンのパディング */
        border: none; /* ボーダーを削除 */
        border-radius: 5px; /* ボタンの角を丸くする */
        cursor: pointer; /* カーソルをポインターに変更する */
    }

    section{
        width:90%;
        margin:auto;
        font-size: 0.95rem;
        line-height: 1.5; /* 行間を1.5倍に設定 */
      }

    footer{
        font-size:0.8rem;
        height:fit-content;
        text-align:center;
        margin-top:100px;
    }
    footer .clogo{
        float:none;
        width:200px;
        margin:auto;
    }
}