*, *::before, *::after {
    box-sizing: border-box;
}

/* ===== フォント ===== */

.dotgothic16-regular {
    font-family: "DotGothic16", sans-serif;
}

.new-tegomin-regular {
    font-family: "New Tegomin", serif;
}

/* ===== ここまで　フォント ===== */

/* 全体の背景設定 */
html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    cursor: url('../image/cursor.webp'), auto;
    width: 100%;
}

a:hover, .side-bg-image-01:hover, .side-bg-image-02:hover, .side-bg-image-03:hover, .accordion:hover, input[type="checkbox"]:hover, button:hover {
    cursor: url('../image/cursor-hover.webp'), pointer;
}

/* 背景画像として固定するimg */
body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center;
    z-index: -2;
    animation: rotateSlowly 240s linear infinite;

    background-image: url(../image/background.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    width: max(150vw, 150vh);
    height: max(150vw, 150vh);
}

@keyframes rotateSlowly {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 中央のコンテンツエリア */
.layout-container {
    width: 100%;
    margin: 0 auto;
}

/* ===== header ===== */

/* ヘッダーのラッパー */
.header-wrapper {
    background-color: #000;
}

/* ヘッダー */
#header {
    position: relative;
    top: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 1536px;
    height: 100vh;
    max-height: 1024px;
    overflow: hidden;
}

.header-content {
    
}

.header-section {

}

/* ヘッダー画像 */
.header-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* ヘッダー画像の内部画像 */
.header-image img {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom;
}

/* タイトル画像 - ヘッダー内に配置されたタイトル画像 */
.title-image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    z-index: 5;
}

h1 {
    all: unset;
    display: block;
}

/* タイトル画像の内部画像 - タイトル画像の調整 */
.title-image img {
    position: absolute;
    top: 10%;
    width: 80%;
    height: auto;
}

/* ヘッダーボタンエリア */

.botton-box-wrapper {
    position: absolute;
    display: contents;
    bottom: 10px;
    left: 0;
    z-index: 5;
}

/* ボタンボックス - ヘッダー内のボタンを縦に並べる */
.botton-box {
    position: absolute;
    left: 10px;
    bottom: 10px;
    flex-direction: column;
    align-items: center;
    gap: 0;
    z-index: 5;
    display: inline-block;
    transform: translateX(-100%); /* 初期位置は画面外にセット */
    transition: transform 2s ease;
}

.botton-box.expand {
    transform: translateX(0); /* スライドして表示 */
}

/* Xボタン - 閉じるボタンのスタイル */
.x-botton {
    margin: 2px;
    display: inline-flex;
}

.x-botton a {
    display: inline-flex;
}

/* Xボタンの画像 - 画像のサイズと位置 */
.x-botton img {
    position: relative;
    width: 50px;
}

.x-botton a:active {
    transform: scale(1.1);
}

/* 音楽ボタン - 音楽関連ボタンのスタイル */
.music-botton {
    margin: 2px;
    display: table-caption;
}

.audio-section {
    display: block;
}

.language-button {
    display: inline-block;
    margin: 2px;
    z-index: 5;
    padding: 3px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

.language-button a {
    color: #ffffff;
    text-decoration: none;
}

.language-button a:active {
    color: #00bfff;
    text-decoration: underline;
}

/* ここまでヘッダーボタンエリア */

/* ヘッダーテキストエリア */
.header-text-wrapper {
    position: absolute;
    display: contents;
    bottom: 10px;
    right: 0;
    z-index: 5;
}

/* ヘッダーテキスト - ヘッダー内のテキストのスタイル */
.header-text {
    font-family: "DotGothic16", sans-serif;
    position: absolute;
    bottom: 10px;
    right: 0;
    margin: auto 1.5%;
    padding: 5px;
    white-space: nowrap;
    text-shadow: 2px 2px 4px black;
    font-weight: bold;
    z-index: 5;
    display: inline-block;
    transform: translateX(100%); /* 初期位置は画面外にセット */
    transition: transform 2s ease;
}

.header-text.expand {
    transform: translateX(0); /* スライドして表示 */
}

/* ヘッダーテキスト内のナビゲーションリスト - ナビゲーションのリスト表示 */
.header-text nav ol {
    padding: 0;
    margin: 0;
    text-align: right;
}

/* ヘッダーテキスト内のリストアイテム - リストアイテムのスタイル */
.header-text nav li {
    list-style-type: none;
}

/* ヘッダーテキスト内のリンク - リンクのスタイルとホバー効果 */
.header-text nav a {
    color: white;
    font-size: 1.5rem;
    text-decoration: none;
    display: inline-block;
    transition: color 0.5s ease, transform 0.5s ease;
}

.header-text nav a:active {
    transform: scale(1.1);
    color: #00bfff;
}

/* ここまでヘッダーテキストエリア */

/* ===== ここまで　header ===== */

/* ===== main ===== */
/* 全体のレイアウト（スマホでは縦並び） */
.content-wrapper {
    display: flex;
    max-width: 1920px;
    margin: auto;
    flex-direction: column; /* スマホでは縦並び */
}

/* メインコンテンツ - メインコンテンツの基本スタイル */
#main {
    width: 100%;
    padding: 10px;
}

.main-content {

}

/* メインコンテンツセクション - セクションのスタイル（スクロールマージンや背景色） */
.main-section {
    scroll-margin-top: 10vh; /* 80vhのheaderの影響を軽減する */
    margin: 5px auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

.oshirase-title {
    font-weight: bold;
}

.oshirase-text {
    animation: blinkColor 2s infinite;
}

@keyframes blinkColor {
    0%   { color: red; }
    50%  { color: yellow; }
    100% { color: red; }
}

/* メインコンテンツのh2 - 見出し2のスタイル */
.main-section h2 {
    display: inline-block;
    font-family: "New Tegomin", serif;
    font-size: 1.75rem;
    color: white;
    margin: 5px 20px;
    border-radius: 8px;
    padding: 0px 5px 7px 5px;
    mix-blend-mode: difference;
    text-shadow: 2px 2px 4px black; /* 黒い影を追加 */
}

/* メインコンテンツのh3 - 見出し3のスタイル */
.main-section h3 {
    display: inline-block;
    font-family: "New Tegomin", serif;
    font-size: 1.5rem;
    color: white;
    margin: 5px 20px;
    border-radius: 8px;
    padding: 0px 5px 7px 5px;
    mix-blend-mode: difference;
    text-shadow: 2px 2px 4px black; /* 黒い影を追加 */
}

/* メインコンテンツのp - 段落のスタイル */
.main-section p {
    font-family: "DotGothic16", sans-serif;
    font-size: 1.0rem;
    color: white;
    margin: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 10px;
    text-indent: 1em; /* 1文字分の字下げ */
    line-height: 1.5rem;
}

/* メインコンテンツのp内のリンク - リンクのスタイル */
.main-section a {
    color: white;
    text-decoration: none;
}

.main-section a:active {
    color: #00bfff;
    text-decoration: underline;
}

/* 共通の背景スタイル - 背景画像に関する共通設定 */
.main-bg-image-common {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    aspect-ratio: 16 / 9;
    margin: 15px 5px 5px 5px;
    border-radius: 30px;
    box-shadow: 0 0 8px #000000;
}

/* 背景画像01 - 特定の背景画像設定 */
.main-bg-image-01 {
    background-image: url(../image/prolog_01.webp);
}

/* 背景画像02 - 特定の背景画像設定 */
.main-bg-image-02 {
    background-image: url(../image/poststory_01.webp);
}

/* 利用規約 - 背景とテキストスタイル */
.termsofservice {
    background-color: #ffffff;
}

/* 利用規約のh2 - 見出し2のスタイル */
.termsofservice h2 {
    font-family: Arial, sans-serif;
    font-size: 1.5rem;
    text-align: center;
    margin: 15px 20px 5px 20px;
    padding: 5px;
    text-align: left;
    text-shadow: none;
}

/* 利用規約のh3 - 見出し3のスタイル */
.termsofservice h3 {
    font-family: Arial, sans-serif;
    font-size: 1.25rem;
    margin: 15px 20px 5px 20px;
    padding: 5px;
    text-shadow: none;
}


/* 利用規約のp - 段落のスタイル */
.termsofservice p {
    font-family: Arial, sans-serif;
    font-size: 1.0rem;
    color: #000000;
    background-color: #ffffff;
    margin: 5px 30px;
    padding: 5px 10px;
    text-indent: 0em;
}

/* 利用規約のp内のリンク - リンクのスタイル */
.termsofservice a {
    color: #000000;
    text-decoration: none;
}

.termsofservice a:active {
    color: #00bfff;
    text-decoration: underline;
}

/* サイドメニュー */
.aside {
    width: 100%;
    padding: 10px;
}

.aside-content {
    
}


/* サイドメニュー内のコンテンツ */
.aside-section {
    margin: 5px auto;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

/* ThisWorldエリア */
.thisworld-area {
}

.thisworld-area h2 {
    display: inline-block;
    font-family: "New Tegomin", serif;
    font-size: 1.75rem;
    color: white;
    margin: 5px 20px;
    border-radius: 8px;
    padding: 0px 5px 7px 5px;
    mix-blend-mode: difference;
    text-shadow: 2px 2px 4px black; /* 黒い影を追加 */
}

/* サイド背景画像 */
.side-bg-image-common {
    position: relative;
    aspect-ratio: 1 / 1;  /* 16:9 の比率を維持 */
    box-shadow: 0 0 8px #000000;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    margin: 15px auto;
}

.side-bg-image-common:active {
    transform: scale(1.02);
}

/* ThisWorld画像01 */
.side-bg-image-01 {
    background-image: url(../image/profile_01.webp);
    max-width: 200px;
    border-radius: 50%;
}

/* ThisWorld画像02 */
.side-bg-image-02 {
    background-image: url(../image/profile_02.webp);
    border-radius: 10%;
    width: 150px;
    height: 100px;
}

/* ThisWorld画像02 */
.side-bg-image-03 {
    background-image: url(../image/profile_03.webp);
    border-radius: 10%;
    width: 150px;
    height: 100px;
}

/* オーバーレイ背景画像（マイク） */
.overlay-bg-image {
    position: absolute;
    aspect-ratio: 1 / 1;
    height: 30%;
    max-width: 30%;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    background-image: url(../image/microphone.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    border-radius: 50%;
    animation: blinkAnimation 1.5s infinite;
}

/* 明滅アニメーション */
@keyframes blinkAnimation {
    0% {
        opacity: 0;  /* 最初は透明 */
    }
    50% {
        opacity: 0.6;  /* 半透明 */
    }
    100% {
        opacity: 0;  /* 最後は透明 */
    }
}

/* ThisWorldエリアのテキスト */
.thisworld-area p {
    font-family: "DotGothic16", sans-serif;
    color: white;
    font-size: 1.0rem;
    margin: 5px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 10px;
    text-align: left;
    text-indent: 1em; /* 1文字分の字下げ */
}

/* ツイートエリア */
.twitter-tweet {
    margin: 0 auto;
}

.img-ad {
    background-image: url(../image/img-ad.webp);
    background-size: cover;
    background-position: center;
    margin: 15px auto;
    aspect-ratio: 1 / 1;
    max-width: 280px;
    width: 100%;
}

/* 広告の設定 */
.adsbygoogle-box {
    text-align: center;
}

/* 広告のテキスト */
.adsbygoogle-box p {
    text-align: center;
    font-family: "DotGothic16", sans-serif;
    color: white;
    font-size: 1.0rem;
    margin: 10px 10px 10px 10px;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 10px;
}

/* 広告のインライン要素 */
ins.adsbygoogle {
    margin: 5px;
}

/* ===== footer ===== */

/* フッター全体 */
#footer {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    padding: 10px;
}

.footer-content {
    
}

.footer-section {
    
}


/* フッター内の段落 */
#footer p {
    margin: 0;
}

/* フッター内のリンク */
#footer a {
    color: white;
    text-decoration: none;
}

#footer a:active {
    color: #00bfff;
    text-decoration: underline;
}

/* ===== ここまで　footer ===== */

/* ===== ここまで　全体 ===== */

/* ===== シェアボタン（share-buttons） ===== */

/* シェアボタンのプレースホルダー */

.share-buttons-box {
    text-align: center;
}

.share-placeholder {
    height: 0px;
}

.share-buttons {
    visibility: hidden;
    display: inline-flex;
    opacity: 0;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-width: max-content;
    margin: 5px auto;
    box-sizing: border-box;
    transition: opacity 0.8s ease;
}

/* 表示する時のクラス */
.share-buttons.show {
    visibility: visible;
    opacity: 1;
}

/* 固定されたシェアボタン */
.share-buttons.fixed {
    position: fixed;
    top: 0;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    padding: 5px;
    z-index: 1000;
}

/* ボタンの共通スタイル */
.btn {
    font-family: "DotGothic16", sans-serif;
    font-weight: bold;
    text-decoration: none;
    padding: 5px 15px;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    transition: background-color 0.3s ease;
    display: inline-block;
    text-shadow: 2px 2px 4px black;
    box-shadow: 0 0 8px #000000;
}

.btn:active {
    transform: scale(1.1);
}

/* 虹色のアニメーション */
@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* フォロー用ボタン */
.btn.follow {
    background: linear-gradient(90deg, #ff7eb3, #ffbf69, #ffea00, #89ff00, #00ffea, #8a2be2, #ff007f);
    background-size: 300% 300%;
    animation: rainbow 5s infinite linear;
}

/* Twitter ボタン */
.btn.x {
    background-color: #1C1C1E;
}

.btn.x:active {
    background-color: #333;
}

/* Bluesky ボタン */
.btn.bluesky {
    background-color: #1DA1F2;
}

.btn.bluesky:active {
    background-color: #0d8ddb;
}

/* Facebook ボタン */
.btn.facebook {
    background-color: #4267B2;
}

.btn.facebook:active {
    background-color: #365899;
}

/* はてなブックマークボタン */
.btn.hatenab {
    background-color: #00A4DE;
}

.btn.hatenab:active {
    background-color: #0086b3;
}

/* Pocket ボタン */
.btn.pocket {
    background-color: #EF3F56;
}

.btn.pocket:active {
    background-color: #d6354a;
}

/* ===== ここまで シェアボタン（share-buttons） ===== */
/* ===== 記事コンテナ（article-container） ===== */

/* 記事コンテナの基本スタイル */
.article-container {
    font-family: "DotGothic16", sans-serif;
    color: white;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    padding: 0 10px;
    margin: 5px;
    max-height: 75px;
    overflow-y: auto;
    transition: max-height 0.3s ease-in-out; /* 高さの遷移を追加 */
}

/* 記事コンテナ内のリストスタイル */
.article-container ul {
    list-style-type: none; /* デフォルトのリストマーカーを削除 */
    padding-left: 0; /* 左の余白を調整 */
    margin: 0; /* リストの余白を削除 */
}

/* 記事コンテナ内のリスト項目 */
.article-container ul li {
    display: flex;
    flex-direction: row; /* ← column を row に変更 */
    align-items: center; /* 垂直方向に中央揃え */
    gap: 6px;            /* 要素の間に少しスペースを入れる（お好みで） */
    font-size: 0.8rem;
    line-height: 1.4;
    animation: fadeIn 0.5s ease-out;
    border-bottom: 0.1px solid #f5f5f5;
}

/* 各リスト項目の前にハイフンを追加 */
.article-container ul li::before {
    content: "- "; /* 各リスト項目の前に - を追加 */
    color: inherit; /* テキストの色に合わせる */
    font-weight: normal;
}

/* 記事タイトルのリンクスタイル */
.article-container a {
    color: white;
    text-decoration: none;
}

.article-container a:active {
    color: #00bfff;
}

/* フェードインアニメーション */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== ここまで記事コンテナ（article-container） ===== */

/* ===== インプットフォーム ===== */

.post-form {
    padding: 10px;
    margin: 5px; /* 左右中央揃え */
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
}

/* 入力フィールド */
.input-field,
.message-field {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 2px solid #ccc; /* 枠線を追加 */
    margin-bottom: 10px;
    font-family: "DotGothic16", sans-serif;
    font-size: 1.0rem;
}

#name-input {
    width: 90%;
}

#email-input {
    width: 100%;
}

#website-input {
    width: 100%;
}

#freetext-input {
    width: 90%;
}

/* メッセージ入力エリア */
.message-field {
    height: 150px;
    margin-bottom: 5px;
}

/* ラベル名 */
.user_name {
    font-weight: bold;
}

/* プレースホルダーの色変更 */
.color-placeholder::placeholder {
    color: #ff6666;
}

.info-line {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.checkbox-container {
    margin: 0;
    font-size: 0;
}

.checkbox-container label {
    font-family: "DotGothic16", sans-serif;
    color: white;
    font-size: 0.9rem;
}

.checkbox-container label a {
    color: white;
    text-decoration: none;
}

.checkbox-container label a:active {
    color: #00bfff;
    text-decoration: underline;
}

/* 合計カウント */
.total-count {
    color: red;
    font-weight: bold;
}

/* 文字カウント */
#char-count {
    display: inline-block;
    color: red;
    font-size: 10px;
}

/* 文字エラー表示 */
#error-message {
    display: inline-block;
    font-size: 10px;
    color: red;
    display: none;
}

input[readonly] {
    background-color: #f0f0f0; /* 背景色を変更 */
    color: #777; /* 文字色を変更（任意） */
}

/* 管理人 */
.admin-name {
    color: red;
    font-weight: bold;
}

/* 自動投稿 */
.auto-post {
    color: red;
    font-weight: bold;
}

/* ===== ここまで インプットフォーム ===== */

/* ===== ボタン系 ===== */

/* 送信ボタンのコンテナ */
.submit-button-container {
    display: flex;
    justify-content: center; /* 横方向で中央揃え */
    align-items: center; /* 縦方向で中央揃え */
    width: 100%; /* 親要素の幅を指定 */
}

/* 送信ボタン */
.submit-button {
    width: 80%;
    margin: 10px;
    padding: 10px 15px;
    background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
    background-size: 400% 400%;
    color: white;
    box-shadow: 0 0 8px #00bfff;
    font-family: "DotGothic16", sans-serif;
    font-size: 1.0rem;
    border: none;
    border-radius: 4px;
    animation: gradientAnimation 3s ease infinite;
    cursor: pointer;
}

/* グラデーションアニメーション */
@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===== ここまで ボタン系 ===== */

/* ===== 投稿済みストーリー ===== */
/* アコーディオン用のスタイル */
.accordion {
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    cursor: pointer;
    padding: 5px;
    width: auto;
    max-width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}

.accordion:active {
    background-color: #ddd;
}

/* パネル内の背景色を変更 */
.panel {
    background-color: rgba(0, 0, 0, 0.6);
    overflow: hidden; /* 内容を隠す */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, max-height 0.5s ease-out; /* max-height, opacity, transform の変更にアニメーションを追加 */
    opacity: 0; /* 初期状態で透明に */
    transform: scaleY(0); /* 初期状態で縮小 */
    transform-origin: top; /* アコーディオンが上から開くように */
    max-height: 0; /* 初期状態で高さを0に設定 */
}

/* パネルが表示されるときの状態 */
.panel.show {
    opacity: 1; /* 表示時に不透明に */
    transform: scaleY(1); /* 表示時に元の大きさに */
    max-height: none; /* 高さを内容に合わせて自動調整 */
}

.panel p {
    padding: 5px;
}

.parent {
    padding: 10px;
}

/* 新しい中央揃え用のクラス */
.accordion-center {
    text-align: center;
    font-size: 1.5rem;
    margin: 10px auto;
    display: block;
    font-weight: bold;
    font-family: "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
    background-color: #FFFFFFCC;
    border-radius: 5px;
    padding: 0px;
    width: 90%;
}

/* 中央揃えのパネルの背景色を別で指定 */
.accordion-center + .panel {
    background-color: #FFFFFFCC; /* 中央揃えのパネルの背景色 */
    padding: 10px;
}

/* ホバー時に色が変わる */
.accordion-center:active {
    background-color: #FFFFFF99; /* ホバー時に背景色を変更 */
}

.post-container {
    font-family: "DotGothic16", sans-serif;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    max-height: 200px; /* 投稿部分の高さを制限 */
    overflow-y: auto; /* スクロールを追加 */
    padding: 0 10px;
    margin: 5px;
}

/* ===== ここまで投稿済みストーリー ===== */

/* ===== その他 ===== */

.color-red {
    color: red;
}

/* ===== ここまで その他 ===== */


/* ===== パソコンサイズ ===== */
/* パソコンサイズのレスポンシブ設定 */
@media (min-width: 768px) {

    a {
        transition: color 0.5s ease;
    }

    /* ===== header ===== */
    /* ヘッダー部分のスタイル設定 */
    .title-image img {
        width: 80%;
    }

    .x-botton:hover {
        transform: scale(1.1);
    }

    .header-text nav a {
        font-size: 3.0rem;
    }

    .header-text nav a:hover {
        transform: scale(1.1);
        color: #00bfff;
    }

    .language-button a:hover {
        color: #00bfff;
        text-decoration: underline;
    }

    /* ===== ここまでheader ===== */

    .content-wrapper {
        flex-direction: row;
        justify-content: space-between;
    }

    /* ===== main  ===== */
    /* メインコンテンツ部分のスタイル設定 */
    #main {
        width: 75%;
        margin-left: 20px;
    }

    .main-section a:hover {
        color: #00bfff;
        text-decoration: underline;
    }

    .main-display-flex {
        display: flex;
    }

    .main-bg-image-common {
        margin: 5px;
        width: 100%;
    }

    .main-display-flex p {
        margin-right: 5px;
    }

    .main-display-flex img {
        max-width: 100%;
        height: auto;
    }

    .article-container ul li {
        font-size: 1.0rem;
    }

    .article-container a:hover {
        color: #00bfff;
    }

    .checkbox-container label a:hover {
        color: #00bfff;
        text-decoration: underline;
    }

    .accordion:hover {
        background-color: #ddd;
    }

    /* ホバー時に色が変わる */
    .accordion-center:hover {
        background-color: #FFFFFF99; /* ホバー時に背景色を変更 */
    }

    .termsofservice a:hover {
        color: #00bfff;
        text-decoration: underline;
    }

    /* アサイド */

    .aside {
        width: 25%;
        margin-right: 20px;

    }

    .side-bg-image-common:hover {
        transform: scale(1.02);
    }

    /* ===== footer  ===== */
    /* フッターコンテンツ部分のスタイル設定 */

    #footer a:hover {
        color: #00bfff;
        text-decoration: underline;
    }

    /* その他 */

    .btn:hover {
        transform: scale(1.1);
    }

    .btn.x:hover {
        background-color: #333;
    }

    .btn.bluesky:hover {
        background-color: #0d8ddb;
    }

    .btn.facebook:hover {
        background-color: #365899;
    }

    .btn.hatenab:hover {
        background-color: #0086b3;
    }

    .btn.pocket:hover {
        background-color: #d6354a;
    }

}

@media (min-width: 1000px) {

    .share-buttons {
        position: relative;
        top: -65px;
    }

}

    /* ===== ここまでmain  ===== */

/* ===== ここまで　パソコンサイズ ===== */