/* Reset CSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    /* ページ全体のスタイル */
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    
    /* ヘッダーのスタイル */
    header {
        background-image: url('images/4park.jpg'); /* 画像のパスを指定 */
        background-color: rgba(255, 255, 255, 0.6); /* 透明度を指定 */
        background-blend-mode: lighten; /* 画像と色のブレンドモードを設定 */
        background-size: cover;
        background-position: center;
        color: #e87420;
        text-align: center;
        padding: 50px;
        margin-bottom: 20px;
        width: 100%;
    }
    
    /* タイトルのスタイル */
    h1 {
        font-size: 36px;
        margin-bottom: 10px;
    }
    
    /* サブタイトルのスタイル */
    h2 {
        font-size: 24px;
        font-style: italic;
    }
    
    h3 {
        text-align: center;
        text-decoration: underline;
        text-decoration-color: rgb(253, 54, 54);
        text-decoration-style: dashed;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    
    h4 {
        color: #fff;
        border: 2px solid #e87420; /* 境界線を追加 */
        border-radius: 10px; /* 角を丸くする */
        padding: 5px 10px; /* パディングを追加 */
        background-color: #e87420; /* 背景色を設定 */
        font-size: 20px;
        font-style: italic;
        margin-top: 40px;
        margin-bottom: 20px;
    }
    
    h5 {
        color: #000000;
        padding: 5px 10px; /* パディングを追加 */
        font-size: 18px;
        font-style: italic;
        margin-top: 65px;
        margin-bottom: 20px;
        text-decoration: underline;
        text-decoration-color: #e87420;
    }
    
    p {
        margin-bottom: 10px; /* 段落の下に余白を追加 */
    }
    
    .container {
        display: flex; /* 要素をフレックスボックスとして配置 */
    }
    
    .main-content {
        flex: 7.8; /* 左側の本文の幅を指定 広告用7.2*/
        padding: 35px;
        margin: 0 auto;
    }
    
    .sidebar {
        flex: 2.2; /* 右側のサイドバーの幅を指定 広告用2.8*/
        padding: 30px;
        background-color: #f0f0f0; /* サイドバーの背景色を指定 */
        border-left: 2px solid #000; /* 左側の縦線を追加 */
    }
    
    .ad-container {
        text-align: center; /* 広告を中央揃え */
        margin: 20px auto;
    }
    
    .responsive-ad {
        width: 80%; /* 幅を親要素の100%に設定 */
        max-width: 728px; /* 最大幅を指定して、大きくなりすぎないようにする */
        height: auto; /* 高さを自動調整 */
    }
    
    .mokuzi {
        border: 2px solid #e87420;
        text-align: left;
        padding: 10px; /* パディングを追加 */
        border-radius: 10px; /* 角丸を追加 */
        width: 55%; /* 幅を指定 */
        overflow: auto;
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 25px;
        font-size: 20px;
    }
    
    .mokuzi > ul {
        list-style-type: none; /* リストのマーカーを削除 */
        margin-left: 5%; /* 左の余白をリセット */
        padding-left: 0;
        list-style-type: disc;
    }
    
    .mokuzi > li {
        margin-bottom: 5px; /* リストアイテムの間隔を追加 */
    }
    
    .mokuzi ul ul {
        margin-top: 5px; /* ネストされたリストの上部のマージンを追加 */
        margin-left: 8%;
        list-style-type: circle;
    }
    
    .mokuzi ul ul a{
        font-size: 16px;
    }
    
    .mokuzi a {
        font-size: 18px;
        text-decoration: none; /* リンクの下線を削除 */
        color: #333; /* リンクの色を変更 */
    }
    
    .mokuzi a:hover {
        color: #ff0000; /* リンクにマウスを移動した際の色を変更 */
    }
    
    .text-underline {
        text-decoration: underline wavy rgb(253, 54, 54);
        line-height: 1.25;
        font-weight: bold;
    }
    
    
    .pic1 img {
        max-width: 100%;
        width: 55%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 25px;
    }
    
    .pic2 img {
        max-width: 100%;
        width: 40%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    
    .pic3 img {
        max-width: 100%;
        width: 40%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 25px;
    }
    
    .flex-AK {
        display: flex;
        justify-content: center;
        align-items: center; /* 垂直方向の中央揃え */
    }
    
    .AKtext {
        flex: 5; /* 1:1 の割合で分割 */
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .pic4 {
        flex: 3;
    }
    
    .pic4 img {
        width: 85%; /* 画像が親要素に合わせてサイズ調整されるように */
        height: auto;
        margin-bottom: 20px;
    }
    
    .first-sec {
        margin-bottom: 20px; /* セクション間の余白を追加 */
    }
    
    .first-sec ul {
        font-size: 16px;
        list-style-type: disc; /* 箇条書きのマーカータイプを変更 */
        margin-left: 5%; /* 箇条書きの左の余白を追加 */
        margin-bottom: 15px; /* 箇条書きの下に余白を追加 */
    }
    
    .first-sec ul li {
        margin-bottom: 5px; /* 箇条書きの項目間に余白を追加 */
    }
    
    .illustrated-text {
        justify-content: center;
        align-items: center;
        display: flex;
        background-color: #ffffff;
        border-radius: 20px;
        border: 2px solid #a0ed70;
        padding: 20px;
        width: 75%;
        position: relative; /* 相対位置付け */
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 30px;
    }
    
    .illustrated-text::after {
        content: "";
        position: absolute;
        top: 13%;
        bottom: 0;
        left: 25%;
        transform: translateX(-75%);
        width: 2px;
        height: 76%; /* 親要素の高さの50% */
        background-color: #a0ed70;
    }
    
    .illustrated-text img {
        flex: 1; /* イラストが伸縮しないように */
        max-width: 20%; /* イラストの幅を50%までに制限（パディングを考慮して計算） */
        border-radius: 15px; /* イラストの丸角 */
        margin-right: 20px; /* イラストとテキストの間隔 */
        padding-right: 20px;
    }
    
    .text-container {
        flex: 1; /* テキストが残りのスペースを占有 */
        padding-left: 20px;
    }
    
    .text-container .title {
        font-weight: bold;
        /* タイトル部分のスタイル */
    }
    
    .text-container .description {
        /* 説明文部分のスタイル */
        list-style-type: disc;
        font-size: 14px;
    
    }
    .animate-on-scroll {
        opacity: 0;
        transition: opacity 0.5s ease;
    }
      
    .show {
        opacity: 1;
    }
    
    .relatives {
        border: 2px solid #e87420;
        text-align: left;
        padding: 10px; /* パディングを追加 */
        border-radius: 10px; /* 角丸を追加 */
        width: 90%; /* 幅を指定 */
        overflow: visible;
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 20px;
    }
    
    .relative-title {
        font-size: 16px;
        color: #000;
        font-weight: bold;
    }

    .related-articles {
        display: flex;
        flex-direction: row;
        align-items: center; /* 子要素を縦方向の中央に配置 */
        border-top: 1px solid #e87420; /* 上部に1pxの実線を灰色で表示 */
        padding-top: 10px; /* 線とコンテンツの間に余白を設定 */
    }

    .related-articles img{
        flex: 2;
        width: 30%; /* 画像が親要素に合わせてサイズ調整されるように */
        height: auto;
        padding: 5px;
    }

    .related-articles p{
        flex: 8;
        font-size: 12px;
        max-width: 70%;
        height: auto;
        color: #000;
        padding: 5px;
        border-left: 1px dashed #e87420;
    }

    .related-articles a{
        text-decoration: none;
        color: #333;
    }

    .related-articles a:hover {
        color: #e87420;
    }
    
    /* セクションのスタイル */
    section {
        padding: 20px;
    }
    
    /* フッターのスタイル */
    footer {
        background-color: #333;
        color: #fff;
        text-align: center;
        padding: 10px 0;
        position: fixed;
        bottom: 0;
        width: 100%;
    }
    
    /* ホバーエフェクト */
    button {
        background-color: #008000;
        color: #fff;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
    }
    
    button:hover {
        background-color: #006400;
    }

}

@media screen and (max-width: 768px) {
  /* スマートフォン用のスタイルを記述する */
  /* ページ全体のスタイル */
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }
    
    /* ヘッダーのスタイル */
    header {
        background-image: url('images/4park.jpg'); /* 画像のパスを指定 */
        background-color: rgba(255, 255, 255, 0.6); /* 透明度を指定 */
        background-blend-mode: lighten; /* 画像と色のブレンドモードを設定 */
        background-size: cover;
        background-position: center;
        color: #e87420;
        text-align: center;
        padding: 50px;
        margin-bottom: 20px;
    }
    
    /* タイトルのスタイル */
    h1 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    
    /* サブタイトルのスタイル */
    h2 {
        font-size: 16px;
        font-style: italic;
    }
    
    h3 {
        text-align: center;
        text-decoration: underline;
        text-decoration-color: rgb(253, 54, 54);
        text-decoration-style: dashed;
        line-height: 1.5;
        margin-bottom: 10px;
    }
    
    h4 {
        color: #fff;
        border: 2px solid #e87420; /* 境界線を追加 */
        border-radius: 10px; /* 角を丸くする */
        padding: 5px 10px; /* パディングを追加 */
        background-color: #e87420; /* 背景色を設定 */
        font-size: 16px;
        font-style: italic;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    
    h5 {
        color: #000000;
        padding: 5px 10px; /* パディングを追加 */
        font-size: 18px;
        font-style: italic;
        margin-top: 40px;
        margin-bottom: 20px;
        text-decoration: underline;
        text-decoration-color: #e87420;
    }
    
    p {
        margin-bottom: 10px; /* 段落の下に余白を追加 */
    }
    
    .container {
        display: flex;
        flex-direction: column; /* 縦並びにする */
        font-size: 13px;
    }
    
    .main-content {
        order: 1;
        padding: 10px;
        margin: 0 auto;
    }
    
    .sidebar {
        order: 2;
        padding: 10px;
        background-color: #f0f0f0; /* サイドバーの背景色を指定 */
    }
    
    .ad-container {
        text-align: center; /* 広告を中央揃え */
        margin: 20px auto;
    }
    
    .responsive-ad {
        width: 75%; /* 幅を親要素の100%に設定 */
        max-width: 80%; /* 最大幅を指定して、大きくなりすぎないようにする */
        height: auto; /* 高さを自動調整 */
    }
        
    .mokuzi {
        border: 2px solid #e87420;
        text-align: left;
        padding: 10px; /* パディングを追加 */
        border-radius: 10px; /* 角丸を追加 */
        width: 85%; /* 幅を指定 */
        overflow: auto;
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 25px;
        font-size: 14px;
    }
    
    .mokuzi > ul {
        list-style-type: none; /* リストのマーカーを削除 */
        margin-left: 5%; /* 左の余白をリセット */
        padding-left: 0;
        list-style-type: disc;
    }
    
    .mokuzi > li {
        margin-bottom: 5px; /* リストアイテムの間隔を追加 */
    }
    
    .mokuzi ul ul {
        margin-top: 5px; /* ネストされたリストの上部のマージンを追加 */
        margin-left: 10%;
        list-style-type: circle;
    }
    
    .mokuzi ul ul a{
        font-size: 12px;
    }
    
    .mokuzi a {
        font-size: 13px;
        text-decoration: none; /* リンクの下線を削除 */
        color: #333; /* リンクの色を変更 */
    }
    
    .mokuzi a:hover {
        color: #ff0000; /* リンクにマウスを移動した際の色を変更 */
    }
    
    .text-underline {
        text-decoration: underline wavy rgb(253, 54, 54);
        line-height: 1.25;
    }
    
    
    .pic1 img {
        max-width: 100%;
        width: 60%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 25px;
    }
    
    .pic2 img {
        max-width: 100%;
        width: 40%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-top: 25px;
        margin-bottom: 25px;
    }
    
    .pic3 img {
        max-width: 100%;
        width: 40%;
        height: auto;
        display: block;
        margin: 0 auto;
        margin-bottom: 25px;
    }
    
    .flex-AK {
        display: flex;
        justify-content: center;
        align-items: center; /* 垂直方向の中央揃え */
    }
    
    .AKtext {
        flex: 5; /* 1:1 の割合で分割 */
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .pic4 {
        flex: 3;
    }
    
    .pic4 img {
        width: 85%; /* 画像が親要素に合わせてサイズ調整されるように */
        height: auto;
        margin-bottom: 20px;
    }
    
    .first-sec {
        margin-bottom: 20px; /* セクション間の余白を追加 */
    }
    
    .first-sec ul {
        font-size: 16px;
        list-style-type: disc; /* 箇条書きのマーカータイプを変更 */
        margin-left: 8%; /* 箇条書きの左の余白を追加 */
        margin-bottom: 15px; /* 箇条書きの下に余白を追加 */
    }
    
    .first-sec ul li {
        margin-bottom: 5px; /* 箇条書きの項目間に余白を追加 */
    }
    
    .illustrated-text {
        justify-content: center;
        align-items: center;
        display: flex;
        background-color: #ffffff;
        border-radius: 20px;
        border: 2px solid #a0ed70;
        padding: 20px;
        width: 75%;
        position: relative; /* 相対位置付け */
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 30px;
    }
    
    .illustrated-text::after {
        content: "";
        position: absolute;
        top: 13%;
        bottom: 0;
        left: 25%;
        transform: translateX(-75%);
        width: 2px;
        height: 76%; /* 親要素の高さの50% */
        background-color: #a0ed70;
    }
    
    .illustrated-text img {
        flex: 1; /* イラストが伸縮しないように */
        max-width: 20%; /* イラストの幅を50%までに制限（パディングを考慮して計算） */
        border-radius: 15px; /* イラストの丸角 */
        margin-right: 20px; /* イラストとテキストの間隔 */
        padding-right: 20px;
    }
    
    .text-container {
        flex: 1; /* テキストが残りのスペースを占有 */
        padding-left: 20px;
    }
    
    .text-container .title {
        font-weight: bold;
        /* タイトル部分のスタイル */
    }
    
    .text-container .description {
        /* 説明文部分のスタイル */
        list-style-type: disc;
        font-size: 14px;
    
    }

    .relatives {
        border: 2px solid #e87420;
        text-align: left;
        padding: 10px; /* パディングを追加 */
        border-radius: 10px; /* 角丸を追加 */
        width: 90%; /* 幅を指定 */
        overflow: visible;
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 15px;
        font-size: 20px;
    }
    
    .relative-title {
        font-size: 16px;
        color: #000;
        font-weight: bold;
    }

    .related-articles {
        display: flex;
        flex-direction: row;
        align-items: center; /* 子要素を縦方向の中央に配置 */
        border-top: 1px solid #e87420; /* 上部に1pxの実線を灰色で表示 */
        padding-top: 10px; /* 線とコンテンツの間に余白を設定 */
    }

    .related-articles img{
        flex: 2;
        width: 30%; /* 画像が親要素に合わせてサイズ調整されるように */
        height: auto;
        padding: 5px;
    }

    .related-articles p{
        flex: 8;
        font-size: 12px;
        max-width: 70%;
        height: auto;
        color: #000;
        padding: 5px;
        border-left: 1px dashed #e87420;
    }

    .related-articles a{
        text-decoration: none;
        color: #333;
    }

    .related-articles a:hover {
        color: #e87420;
    }

    .animate-on-scroll {
        opacity: 0;
        transition: opacity 0.5s ease;
    }
      
    .show {
        opacity: 1;
    }
    
    /* セクションのスタイル */
    section {
        padding: 20px;
    }
    
    /* ホバーエフェクト */
    button {
        background-color: #008000;
        color: #fff;
        padding: 10px 20px;
        border: none;
        cursor: pointer;
    }
    
    button:hover {
        background-color: #006400;
    }
}