@charset "utf-8";
/* CSS Document */

/*共通*/

/*金額表示*/

.total-summary {
    background-color: #f5faff; /* 淡いブルー */
    border: 1px solid #b3d8ff; /* 青系の枠線 */
    padding: 12px 16px;
    margin: 20px 0;
    font-size: 18px;
    font-weight: bold;
    color: #2158f3; /* メインカラー */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    text-align: center;
}

/* モバイル対応 */
@media (max-width: 768px) {
    .total-summary {
        font-size: 16px;
        padding: 10px 12px;
        margin: 15px 0;
    }
}


/*暗くなる要素*/
.black-bg,.black-bg2 {
    display: block;
    position: fixed;
    left: 0;
    top: 60px;
    width: 100vw;
    height: 100vh;
    z-index: 10;
    background-color: #000;
    opacity: 0;
    visibility: hidden;/* 非表示にしておきます */
    cursor: pointer;
    transition: all .3s;
}

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

body{
    margin: 0 0;
    color: #4c5e70;
    verflow-x: hidden; /* 横スクロールを防ぐ */
}

a{
    text-decoration: none;
}


/*文字の色を赤くする、サイズ変更*/
.red{
    color: #f00000;
}

.small-red {
    color: #f00000;
    font-size: 12px;
    font-weight: normal;
}



.date {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}

.pagination {
    margin: 20px 0;
    text-align: center;
}

.pagination a {
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    margin: 0 5px;
}

.pagination a.active {
    background-color: #ddd;
    color: #666;
}

.note{
    background: #ffffec;
    padding: 10px;
    border-radius: 10px;
}

.filter-box {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
}

.filter-box select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* PCでは通常のテーブル表示 */
@media screen and (min-width: 769px) {
    .accordion {
        display: none; /* PCではアコーディオンを非表示 */
    }

    .card-table {
        display: table; /* PCではテーブルを表示 */
        width: 100%;
        border-collapse: collapse;
    }

    .card-table th, .card-table td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .card-table th {
        background-color: #f4f4f4;
    }

    .card-table td {
        text-align: left;
    }
}

/* スマホでのアコーディオン */

@media screen and (max-width: 768px) {
    .card-table {
        display: none !important; /* スマホではすべてのcard-tableを非表示 */
    }

    .accordion-content {
        display: none;
    }

    /* スマホでのアコーディオンのヘッダー部分を2行表示 */
    .accordion-header {
        background-color: #e6f7fb75;
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #ddd;
    }

    .accordion-header-row {
        display: flex;
        justify-content: space-between;
        padding: 5px 0; /* 行間のスペースを確保 */
    }
    
    .accordion-header-row .arrow {
        font-size: 18px;
        margin-left: 10px;
    }

    .accordion-content {
        padding: 10px;
        background-color: #ffffffe8;
        border-top: 1px solid #ddd;
    }

    .accordion-content p {
        margin: 0;
        padding: 5px 0;
    }

}




/*ボタン*/

.form-submit {
    text-align: center; /* ボタンをセンターに寄せる */
    margin-top: 20px; /* 上部にマージンを追加してスペースを確保 */
}

.form-submit input[type="submit"] {
    background-color: #ffffff; /* 背景色を白に */
    border: 2px solid #cccccc; /* グレーの枠線 */
    color: #333333; /* テキストの色 */
    padding: 10px 20px; /* パディングを設定してボタンを大きくする */
    border-radius: 25px; /* ボタンを丸くする */
    cursor: pointer; /* マウスオーバー時にポインターを表示 */
    font-size: 16px; /* テキストのサイズ */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* ホバー時のアニメーション */
}

.form-submit input[type="submit"]:hover {
    background-color: #f0f0f0; /* ホバー時の背景色 */
    border-color: #999999; /* ホバー時の枠線色 */
}


.form-submit #submit-button1 {
    background-color: #ccc; /* 無効化された状態の背景色 */
    color: #666; /* 無効化された状態のテキスト色 */
    padding: 10px 20px; /* ボタンのサイズを調整 */
    border: none; /* ボーダーを削除 */
    border-radius: 5px; /* 角を丸く */
    cursor: not-allowed; /* 無効状態のカーソル */
    font-size: 18px; /* テキストのフォントサイズ */
    transition: background-color 0.3s, color 0.3s; /* アニメーションでスムーズに変化 */
}

.form-submit #submit-button1:enabled {
    background-color: #4CAF50; /* 有効化された状態の背景色（グリーン系） */
    color: white; /* 有効化された状態のテキスト色 */
    cursor: pointer; /* 有効化された状態のカーソル */
}

.form-submit #submit-button1:hover:enabled {
    background-color: #45a049; /* ホバー時の背景色（少し濃いグリーン） */
}

.form-submit #submit-button1:active {
    background-color: #3e8e41; /* クリック時の背景色 */
}




h2.ti{
    letter-spacing: 0.3em;
    font-weight: 400;
    padding: 0.25em 0.5em;/*上下 左右の余白*/
    color: #494949;/*文字色*/
    background: transparent;/*背景透明に*/
    border-left: solid 5px #2158f3;/*左線*/
}

.form-container {
    display: flex;
    justify-content: center; /* 水平方向に中央揃え */
    align-items: center;     /* 垂直方向に中央揃え */
    margin-top: 20px;        /* 上下に余白を追加 */
}

.filter-form {
    text-align: center;
    margin-bottom: 20px;
}

.filter-form label {
    margin: 0 10px;
}

.filter-form input[type="date"] {
    width: 33%;
}

.filter-form .form-group {
    display: flex;
   justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.custom-button {
    background-color: white;
    border: 2px solid #ccc;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s;
    display: inline-block;
}

.custom-button:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
}


/*携帯用ボタン*/
@media screen and (max-width: 768px) {
    button {
        background-color: #6c757d; /* グレーの背景色 */
        color: white; /* テキストの色 */
        padding: 5px 10px; /* ボタンのサイズを調整 */
        border: none; /* ボーダーを削除 */
        border-radius: 5px; /* 角を丸くする */
        cursor: pointer; /* ポインター表示 */
        font-size: 15px; /* テキストのフォントサイズ */
    }
}




/*main*/

main{
    background: #ffffff;
    margin: 30px 0 30px 0;   
    padding: 10px;
    }

.main-in{   
    width: 96%;
    max-width: 950px;
    margin: 0 auto;
}

.main-transaction,.main-listing,.main-purchase-history,.main-listing-history,.main-charge-history,.main-withdrawal-history{
    background: white;
    padding: 15px; 
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.main-charge-history h3.Purchasable-Amount span{
	font-size: 1.5em;
	margin: 0 5px;
}


/*apple-in*/
.apple-in{
    background: white;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.apple-in .transaction-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.apple-in .transaction-table th,
.apple-in .transaction-table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
    vertical-align: middle;
}

.apple-in .transaction-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.apple-in .transaction-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.apple-in .transaction-table tr:hover {
    background-color: #f1f1f1;
}

.apple-in .transaction-table button {
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    background-color: #484e54;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.apple-in .transaction-table button:hover {
    background-color: #517296;
}

.apple-in .form-group {
    margin-bottom: 20px;
}

.apple-in .form-group label {
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
}

.apple-in .form-group select,
.apple-in .form-group input {
    padding: 8px;
    width: calc(100% - 20px); /* 適度な余白を考慮 */
    max-width: 300px; /* 最大幅を設定 */
    box-sizing: border-box;
}

.apple-in .form-submit button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #28a745;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.apple-in .form-submit button:hover {
    background-color: #218838;
}




/*selling-in*/
.selling-in {
    background: white;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.selling-in .card-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.selling-in .card-table th,
.selling-in .card-table td {
    padding: 10px 6px;
    text-align: left;
    border: 1px solid #ddd;
    vertical-align: middle;
}

.selling-in .card-table th {
    background-color: #2158f336;
    font-weight: bold;
}

.selling-in .card-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.selling-in .card-table tr:hover {
    background-color: #f1f1f1;
}

/* selling-inボタンの基本スタイル */
.selling-in .card-table button,
.selling-in .form-group button,
.selling-in .form-submit button {
    color: white; /* 白文字 */
    border: none; /* 枠線なし */
    border-radius: 5px; /* 角を丸く */
    cursor: pointer; /* マウスカーソルをポインタに */
    transition: background-color 0.3s ease; /* 背景色変更のトランジション */
    background-color: #484e54;
    padding: 8px 12px;
}

/* inquiry-button, complete-button, copy-button の共通スタイル */
.selling-in .card-table button.inquiry-button,
.selling-in .card-table button.complete-button,
.selling-in .card-table button.copy-button {
    background-color: #484e54; /* グレーがかった色 */
    padding: 8px 10px; /* 内側の余白を調整 */
    font-size: 13px; /* 文字サイズを小さく */
    margin: 2px; /* マージンを少し小さく */
}

/* error-button のスタイル */
.selling-in .card-table button.error-button {
    padding: 8px 10px; /* 内側の余白を調整 */
    font-size: 13px; /* 文字サイズを少し大きく */
    margin: 2px; /* マージンを少し小さく */
}

/* copy-button の特別スタイル */
.selling-in .card-table button.copy-button {
    padding: 5px 8px; /* 内側の余白を小さく */
    font-size: 12px; /* 文字サイズをさらに小さく */
    border-radius: 4px; /* 角を少し丸く */
    margin: 2px; /* マージンを少し小さく */
}

/* ホバー時の背景色 */
.selling-in .card-table button.inquiry-button:hover {
    background-color: #117a8b; /* ダークティール */
}

.selling-in .card-table button.complete-button:hover {
    background-color: #1e7e34; /* ダークグリーン */
}

.selling-in .card-table button.error-button:hover {
    background-color: #c82333; /* ダークレッド */
}

.selling-in .card-table button.copy-button:hover {
    background-color: #0056b3; /* ダークブルー */
}

.selling-in .edit-button:hover{
    background-color:#937dcf;/*  */
}


/* フォームのスタイル */
.selling-in .form-group {
    margin-bottom: 20px;
}

.selling-in .form-group label {
    display: inline-block;
    margin-right: 10px;
    font-weight: bold;
}

.selling-in .form-group select,
.selling-in .form-group input {
    padding: 8px;
    width: calc(100% - 20px);
    max-width: 300px;
    box-sizing: border-box;
}

/* form-submit ボタンの特別スタイル */
.selling-in .form-submit button {
    background-color: #28a745; /* 緑色 */
    padding: 10px 20px; /* 内側の余白を調整 */
}

.selling-in .form-submit button:hover {
    background-color: #218838; /* ダークグリーン */
}

/* ステータス表示のスタイル */
.selling-in .status-complete {
    color: green;
    font-weight: bold;
}

.selling-in .status-pending {
    color: orange;
    font-weight: bold;
}

.selling-in .status-error {
    color: red;
    font-weight: bold;
}


/*top-in*/
  .top-in  table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.top-in  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    padding: 15px;
}
.top-in  th {
    background-color: #2158f336;
    width: 20%;
    text-align: center;
}
.top-in  td {
    width: 20%;
}
.top-in .view-all-button-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.top-in .view-all-button {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 25px;
    background-color: #ffffff; /* グレーの枠 */
    color: #333; /* 文字色 */
    text-align: center;
    text-decoration: none;
    border: 2px solid #ccc; /* ボーダーを薄いグレーに設定 */
    transition: background-color 0.3s, color 0.3s;
}

.top-in .view-all-button:hover {
    background-color: #ccc; /* ホバー時に濃いグレー */
    color: #fff; /* 文字色を白に */
}


/*sell-in*/
.sell-in {
    background: white;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}
.sell-in  table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.sell-in  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    padding: 15px;
}
.sell-in  th {
    background-color: #f4f4f4;
    width: 30%;
    text-align: center;
}
.sell-in  td {
    width: 70%;
}


/*sell-inの携帯用CSS */
@media screen and (max-width: 768px) {
    .sell-in {
        padding: 10px;
        margin: 10px 0;
        
    }

    .sell-in table {
        width: 100%;
        margin: 10px 0;
        border-collapse: collapse;
    }

    .sell-in th, .sell-in td {
        display: block; /* 横幅にフィットさせるためブロック要素にする */
        width: 100%; 
        text-align: left; /* テキストを左揃えに */
        padding: 10px; /* パディングを小さく */
        box-sizing: border-box;
        white-space: nowrap; /* テキストを一行で表示 */
        overflow: hidden;    /* テキストがはみ出す場合に隠す */
        text-overflow: ellipsis; /* 長いテキストを「...」で省略 */
    }

    .sell-in th {
        background-color: #f4f4f4;
        text-align: left; /* モバイルでは左揃えにする */
        font-weight: bold;
        padding: 10px; /* パディングを小さく調整 */
    }

    .sell-in td {
        margin-bottom: 10px;
    }

    /* テキストエリアや入力フィールドも全幅に調整 */
    textarea, input[type="text"], input[type="number"], select {
        width: 100%;
        font-size: 16px;
        padding: 10px;
        box-sizing: border-box;
        margin: 10px 0;
    }

    /* 出品ボタンのスタイルをモバイル用に調整 */
    .form-submit input[type="submit"] {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border-radius: 5px;
        background-color: #aaa;
    }
}


/*profile-in*/

.profile-in {
    background: white;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.profile-in table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.profile-in th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    padding: 15px;
}
.profile-in th {
    background-color: #f4f4f4;
    width: 30%;
    text-align: center;
}
.profile-in td {
    width: 70%;
}


/* input枠スタイル */
.profile-in input[type="text"],
.profile-in input[type="email"],
.profile-in textarea {
    border: 1px solid #ccc;
    padding: 0.6em;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
}

.profile-in input[type="text"],
.profile-in textarea {
    width: 100%;
}

.profile-in input[type="email"] {
    width: 80%;
}



@media screen and (max-width: 768px) {
    .profile-in {
        background: white;
        padding: 10px;
        margin: 10px 0;
    }

    .profile-in table {
        width: 100%;
        margin: 10px 0;
        border-collapse: collapse;
    }

    .profile-in th, .profile-in td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
        white-space: normal;
    }

    .profile-in th {
        background-color: #f4f4f4;
        font-weight: bold;
    }

    .profile-in td {
        margin-bottom: 10px;
    }

    .profile-in th, .profile-in td {
        font-size: 14px;
    }

    /* input要素のサイズを他の要素に合わせる */
    .profile-in input[type="text"],
    .profile-in input[type="email"],
    .profile-in textarea {
        width: 100%;
        padding: 10px;
        box-sizing: border-box; /* パディングを含めたサイズに */
        font-size: 14px; /* 他の要素に合わせたフォントサイズ */
    }
    

}



/*charge_history-in*/

.charge_history-in {
    width: 100%; /* 全幅を使用 */
    max-width: 1200px; /* 最大幅を指定 */
    margin: 0 auto; /* 中央揃え */
    padding: 20px;
    box-sizing: border-box; /* パディングを含むボックスサイズ */
}

.charge_history-in table {
    width: 100%; /* テーブルを親の幅に合わせる */
    border-collapse: collapse; /* 境界線を結合 */
    margin-bottom: 20px; /* 下部に余白を追加 */
}

.charge_history-in th, .charge_history-in td {
    padding: 10px; /* セル内のパディング */
    text-align: left; /* テキストを左揃え */
    border-bottom: 1px solid #ccc; /* 下部に境界線を追加 */
}

.charge_history-in th {
    background-color: #f8f8f8; /* ヘッダーの背景色 */
    font-weight: bold; /* ヘッダーの文字を太字に */
}

.charge_history-in td {
    vertical-align: top; /* 内容を上部揃え */
}

.charge_history-in td:first-child {
    width: 20%; /* 金額の列の幅を調整 */
    white-space: nowrap; /* テキストが改行されないように */
}

.charge_history-in td:last-child {
    width: 30%; /* 申請日時の列の幅を調整 */
    white-space: nowrap; /* テキストが改行されないように */
}


/*charge-in*/
.charge-in {
    background: white;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}


.charge-in table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.charge-in th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    padding: 15px;
}
.charge-in th {
    background-color: #f4f4f4;
    width: 30%;
    text-align: center;
}
.charge-in td {
    width: 70%;
}

.charge-in .separator {
    border-top: 1px solid #ccc;
    margin: 20px 0;
}

.charge-in form {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 左揃えに変更 */
    gap: 10px; /* 要素間のスペース */
}

.charge-in .form-input {
    width: 150px; /* 幅を適切に設定 */
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

@media screen and (max-width: 768px) {
    .charge-in {
        padding: 10px;
        margin: 10px 0;
    }

    .charge-in h2 {
        font-size: 18px;
    }

    .charge-in p {
        font-size: 14px;
    }

    .charge-in table {
        width: 100%;
        margin: 10px 0;
        border-collapse: collapse;
    }

    .charge-in th, .charge-in td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
        white-space: nowrap; /* テキストを一行で表示 */
        overflow: hidden;    /* テキストがはみ出す場合に隠す */
        text-overflow: ellipsis; /* 長いテキストを「...」で省略 */
    }

    .charge-in th {
        background-color: #f4f4f4;
        text-align: left;
        font-weight: bold;
        padding: 10px;
    }

    .charge-in td {
        margin-bottom: 10px;
    }

    .charge-in .custom-button {
        width: auto; /* 自動調整 */
        padding: 8px 16px; /* パディングを少し小さく */
        font-size: 14px; /* フォントサイズを小さく */
        border-radius: 5px; /* ボタンの角を少し丸める */
    }

    .separator {
        margin: 10px 0;
    }

    /* 振込先情報のテーブルも同様に修正 */
    #bank-info table {
        width: 100%;
        margin: 10px 0;
    }

    #bank-info th, #bank-info td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #bank-info th {
        background-color: #f4f4f4;
        font-weight: bold;
    }

    #bank-info td {
        margin-bottom: 10px;
    }

    .charge-in form {
        flex-direction: column; /* モバイルでは縦並びに変更 */
    }

    .charge-in .form-input, .charge-in .custom-button {
        width: 100%; /* 入力フィールドとボタンを幅いっぱいに */
        max-width: 400px;
    }
}



/*chat-in*/

.chat-page .chat-in {
    background: white;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
    }

.chat-page .chat-box {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 20px auto; /* 上下に20pxの余白を追加 */
    padding: 20px; /* 内側の余白を追加 */
    border: 2px solid #ccc; /* 枠線を追加 */
    border-radius: 10px; /* 角を丸くする */
    background-color: #f9f9f9; /* 背景色を追加 */
    height: 60vh;/* PC用チャットでスクロールを追加 */
    overflow-y: scroll; 
}

.chat-page .message {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 10px;
    max-width: 70%;
    word-wrap: break-word; /* 長いテキストを折り返す */
}

.chat-page .message.left {
    background-color: #f1f1f1;
    align-self: flex-start;
}

.chat-page .message.right {
    background-color: #0084ff;
    color: white;
    align-self: flex-end;
}

.chat-page .message .timestamp {
    font-size: 0.8em;
    margin-top: 5px;
}

.chat-page .message img {
    max-width: 100%;
    border-radius: 10px;
}

.chat-page .send-message input, .send-message textarea {
    margin-bottom: 10px;
    padding: 10px;
    width: 80%;
}

.chat-page .send-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px; /* 上に余白を追加 */
    padding: 20px; /* 内側の余白を追加 */
    border: 2px solid #ccc; /* 枠線を追加 */
    border-radius: 10px; /* 角を丸くする */
    background-color: #f9f9f9; /* 背景色を追加 */
    width: 100%; /* 幅を100%にする */
    max-width: 600px; /* 最大幅をチャットボックスに合わせる */
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto; /* 入力エリアにもスクロール追加 */
}

.chat-page .send-message textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.chat-page .send-message input[type="file"] {
    margin-bottom: 10px;
}

.chat-page .send-message button {
    padding: 10px 20px;
    border: 2px solid #ccc; /* グレーの枠線 */
    border-radius: 20px; /* ボタンを丸っぽくする */
    background-color: #ffffff; /* 白背景 */
    color: #333; /* テキストの色 */
    cursor: pointer;
    align-self: center; /* ボタンを中央に揃える */
}

.chat-page .send-message button:hover {
    background-color: #f0f0f0; /* ホバー時の背景色を変更 */
}

.chat-page .file-submit-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* ボタン間のスペース */
    margin-bottom: 20px; /* 下部余白 */
}

.chat-page .custom-file-input {
    display: flex;
    align-items: center;
    gap: 10px;
    overflow-y: hidden; /* 不要なスクロールを無効化 */
}

.chat-page .custom-file-label {
    padding: 10px 20px;
    border: 2px solid #ccc;
    border-radius: 20px;
    background-color: #ffffff;
    color: #333;
    cursor: pointer;
    text-align: center;
    display: inline-block;
}

.chat-page .custom-file-label:hover {
    background-color: #f0f0f0;
}

#file-upload {
    display: none;
}

#file-name {
    font-size: 14px;
    color: #666;
}



/*top-0*/

/* ロゴとリンク部分のスタイル */
.top-0 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #2158f3;
}

.top-0-a a {
    border-radius: 11px;
    padding: 10px 20px;
    color: #0f0f0f;
    margin: 0 20px 0 0;
    font-size: 15px;
    background-color: #eef2f3;
    box-shadow: 4px 4px 3px 0px #91d0ff7a;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s; /* ホバー時のアニメーションを追加 */
}

.top-0-a a:hover {
    color: #002d68; /* ホバー時のテキストカラー */
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.452); /* ホバー時の影を強くする */
}


/* リンク部分のスタイル */
.top-0-links {
    display: flex;
    align-items: center;
    margin-right: auto;
    padding-right: 100px;
    font-weight: bold;
    text-shadow: 2px 2px 5px rgba(128, 128, 128, 0.5);
}

.top-0-links a {
    margin-right: 50px;
    margin-left: 50px;
    text-decoration: none;
    color: #f4f4f4;
    text-shadow: 4px 4px 8px rgb(0, 49, 155);
}

.top-0-links a:hover {
    color: #f4f4f4;
    text-shadow: 4px 4px 8px rgb(0, 10, 99);
}

@media screen and (max-width: 455px) {
    .top-0-a a {
        display: block; /* ブロック表示にして縦に並べる */
        width: 100%; /* 幅を100%に設定 */
        margin-top: 10px;
        margin-right: 20px;
        text-align: center; /* テキストを中央揃え */
        padding: 10px 0; /* パディングを調整 */
        font-size: 16px; /* フォントサイズを少し大きくして調整 */
    }
    /* ロゴのサイズを固定または調整 */
    .top-0 .logo {
        width: 120px; /* ロゴの幅を固定 */
        height: auto; /* 高さを自動調整 */
    }
}


/*all*/

.all{
    background: white;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}   

.all-in0{
    max-width: 900px;margin: 0 auto;
}

.all-in{  
    background: white;  
    padding: 20px 30px;
}



.form-group{
    width: 100%;
    border-bottom: 1px solid #ebebeb;
    display: flex;
}

.form-group1{
    width: 100%;
    display: flex;
    padding-top: 40px;
    gap: 10px;
    align-items: center; /* 子要素の位置を垂直方向に中央揃え */
}

.form-group1-checkbox {
    display: flex; /* チェックボックスとラベルを横並び */
    align-items: center; /* チェックボックスとラベルを垂直方向に中央揃え */
}

.form-group1 label {
    vertical-align: middle; /* テキストをチェックボックスと同じ高さに揃える */
    margin: 0; /* 余白をリセット */
    line-height: 1.5; /* テキストの行の高さを調整 */
    margin-left: 5px; /* チェックボックスとラベルの間に余白 */
}

.form-group1 input[type="checkbox"] {
    margin: 0; /* チェックボックスの余白をリセット */
}

.form-group1 button {
    background-color:#008cff; /* ボタンの背景色（グリーン系） */
    color: white; /* テキストの色を白に */
    padding: 5px 10px; /* ボタンの内側の余白を調整 */
    border: none; /* デフォルトのボーダーを削除 */
    border-radius: 5px; /* ボタンの角を丸くする */
    cursor: pointer; /* マウスホバー時にポインタ表示 */
    font-size: 16px; /* テキストのフォントサイズ */
    font-weight: bold; /* テキストを太字に */
    transition: background-color 0.3s, transform 0.2s; /* 色とサイズ変化を滑らかに */
    margin-left: 10px; /* ボタンと他の要素に適切な間隔を作る */
}

.form-group1 button:hover {
    background-color: #002d68; /* ホバー時の背景色（少し濃くする） */
    transform: scale(1.05); /* ホバー時に少し拡大 */
}

.form-group1 button:active {
    background-color: #011f47; /* クリック時の背景色 */
    transform: scale(0.98); /* クリック時に少し縮小してフィードバック */
}

.form-group1 button:disabled {
    background-color: #ccc; /* 無効化された状態の背景色 */
    cursor: not-allowed; /* 無効化時のカーソル */
    color: #666; /* 無効化時のテキスト色 */
}





.registration .label-wrapper{
    width: 25%;
    display: inline-block;
    background: aliceblue;
    padding: 20px;
}

.registration .input-wrapper{
    padding: 20px;
}

.registration .input-wrapper input{
    padding: 10px;
}

.registration .input-wrapper input,
.registration .input-wrapper select,
.registration .input-wrapper textarea {
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
}

.registration .submit-wrapper{
    width: 100%;text-align: center;padding: 15px 0;
}

.registration .submit-wrapper input[type="submit"]{
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    background: #f92a00;
    color: white;
    font-size: 18px;
    letter-spacing: 0.1em;
}

/* PC用 */
.registration #company-group {
    display: flex;
    width: 100%;
}

.registration #company-group .label-wrapper {
    width: 25%;
    padding: 20px;
}

.registration #company-group .input-wrapper {
    width: 31%;
    padding: 20px;
}

.registration #company-group .input-wrapper input {
    width: 100%;
    padding: 10px;
    border-radius: 4px;
    box-sizing: border-box;
}


/* 携帯用のスタイル */
@media screen and (max-width: 768px) {
    /* フォーム全体の幅を調整 */
    .all-in0 {
        max-width: 100%;
        padding: 10px;
    }

    .registration .form-group {
        display: block; /* フォームグループを縦並びに */
        width: 100%;
        border-bottom: 1px solid #ebebeb;
    }

    .registration .label-wrapper {
        width: 100%; /* ラベルの幅を100%に */
        display: block; /* ラベルを縦並びに */
        background: aliceblue;
        padding: 10px; /* パディングを調整してコンパクトに */
        text-align: left; /* テキストを左寄せに */
    }

    .registration .input-wrapper {
        width: 100%; /* 入力フィールドの幅を100%に */
        padding: 10px; /* パディングを調整 */
    }

    .registration .input-wrapper input {
        width: 100%; /* 入力フィールドの幅を全体に */
        padding: 10px;
    }

    /* 登録ボタンの幅を全体に */
    .registration .submit-wrapper input[type="submit"] {
        width: 100%;
    }

    /* モーダルボタンのデザイン調整 */
    #terms-btn {
        display: block;
        margin: 10px auto;
        width: 90%;
        background-color: #008cff;
        color: white;
        padding: 10px;
        border: none;
        border-radius: 5px;
    }

    .form-group1 {
        flex-direction: column; /* 全体を縦並びにする */
        align-items: flex-start; /* 左揃えにする */
    }

    .form-group1-checkbox {
        flex-direction: row; /* チェックボックスとラベルは横並びのまま */
    }

    .form-group1 button {
        margin-left: 0;
        margin-top: 10px; /* ボタンを縦に配置し、上にスペース */
        align-self: flex-start; /* ボタンを左揃えにする */
    }

    .form-group1 label {
        margin-left: 5px; /* チェックボックスとラベルの間に余白 */
    }



  .registration #company-group {
      display: block;
      width: 100%;
  }

  .registration #company-group .label-wrapper {
      width: 100%;
      padding: 10px;
  }

  .registration #company-group .input-wrapper {
      width: 100%;
      padding: 10px;
  }




}



/*payment-in */
.payment-in {
    background: white;
    padding: 15px;
    margin: 15px 0;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

.payment-in table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.payment-in th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    padding: 15px;
}

.payment-in th {
    background-color: #f4f4f4;
    width: 30%;
    text-align: center;
}

.payment-in td {
    width: 70%;
}

@media screen and (max-width: 768px) {
    .payment-in {
        padding: 10px;
        margin: 10px 0;
    }

    .payment-in table {
        width: 100%;
        margin: 10px 0;
    }

    .payment-in th, .payment-in td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px;
        box-sizing: border-box;
    }

    .payment-in th {
        background-color: #f4f4f4;
        text-align: left;
        font-weight: bold;
    }

    .payment-in td {
        width: 100%;
        margin-bottom: 10px;
    }

    .payment-in th::before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        margin-right: 10px;
    }

    .payment-in td::before {
        content: attr(data-label);
        font-weight: normal;
        display: inline-block;
        margin-right: 10px;
    }
}




/*ここからPHPごと(a～)-----------------------------------------------*/



/*announcement_detail.php*/

/* announcement_detail.php 用のスタイル */
.announcement-detail {
    margin: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.announcement-detail .date {
    font-size: 0.9em;
    color: #666;
    margin-top: 10px;
}

@media screen and (max-width: 768px) {
    .announcement-detail {
        margin: 10px;
        padding: 15px;
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 14px; /* フォントサイズを少し小さく */
    }

    .announcement-detail h1, 
    .announcement-detail h2 {
        font-size: 18px; /* タイトルのフォントサイズを小さく */
    }

    .announcement-detail p {
        font-size: 14px; /* 通常のテキストのフォントサイズを小さく */
    }

    .announcement-detail .date {
        font-size: 0.8em;
        color: #666;
        margin-top: 10px;
    }

    .top-in {
        margin: 10px 0;
    }

    .view-all-button-container {
        text-align: center;
    }

    .view-all-button {
        display: inline-block;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        text-decoration: none;
        border-radius: 5px;
        font-size: 14px;
        width: 100%;
        box-sizing: border-box;
    }

    .view-all-button:hover {
        background-color: #0056b3;
    }
}



/*announcements.php*/


.announcement-item {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.announcement-item a {
    text-decoration: none;
    color: #333;
}

.announcement-item a:hover {
    text-decoration: underline;
}

.announcement-item .date {
    font-size: 0.9em;
    color: #666;
}

.announcement-item .pagination {
    margin: 20px 0;
    text-align: center;
}

.announcement-item .pagination a {
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    color: #333;
    margin: 0 5px;
}

.announcement-item .pagination a.active {
    background-color: #ddd;
    color: #666;
}

/*apple-purchase.php*/

/*apple-sell.php*/

    .success-banner {
        background-color: #e6eeff;           /* 淡い青背景 */
        color: #2158f3;                      /* メインカラー文字 */
        border: 2px solid #2158f3;           /* メインカラー枠線 */
        padding: 15px;
        border-radius: 8px;
        font-weight: bold;
        text-align: center;
        font-size: 1.2em;
        display: none;
        margin: 20px auto 0 auto;
        width: fit-content;
        max-width: 90%;
    }
    .error-banner {
        background-color: #ffe6e6;
        color: #d00000;
        border: 2px solid #d00000;
        padding: 15px;
        border-radius: 8px;
        font-weight: bold;
        text-align: center;
        font-size: 1.2em;
        display: none;
        margin: 20px auto 0 auto;
        width: fit-content;
        max-width: 90%;
    }

    /* ✅ 入力欄・セレクトの見た目調整（PC用） */
    textarea,
    input[type="text"],
    select {
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        width: 80%;
        max-width: 500px;
        box-sizing: border-box;
        margin-top: 5px;
    }

    /* ✅ エラーメッセージ表示 */
    #duplicate-check-msg {
        display: block;
        margin-top: 5px;
        font-size: 14px;
        line-height: 1.4;
        color: red;
        white-space: pre-wrap;
        word-break: break-word;
        max-width: 100%;
    }

    /* ✅ main.css の影響を打ち消す（このページのみ） */
    .sell-in td textarea,
    .sell-in td input[type="text"],
    .sell-in td select,
    .sell-in td #duplicate-check-msg {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    /* ✅ スマホ対応 */
    @media screen and (max-width: 600px) {
        textarea,
        input[type="text"],
        select {
            width: 100%;
            max-width: 100%;
        }

        .sell-in table,
        .sell-in table tbody,
        .sell-in table tr,
        .sell-in table th,
        .sell-in table td {
            display: block;
            width: 100%;
        }

        .sell-in table th {
            background-color: #f0f0f0;
            padding: 10px;
            text-align: left;
            font-weight: bold;
        }

        .sell-in table td {
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
    }



/*bank_account_form.php*/



/*charge_history.php*/


/* PCでは通常のテーブル表示 */
@media screen and (min-width: 769px) {

    .card-table1 {
        display: table; /* PCではテーブルを表示 */
        width: 100%;
        border-collapse: collapse;
    }

    .card-table1 th, .card-table1 td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .card-table1 th {
        background-color: #f4f4f4;
    }

    .card-table1 td {
        text-align: left;
    }

    .selling-in .card-table1 th {
        background-color: #2158f336;
    }

    .selling-in .card-table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }

    .selling-in .card-table1 th,
    .selling-in .card-table1 td {
        padding: 10px 6px;
        text-align: left;
        border: 1px solid #ddd;
        vertical-align: middle;
    }

    .selling-in .card-table1 th {
        background-color: #2158f336;
        font-weight: bold;
    }

    .selling-in .card-table1 tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    .selling-in .card-table1 tr:hover {
        background-color: #f1f1f1;
    }

}



/* スマホ */
@media screen and (max-width: 768px) {
    .card-table1 {
        background-color: #e6f7fb75;
        padding: 10px;
        cursor: pointer;
        border-bottom: 1px solid #dddddde3;
    }

    .card-table1 th {
    }

    .card-table1 thead {
        display: none; /* 見出しはスマホでは非表示 */
    }

    .card-table1 tr {
        margin-bottom: 15px;
        border-radius: 5px;
        padding: 10px;
        border-bottom: 1px solid #dddddde3;
    }

    .card-table1 td {
        display: flex;
        justify-content: space-between;
        padding: 8px 10px;
        border: none;
        background-color: #e6f7fb75; /* ← お好きな色に変更OK */
        font-weight: normal;
    }
    
 
}



/*charge_request_form.php*/

/*chat.php*/

/* chat.php 専用のスタイル */
@media screen and (max-width: 768px) {
    .chat-page body {
        font-size: 14px;
        margin: 0;
        padding: 0;
    }

    .chat-page .main-in {
        padding: 10px;
    }

    .chat-page .chat-in {
        width: 100%;
        padding: 10px;
    }

    .chat-page .chat-box {
        height: 60vh;
        overflow-y: scroll;
        padding: 10px;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
    }

    .chat-page .message {
        max-width: 80%;
        word-wrap: break-word;
        margin-bottom: 10px;
    }

    .chat-page .message.right {
        background-color: #0084ff;
        text-align: right;
        margin-left: auto;
    }

    .chat-page .message.left {
        background-color: #f1f1f1;
        text-align: left;
        margin-right: auto;
    }

    .chat-page .send-message {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }

    .chat-page .send-message textarea {
        width: 100%;
        height: 80px;
        padding: 10px;
        border-radius: 5px;
        border: 1px solid #ccc;
        resize: none;
    }

    .chat-page .file-submit-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .chat-page .custom-file-input {
        flex-grow: 1;
    }

    .chat-page .custom-button {
        flex-shrink: 0;
        padding: 10px 20px;
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
}


/*company-profile.php*/

.main2-in {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 40px;
}

.company-info {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

.company-info th, .company-info td {
    padding: 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.company-info th {
    background-color: #f4f4f4;
    font-weight: bold;
    width: 30%;
}

.company-info td {
    background-color: #fff;
    color: #555;
    font-weight: normal;
}

@media screen and (max-width: 480px) {
    /* メインコンテンツの幅を調整 */
    .main2-in {
        padding: 15px;
        margin-bottom: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影を小さくする */
    }

    /* テーブル全体を縦に並べる */
    .company-info {
        width: 100%;
    }

    /* th, tdを二段表示にする */
    .company-info th, .company-info td {
        display: block; /* ブロック表示にする */
        width: 100%; /* 幅を100%にする */
        text-align: left;
        padding: 8px; /* パディングを少し小さくする */
    }

    /* thを他の要素と区別する */
    .company-info th {
        background-color: #f4f4f4;
        font-weight: bold;
        margin-bottom: 0px; /* thと次の要素の間にスペースを作る */
    }

    /* tdに背景色を保持 */
    .company-info td {
        background-color: #fff;
        color: #333;
        margin-bottom: 15px; /* 各行の間に余白を作る */
    }
}

/*contact.php*/

.form-textarea {
    width: 90%; /* 幅を100%に設定 */
    padding: 10px; /* テキストエリア内の余白を追加 */
    margin: 10px 0;
}

/*footer.php*/
/* PC用のフッター */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    position: relative;
    width: 50%; /* 横幅を50％に設定 */
    max-width: 1200px; /* フッターの最大幅を1200pxに設定 */
    min-width: 950px; /* フッターの最小幅を950pxに設定 */
    margin: 0 auto; /* 横の中央揃え */
    box-sizing: border-box; /* パディングやボーダーを含めてサイズを計算 */
}

.footer-content {
    max-width: 1200px;
    margin: auto;
    position: relative;
    z-index: 1; /* フッターコンテンツを擬似要素の前面に配置 */
}

.footer-content p {
    margin: 10px 0;
}

.socials {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
    display: flex;
    justify-content: center;
}

.socials li {
    margin: 0 10px;
}

.socials a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

.socials a:hover {
    color: #d4af37;
}

/* スマホ向けのフッター */
@media screen and (max-width: 480px) {

    footer {
        width: 100%; /* 横幅を100%に設定 */
        min-width: auto; /* 最小幅を自動調整に */
        padding: 10px 0; /* パディングを小さく */
    }

    /* フッターコンテンツのパディングを調整 */
    .footer-content {
        padding: 10px;
    }

    /* ソーシャルリンクを二段にする */
    .socials {
        display: flex;
        flex-wrap: wrap; /* リンクが折り返されるようにする */
        justify-content: center; /* 中央に配置 */
    }

    .socials li {
        width: 50%; /* 各リンクを50%の幅にして二段表示 */
        text-align: center; /* リンクを中央揃えにする */
        margin: 10px 0; /* 上下に余白を追加 */
    }

    /* リンクの文字サイズを少し小さくする */
    .socials a {
        font-size: 14px;
    }

    /* 著作権部分のパディング調整 */
    .footer-content p {
        margin: 5px 0;
        font-size: 12px;
    }
}


/*header-main.php*/
/*ハンバーガーメニュー*/

.header {
    display: flex;
    justify-content: center; /* 中央揃えにする */
    width: 100%;
    max-width: 950px;
    background-color: #2158f3;
    height: 70px;
    overflow: hidden;
    z-index: 20;
    align-items: center;
    top: 0;
    margin: 0 auto; /* 横の中央揃えをしっかり */
    box-sizing: border-box;
}

.header-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 930px;
    margin: 0 auto;
    position: relative; /* 子要素の位置を制御 */
    justify-content: space-between;
}

.header-menu form button {
    background-color: #6c757d; /* グレーの背景色 */
    color: white; /* テキストの色を白に */
    padding: 5px 10px; /* ボタンのパディングを調整 */
    border: none; /* ボーダーを削除 */
    border-radius: 5px; /* 角を丸くする */
    cursor: pointer; /* ポインターを表示 */
    font-size: 16px; /* テキストのフォントサイズ */
    transition: background-color 0.3s; /* ホバー時の色変更を滑らかに */
}

.header-menu form button:hover {
    background-color: #5a6268; /* ホバー時に少し濃いグレー */
}


/* サイドバーのスタイル（スマホ向け） */
@media screen and (max-width: 768px) {
    #sidebarMenu {
        height: 100%;
        position: fixed;
        z-index: 20;
        width: 80%; /* スマホ向けに幅を広げる */
        top: 60px;
        background-color: #FFF;
        transform: translateX(100%); /* メニューが閉じている状態 */
        transition: transform 250ms ease-in-out;
        box-shadow: 3px 3px 3px 3px rgba(0, 0, 30, .2);
        overflow-y: auto; /* スクロールを許可 */
        right: 0;
    }
    
    .sidebarMenuInner {
        width: 90%; /* スマホ向けに幅を調整 */
        height: auto; /* 高さを auto に設定 */
        margin: 20px;
        padding: 0 10px 20px 10px;
        overflow-y: auto; /* スクロールを許可 */
        max-height: calc(100vh - 60px); /* 画面の高さを考慮 */
    }

    /* テーブルを2段に分ける（スマホ用の表示） */
    table {
        width: 100%;
        border-collapse: collapse;
    }

    /* テーブルのセルを2段にするためのスタイル */
    table th, table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 10px;
        border-bottom: 1px solid #ddd;
    }

    /* 2列に分けて表示（横に並ばせない） */
    table th {
        font-weight: bold;
        background-color: #f2f2f2;
    }

    table td:before {
        content: attr(data-label); /* 見出し用のカスタム属性を設定 */
        font-weight: bold;
        display: block;
    }

    /* テーブルの幅が広がりすぎないようにする */
    .table-wrapper {
        overflow-x: auto; /* 横スクロール可能にする */
    }

	.top-0-links a:nth-child(3), /* チャージ */
    .top-0-links a:nth-child(4) { /* 出金 */
        display: none; /* 「チャージ」と「出金」を非表示に */
    }

    .top-0-links {
        justify-content: flex-start;
    }

    .top-0-links a {
        margin: 0 15px; /* リンクの左右の間隔を調整 */
        font-size: 18px; /* フォントサイズを小さく */
    }

    .break-text {
        display: block; /* 携帯表示時にブロック表示で改行させる */
        font-size: 12px; /* フォントサイズを小さくする */
    }

}

/* 通常のPC向けサイドバー */
#sidebarMenu {
    height: 100%;
    position: fixed;
    z-index: 20;
    width: 30%;
    top: 60px;
    background-color: #FFF;
    transform: translateX(110%);
    transition: transform 250ms ease-in-out;
    box-shadow: 3px 3px 3px 3px rgba(0, 0, 30, .2);
    overflow: auto;
    right: 0;
}

.sidebarMenuInner {
    width: 80%;
    height: 100%;
    margin: 30px;
    padding: 0 0 30px 0;
}

/* 通常のPC向けテーブル */
table {
    width: 60%;
    border-collapse: collapse;
}

table th, table td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
    font-weight: bold;
    background-color: #fbfbfb;
}

table th {
    background-color: #f2f2f2;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
 
.openSidebarMenu:checked ~ #sidebarMenu {
    transform: translateX(30%); /* メニューオープン */
}

 input[type=checkbox].openSidebarMenu {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}

/* PC表示のハンバーガーメニュー位置を固定 */
.sidebarIconToggle {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #2158f3;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    cursor: pointer;
}

.header {
    padding-left: 10px;
    padding-right: 10px;
    height: 60px;
}

.logo {
    width: 80px;
}


.sidebarIconToggle {
    right: 10px;
    top: 10px;
    width: 40px;
    height: 50px;
}

/* スマホ用メニューの幅を広げる */
#sidebarMenu {
    width: 80%;
}

.spinner {
    background-color: #ffffff; /* 白色に設定 */
    height: 4px; /* 線の太さ */
    width: 100%; /* 幅を全体に */
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

.horizontal:nth-child(1) {
    top: 0px; /* 上の線の位置 */
}

.horizontal:nth-child(2) {
    top: 10px; /* 真ん中の線の位置 */
}

.horizontal:nth-child(3) {
    top: 20px; /* 下の線の位置 */
}

input[type=checkbox].openSidebarMenu:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}

input[type=checkbox].openSidebarMenu:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 0px;
}

input[type=checkbox].openSidebarMenu:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -12px;
}


input[type="checkbox"].openSidebarMenu:checked ~ .black-bg {
    opacity: .5;
    visibility: visible;/*暗くなる要素表示*/
}

input[type="checkbox"].toggle-checkbox:checked ~ .black-bg2 {
    opacity: .3;
    visibility: visible;/*暗くなる要素表示*/
}

.main {
    height:60px;
}

.sidebarMenuInner ul{list-style: none;padding: 0 0;}
.sidebarMenuInner ul li{
	border-bottom: 1px solid #d0d0d0;
	background-image: url(img/ya.png);
	background-repeat: no-repeat;
	background-position: 95% 50%;
	padding: 20px 0;
}

.sidebarMenuInner ul li a{
	color: #4c5e70;
}

/*header.php*/

.custom-header-bg {
    background-color: #ffe7e7; /* 任意の背景色 */
}

/*index.php*/

.content-wrapper {
    margin: 50px 0; /* 上下に50pxの余白を追加 */
}

/* .appleクラス内の画像にのみ適用 */

/* .appleクラス内の画像とテキストを横並びにする */
.apple {
    text-align: center;
    margin: 0 0 30px 0;
}

.apple .gift-link {
    display: inline-block; /* 横並びにするためにインラインブロック要素にする */
    margin: 0 20px; /* 画像間に余白を追加 */
    text-align: center; /* 画像とテキストを中央揃え */
}

.apple img {
    width: 280px;
    height: 178px;
    display: block;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0px 4px 10px #cccccc;
}

.top-img {
    margin-top: 10px;
    font-weight: bold;
}

.s1{
    background: #f4f4f4;
    display: flex;
    justify-content: center;
}

.s1 p{
    font-weight: bold;
}

.s1 span{
    color: #ea0000;
    font-size: 1.8em;
    margin: 0 5px;
}

.s1 div{   
    margin: 0 30px 0 0;
}

.s2{
	margin: 30px auto 0;
	width: 100%;
	padding: 10px;
	max-width: 900px;
	display: flex;
}

.s2 img{	
    width: 50%;	
    margin: 0 0 30px  0;
}

hr.rod{
    width: 90%; 
    border: 1px solid #e6e6e6;
}

/* テキストにスタイルを追加 */
.top-img {
    margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.4em; /* 少し大きめのフォントサイズ */
    color: #2c3e50; /* ダークブルーの色 */
    letter-spacing: 1px; /* 文字の間隔を広げる */
    text-transform: uppercase; /* 全て大文字にする */
    background: linear-gradient(to right, #2158f3, #002d68); /* 左から右へのグラデーション背景 */
    -webkit-background-clip: text; /* テキストにグラデーションを適用 */
    color: transparent; /* 背景が適用されたテキストを透明にする */
    transition: color 0.3s ease, background-position 0.3s ease; /* マウスオーバー時のエフェクト */
    
}

/* マウスを乗せたときのエフェクト */
.gift-link:hover .top-img {
    background-position: 100% 0;
    color: #002d68; /* マウスオーバー時に赤色に変更 */
}

.decorative-image {
    width: 80%; /* 横幅をさらに広げる */
    max-width: 700px; /* 最大幅を少し大きめに設定 */
    height: 300px; /* 縦幅を調整 */
    object-fit: cover; /* 縦横比を保ちながらサイズを調整 */
    display: block;
    margin: 0 auto 20px auto; /* 上下左右の中央揃え */
}

/* 携帯表示用のスタイル */
@media (max-width: 768px) {
    .decorative-image {
        width: 90%; /* 幅を広くして調整 */
        max-width: 100%; /* 最大幅を100%に */
        height: 200px; /* 縦幅を少し小さめに */
    }
}


.top-card-list {
    max-width: 960px;
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.199);
    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
}

.top-card-list h2 {
    font-size: 1.7rem;
    font-weight: 600;
    color: #222;
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

/* ラベル行（項目名） */
.top-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px; /* 縦を狭く */
    background: #0089ff2b;
    border: 1px solid #d0d0d0;
    font-size: 0.88rem; /* 少し小さめ */
    font-weight: bold;
    color: #444;
    margin-bottom: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); /* 影も控えめに */
    border-radius: 6px;
}

.top-card-header span {
    white-space: nowrap;
}

.top-card-header .type {
    flex: 1.4;
}
.top-card-header .balance,
.top-card-header .price,
.top-card-header .percent,
.top-card-header .stock,
.top-card-header .error {
    flex: 1;
    text-align: right;
}
.top-card-header .buy-column {
    flex: 0.6;
    text-align: center;
}

/* データ行 */
.top-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f9f9f9;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 15px;
    transition: background 0.2s;
}

.top-card-row:hover {
    background: #eef5ff;
}

.top-card-row span {
    white-space: nowrap;
    font-size: 0.95rem;
    color: #333;
}

.top-card-row .type {
    font-weight: bold;
    color: #2158f3;
    flex: 1.4;
}

.top-card-row .balance,
.top-card-row .price,
.top-card-row .percent,
.top-card-row .stock,
.top-card-row .error {
    text-align: right;
    flex: 1;
}

.top-card-row .price {
    color: #e53935;
    font-weight: 600;
}

/* 購入ボタン */
.top-card-row .buy-button {
    flex-shrink: 0;
    background-color: #2158f3;
    color: white;
    padding: 5px 12px;
    border-radius: 5px;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s;
    min-width: 55px;
    margin-left: 15px;
    box-shadow: none;
    text-align: center;
}

.top-card-row .buy-button:hover {
    background-color: #003cb3;
}

/* 「すべて見る」ボタン */
.view-all-button-container {
    text-align: center;
    margin-top: 30px;
}

.view-all-button {
    background-color: #fff;
    border: 1px solid #ccc;
    color: #2158f3;
    padding: 8px 22px;
    border-radius: 25px;
    font-weight: bold;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}

.view-all-button:hover {
    background-color: #f0f0f0;
    color: #003cb3;
}

/* スマホ対応 */

@media screen and (max-width: 768px) {
  .top-card-row .balance,
  .top-card-row .price,
  .top-card-row .percent,
  .top-card-row .stock,
  .top-card-row .error {
    text-align: left;
  }

  .top-card-header {
    display: none;
  }

  .top-card-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.205);
  }

  .top-card-row span {
    width: 100%;
    font-size: 0.95rem;
    padding: 1px 0;
    color: #333;
  }

  .top-card-row .type {
    font-weight: bold;
    font-size: 1rem;
    color: #2158f3;
    margin-bottom: 6px;
  }

  .top-card-row .balance::before {
    content: "額面：";
    font-weight: bold;
    color: #666;
  }

  .top-card-row .price::before {
    content: "販売価格：";
    font-weight: bold;
    color: #666;
  }

  .top-card-row .percent::before {
    content: "販売率：";
    font-weight: bold;
    color: #666;
  }

  .top-card-row .stock::before {
    content: "在庫数：";
    font-weight: bold;
    color: #666;
  }

  .top-card-row .error::before {
    content: "エラー：";
    font-weight: bold;
    color: #666;
  }

  .top-card-row .buy-button {
    display: block;
    margin: 12px auto 0;
    padding: 6px 18px;
    font-size: 0.9rem;
    background-color: #ef974b;
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    width: 80%;
    max-width: 140px;
  }
}




.top-news {
    max-width: 960px;
    margin: 40px auto;
    padding: 20px 30px;
    background: #f5f7fa;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
}

.top-news h2 {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.top-news ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.top-news li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.top-news li a {
    color: #2158f3;
    text-decoration: none;
    flex-grow: 1;
}

.top-news li a:hover {
    text-decoration: underline;
}

.news-date {
    font-size: 0.85rem;
    color: #888;
    margin-left: 10px;
    white-space: nowrap;
}

.news-more {
    text-align: right;
    margin-top: 10px;
}

.news-more a {
    font-size: 0.9rem;
    color: #2158f3;
    text-decoration: none;
}

.news-more a:hover {
    text-decoration: underline;
}

.top-news-simple {
  max-width: 960px;
  margin: 40px auto;
  background-color: #ffffff;
  padding: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

.top-news-simple h2 {
  font-size: 1.3rem;         /* 小さく */
  font-weight: 500;          /* やや細め */
  color: #333;
  margin-bottom: 20px;
  padding-left: 0;           /* 左余白なし */
  border-left: none;         /* 青線削除 */
}

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.news-list li {
  border-bottom: 1px solid #ddd;
}

.news-list li a {
  display: flex;
  align-items: center;
  padding: 14px 8px;
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
}

.news-list li a:hover {
  background-color: #f5f5f5;
}

.news-date {
  width: 100px;
  color: #666;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.news-title {
  margin-left: 20px;
  font-size: 0.95rem;
}

.no-news {
  padding: 16px;
  text-align: center;
  color: #888;
  font-size: 0.95rem;
}


/* モバイル対応 */
@media (max-width: 600px) {
  .news-list li a {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .news-date {
    width: auto;
  }

  .news-title {
    margin-left: 0;
  }
}


/*inquiry_list.php*/

/*login.php*/

.all-in-log{
	width: 100%;
	max-width: 420px;
	background: white;
	box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
	border-radius: 10px;
	padding: 20px 25px;
	margin: 30px auto;
}

.all-in-log .form-group{
	display: flex;
	flex-direction: column;
	align-items: stretch;
	border: none;
	margin: 0 0 10px 0;
}

.login-form .input-wrapper input {
    padding: 10px;
    background: #f5f5f5;
    border: none;
    width: 100%;
}

.all-in-log h2.ti{
	font-size: 20px;
	margin: 0 0 20px 0;
}

.all-in-log input[type="submit"] {
    padding: 10px 15px;
    border-radius: 5px;
    border: none;
    background: #4a5d6d;
    color: white;
    font-size: 18px;
    letter-spacing: 0.1em;
    width: 100%;
    margin: 10px 0 0 0;
}

/*mailresist.php*/

.message1 {
    color: red;
    font-weight: bold;
}

/*main.php*/

/* 全体的な余白とパディングをモバイル向けに調整 */
.announcements {
    margin: 10px; /* モバイルでは余白を少し減らす */
}

.announcement {
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 4px 6px #2158f338; /* 影をつける */
}

/* タイトルと日付の間隔を狭くし、必要に応じて折り返す */
.announcement .titleDate {
    margin-right: 10px; /* モバイルでは間隔を狭める */
}

/* リンクのスタイル */
.announcement a {
    text-decoration: none;
    color: #333;
}

.announcement a:hover {
    text-decoration: underline;
}

/* タイトルと日付のスタイルをモバイル向けに調整 */
.titleDate {
    font-size: 0.85em; /* フォントサイズを少し小さく */
    color: #666;
    white-space: normal; /* モバイルでは必要に応じて折り返す */
}

/* 閉じるボタンの位置とスタイルを調整 */
.close-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    font-size: 14px; /* フォントサイズを少し小さく */
    color: #666;
}

/* スマホ向けのレイアウト調整 */
@media screen and (max-width: 768px) {
    .announcements {
        margin: 5px; /* スマホでの余白をさらに調整 */
    }

    .announcement {
        padding: 8px; /* モバイルではパディングを少し小さく */
    }

    .announcement .titleDate {
        margin-right: 5px; /* 間隔をさらに縮める */
    }

    .titleDate {
        font-size: 0.8em; /* スマホでさらに小さく */
    }

    .close-btn {
        font-size: 12px; /* スマホ向けにさらに小さく */
    }
}

/*password_reset_request.php*/

/*password_reset.php*/

/*payment.php*/

/*privacy-policy.php*/

.policy-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.policy-container h1 {
    font-size: 28px;
    margin-bottom: 20px;
}

.policy-container h2 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.policy-container .policy-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.policy-container ul {
    list-style: none;
    padding-left: 0;
}

.policy-container ul li {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

.policy-container .section-border {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 20px;
}

/*purchased.php*/

/*selling_now.php*/

/* editModalのスタイル */
/* モーダル全体のスタイル */
#editModal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 背景を暗く */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* モーダルの中身にパディングを追加 */
#editModal .modal-content {
    background-color: #fff;
    padding: 30px 20px; /* 上下に30px、左右に20pxのパディング */
    border-radius: 5px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
    width: 50%; /* 幅を50%に */
    max-width: 600px; /* 最大幅を600pxに制限 */
}

/* 各フォーム要素の間隔を調整 */
#editModal label {
    display: block;
    margin-bottom: 8px; /* 各ラベルと入力フィールドの間にスペースを追加 */
    font-weight: bold; /* ラベルを見やすくするために太字にする */
}

#editModal input[type="text"],
#editModal input[type="number"] {
    width: 100%; /* 入力フィールドの幅を100%に */
    padding: 10px; /* 入力フィールドに内側の余白を追加 */
    margin-bottom: 20px; /* フォーム要素ごとの間隔を広くする */
    border: 1px solid #ccc; /* 境界線をつける */
    border-radius: 4px; /* 角を少し丸くする */
    box-sizing: border-box; /* パディングを含む幅設定 */
}

/* 閉じるボタンのスタイル */
#editModal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

#editModal .close:hover,
#editModal .close:focus {
    color: black;
    text-decoration: none;
}


/*terms.php*/
/* terms.php 専用のスタイル */
.terms-container {
    width: 96%;
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.terms-container h1 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
}

.terms-container h2 {
    font-size: 18px;
    margin-bottom: 15px;
    color: #333;
}

.terms-container .policy-text {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.terms-container ul {
    list-style: none;
    padding-left: 0;
}

.terms-container ul li {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

.terms-container .section-border {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 20px;
}

.terms-container .policy-container {
    max-width: 800px;
    margin: 0 auto;
    overflow-y: auto;
}

/* 横スクロールを無効にする */
html, body {
    overflow-x: hidden;
}


/*tokushoho.php*/

/* 特定商取引法ページ専用のCSS */
.tokushoho-section {
    margin-bottom: 20px;
}

.tokushoho-heading {
    font-size: 18px;
    color: #474747;
    margin-bottom: 10px;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

.tokushoho-text {
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.tokushoho-text + .tokushoho-text {
    margin-top: 10px;
}

/*user-statuses.php*/

/* user-statuses.php の入力フィールドを整える */
.all-in .form-group input[type="text"],
.all-in .form-group input[type="email"],
.all-in .form-group input[type="tel"],
.all-in .form-group input[type="number"],
.all-in .form-group input[type="password"],
.all-in .form-group select,
.all-in .form-group textarea {
    width: 100%;
    max-width: 400px;
    padding: 10px;
    box-sizing: border-box;
}


@media screen and (max-width: 768px) {
  .all-in .form-group input,
  .all-in .form-group select,
  .all-in .form-group textarea {
    width: 100%;
    max-width: 100%;
  }
}


    .corporate-link-box {
    background-color: #f7f9ff;
    border: 1px solid #d0dffe;
    padding: 6px 6px;
    border-radius: 12px;
    margin: 24px auto;
    max-width: 520px;
    box-shadow: 0 3px 8px rgb(8 14 93 / 29%);
    text-align: center;
    }

    .corporate-link-box p {
    margin-bottom: 16px;
    font-size: 1.1em;
    color: #333;
    }

    .corporate-link-box a {
    display: inline-block;
    background-color: #2158f3;
    color: #fff;
    font-weight: bold;
    padding: 9px 6px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    }

    .corporate-link-box a:hover {
    background-color: #1748cc;
    }

    @media screen and (max-width: 768px) {
    .corporate-link-box {
        margin: 16px 12px;
        padding: 16px;
    }

    .corporate-link-box p {
        font-size: 1.1em;
    }

    .corporate-link-box a {
        display: block;
        width: 100%;
        padding: 14px;
        font-size: 1.15em;
    }
    }



/*modal*/
.modal {
    display: none; 
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* 携帯用のモーダルスタイル */
@media screen and (max-width: 768px) {
    .modal-content {
        width: 90% !important; /* 横幅を90%に設定 */
        height: auto !important; /* 高さをコンテンツに応じて自動調整 */
        margin: 5% auto; /* 上下の余白を少し減らす */
        padding: 10px; /* パディングを少し減らす */
        max-height: 80vh; /* 画面高さの80%までに制限 */
        overflow-y: hidden; /* 縦スクロール不可 */
        box-sizing: border-box;
    }

    .modal {
        display: flex;
        justify-content: center;
        align-items: center; /* モーダルを画面中央に配置 */
        overflow-y: auto; /* モーダル全体で縦スクロールを許可 */
    }

    .modal-content::-webkit-scrollbar {
        width: 8px; /* スクロールバーの幅 */
    }

    .modal-content::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2); /* スクロールバーの色 */
        border-radius: 4px;
    }

    #terms-modal {
        display: none; /* 必ず初期状態で非表示に */
    }

}

/*withdrawal_history.php*/