/* ■■■■■■■■ ベース ■■■■■■■■ */
        ul {
            margin-left: 0;
            padding-left: 0; /* 必要に応じてパディングもリセット */
        }
        body {
            margin: 0;
            padding: 0;
            /* height: 100vh; 　背景にスクロールバーが出るので*/
            background-image: url('../../img/background_all.png');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            font-family: Arial, sans-serif;
            color: #ffffff;
        }
        header, footer {
            background-color: transparent;
            color: white;
            text-align: center;
            padding: 5px 0;
            height: 7%;
            display: flex;
            align-items: center; /* 垂直方向に中央揃え */
            justify-content: center; /* 水平方向に中央揃え */
        }
        button {
            display: block;
            margin: 0.25vw auto; /*アップロードタイプ切り替えボタンの文字からどこまでボタンを広げるか*/
            padding: 0.3vw 0.5vw;
            background-color: #3bb88a7c;
            color: rgb(148, 250, 155);
            border: none;
            cursor: pointer;
            border-radius: 3px;
            /*font-size: 1vw; */
        }
        button:hover {
            background-color: #3b48ff;
        }
        h1 {
            font-style: normal;
            font-size: 2.0vw;
            letter-spacing: 0.1vw;
            margin-top: 0.25vw;
            margin-bottom: 0.25vw;
            margin-left: 29vw;   /*まず下のフレームのメニュー部分で８ｖｗ　さらに、右のボタンが入っている箱が２１ｖｗ*/
            color: #cf5959;
        }
        h2 {
            font-style: normal;
            font-size: 1.5vw;
            letter-spacing: 0.075vw;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw; 
            align-self: center;
        }
        h3 {
            font-style: normal;
            font-size: 1.2vw;
            letter-spacing: 0.06vw;
            margin-top: 0.06vw;
            margin-bottom: 0.06vw;
        }
        h5 {
            font-style: normal;
            font-size: 1.5vw;
            letter-spacing: 0.075vw;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw; 
            align-self: left;
        }


        .select {
            font-size: 1vw;
        }
        select {
            display: block;
            min-height: 2.2em;
            padding: 0.35em 1.9em 0.35em 0.65em;
            border: 1px solid rgba(255, 255, 255, 0.24);
            border-radius: 4px;
            background-color: rgba(255, 255, 255, 0.08);
            color: #ffffff;
            line-height: 1.35;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            background-image:
                linear-gradient(45deg, transparent 50%, currentColor 50%),
                linear-gradient(135deg, currentColor 50%, transparent 50%);
            background-position:
                calc(100% - 1.0em) 50%,
                calc(100% - 0.7em) 50%;
            background-size: 0.38em 0.38em, 0.38em 0.38em;
            background-repeat: no-repeat;
        }
        select:hover,
        select:focus,
        select:active {
            background-color: #88ff98;
            color: #283027;
            border-color: #88ff98;
            outline: none;
            box-shadow: 0 0 0 2px rgba(136, 255, 152, 0.2);
        }
        select option {
            color: #ffffff;
            background-color: #233127;
            font-size: inherit;
        }
        select::-ms-expand {
            display: none;
        }
        .center {
            text-align: center;
        }
    /* スクロールバーの全体の幅と高さを設定 */
        ::-webkit-scrollbar {
            width: 14px; /* 縦スクロールバーの幅 */
            height: 14px; /* 横スクロールバーの高さ */
        }
    /* スクロールバーのトラック（背景）を設定 */
        ::-webkit-scrollbar-track {
            background: #1e1e1e; /* ダークカラーの背景 */
            border-radius: 10px; /* 角を丸くする */
        }
    /* スクロールバーのハンドル（動く部分）を設定 */
        ::-webkit-scrollbar-thumb {
            background: #4a4a4a; /* ダークグレーのハンドル */
            border-radius: 10px; /* 角を丸くする */
            border: 3px solid #1e1e1e; /* トラックとの境界線 */
        }
    /* スクロールバーのハンドルにホバーした時のスタイル */
        ::-webkit-scrollbar-thumb:hover {
            background: #6a6a6a; /* ホバー時の色 */
        }

    /* Firefox用のスクロールバースタイル */
        * {
            scrollbar-width: thin; /* スクロールバーの幅を細くする */
            scrollbar-color: #4a4a4a #1e1e1e; /* ハンドルとトラックの色 */
        }

/* ■■■■■■■■■■■■■■■■ メインパネル ■■■■■■■■■■■■■■■■ */
    /*外周以外を暗くするためのパネルの設定*/
        .main-panel {
            background-color: rgba(11, 0, 0, 0.70); /* 黒い板を乗算効果で表現 */
            border-radius: 10px; /* 角を丸める */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 軽い影を追加 */
            padding: 2vw; /* 内側のパディング */
            box-sizing: border-box; /* パディングを含めてサイズを計算 */
            /* height: calc(100vh - 8vw); 上下の余白を差し引いた高さ */
            /* width: calc(100vw - 8vw - var(--scrollbar-width, 17px)); 左右の余白とスクロールバーの幅を差し引いた幅 */
            overflow-y: hidden; /* 縦方向のスクロールバーを非表示 */
            overflow-x: hidden; /* 横方向のスクロールバーを非表示 */
            position: absolute; /* 要素を絶対位置に設定 */
            top: 1vw; /* 上に4vwの隙間 */
            left: 1vw; /* 左に4vwの隙間 */
            right: 1vw; /* 右に4vwの隙間 */
            bottom: 1vw; /* 下に4vwの隙間 */
            margin: auto; /* 中央揃え */
        }
    /* パネルの設定のための数値の定義　スクロールバーの幅をカスタムプロパティとして定義 */
        :root {
            --scrollbar-width: 17px; /* 標準的なスクロールバーの幅（ブラウザによって異なる） */
        }



    /*言語スイッチ*/
        .language-toggle {
            background-color: #4CAF50; /* 緑色の背景 */
            border: none;
            color: white;
            padding: 15px 32px;
            text-align: center;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            font-size: 1vw;
            margin: 4px 2px;
            cursor: pointer;
            transition-duration: 0.4s;
        }

        .language-toggle:hover {
            background-color: white;
            color: black;
        }


























/* ■■■■■■■■ メインコンテナ（section-a,b,cが入っている） ■■■■■■■■ */
    /*３分割パネル*/
        .container {
            display: flex;
            width: 100%;
            height: 93%; /* ヘッダーとフッターの高さを考慮 */
            /*height: calc(100vh - 60px); /* ヘッダーとフッターの高さを考慮 */
            /*padding: 0 10px; /* オーバーフロー防止用パディング　これを消したら左側もちゃんと詰まった　これがあると一番外側の白線の外側に空間ができる */
            flex-grow: 1; /* 追加 */
        }
/* ■■■■■■■■ section 共通 ■■■■■■■■ */
    /* section-a と section-c に適用するスタイル */
        .section-a, .section-b, .section-c, .section-a-top, .section-a-bottom {
            border: 1px solid #ddd; /* 白い枠線 */
            background-color: transparent; /* 背景色を透明にする */
        }
        .section-a, .section-b, .section-c {
            border: 1px solid #ddd;
            background-color: transparent;
            margin: 0vw;
            padding: 0px; /* セクション内側に余白 */
        }


/* ■■■■■■■■■■■■■■■■ section a ■■■■■■■■■■■■■■■■ */
        .section-a {
            display: flex; /* 要素をフレックスコンテナとして設定 これによって、子要素のレイアウトを柔軟に制御できる*/
            flex-direction: column; /* フレックスコンテナ内の子要素を縦方向に配置する */
            align-items: center; /* フレックスコンテナ内の子要素を水平方向に中央ぞろえ */
            justify-content: space-between; /* フレックス内の子要素を均等間隔で配置する */
            box-sizing: border-box; /*要素の幅と高さがコンテンツ、パディング、ボーダーを含めることを指定*/
            width: 10vw;
        }
    /* ■■■■ パネル A メニュー部分 ■■■■ */
        main {
            padding: 0px;
            margin: 0;
            background-color: rgba(255, 255, 255, 0);
            box-sizing: border-box; /* パディングとボーダーを含めてサイズ計算 */
            width: 100%;
            height: 100%;
            display: flex; /* 追加 */
            flex-direction: column; /* 追加 */
        }
        .section-a-top, .section-a-bottom {
            /*width: 100%;  子要素の幅をコンテナに合わせる 内側の箱も外にくっついたり、padding含めて100%なので飛び出したりする */
            text-align: center; /* テキストを中央に配置 */
            padding: 0.25vw; /* 内側のパディング（必要に応じて調整） */
            box-sizing: border-box; /* パディングとボーダーを含めてサイズ計算 */
            margin: 1vw;
            width: 8vw;
        }
        .section-a-top {
            text-align: center;
            box-sizing: border-box;
            flex-grow: 1; /* 上部セクションが可用スペースを占有 */
            margin-bottom: 0.5vw;
        }
        .section-a-bottom {
            text-align: center;
            box-sizing: border-box;
            flex-shrink: 0;
            margin-top: 0.5vw; 

        }
    /* ■■■■ メニューのスタイル ■■■■ */
        .section-a nav ul {
            list-style-type: none; /* デフォルトの箇条書きスタイルを消す */
            padding: 0;
            margin: 0;
            align-items: center;
            /*display: flex; /* 水平に並べる */
            justify-content: space-around; /* 項目を均等に配置 */
            background-color: #333; /* 背景色 */
            gap: 3vw;
        }
    /* ■■■■ メニューの各項目のスタイル ■■■■ */
        .section-a nav ul li {
            flex: 1; /* 各項目を等しく伸ばす */
            height: 4vh;
            display: flex; /* フレックスボックスを使用 */
            align-items: center; /* 垂直方向に中央揃え */
            justify-content: center; /* 水平方向に中央揃え */
        }
    /* ■■■■ メニューの各リンクのスタイル ■■■■ */
        .section-a nav ul li a {
            display: flex; /* フレックスボックスを使用 */
            align-items: center; /* 垂直方向に中央揃え */
            justify-content: center; /* 水平方向に中央揃え */
            padding: 0px;
            color: white; /* テキストの色 */
            font-size: clamp(10px, 1vw, 20px); /* 最小フォントサイズ12px、通常1vw、最大18px */
                    text-align: center;
            text-decoration: none; /* 下線を消す */
            transition: background-color 0.2s; /* 背景色のホバー時変更 */
            height: 100%; /* リンクの高さを親要素に合わせる */
            width: 100%; /* リンクの幅を親要素に合わせる */
        }
        /* ■■■■ マウスが乗っているメニューの色 ■■■■ */
        .section-a nav ul li a:hover {
            background-color: #f0773f; /* ホバー時の背景色 */    
            /*background-color: #555; /* ホバー時の背景色 */
        }
        /* ■■■■ 選択中のメニューの色 ■■■■ */
        .section-a nav ul li a.active-menu {
            background-color: #cf5959; /* アクティブなメニューの背景色 */
        }

/* ■■■■■■■■■■■■■■■■ section b ■■■■■■■■■■■■■■■■ */
        .section-b {
            display: flex;
            flex-grow: 1; /*は、フレックスコンテナ内の子要素が利用可能なスペースを均等に占めるように指定します。*/
            flex-direction: column;
            box-sizing: border-box;
            min-height: 0;
            margin-left: 1vw; /* 左の余白 */
            margin-right: 1vw; /* 右の余白 */
            overflow-x: auto; /* もしくは overflow-x: auto; */
            justify-content: center; /* 垂直方向で中央に配置 */
            /*align-items: center; /* 横方向でも中央に配置 */
            /*height: 100vh; /* 全体の高さに対して中央配置を適用 */
        }
        .section-b-top, .section-b-middle, .section-b-bottom {
            /*display: flex; */
            flex-direction: column;
            justify-content: space-around;
            /*margin: 5px 0;*/
            align-items: center;
            justify-content: center;
            height: 100%;
            border: 1px solid #ddd; /* 白い枠線 */
            margin-left: 1vw;
            margin-right: 1vw;
            box-sizing: border-box; /* パディングとボーダーを含めてサイズ計算 */
        }
        .section-b-top {
            margin: 0;
            flex: 6; 
            padding: 0;
            border: 1px solid #dddddd00;
            display: flex;
            flex-wrap: nowrap; /* 折り返しを許可 */
            overflow-x: auto; /* 横スクロールを許可 */
            align-items: center; /* 要素を中段揃えにする */
            justify-content: center; /* 中央揃えにする */
        }
        .section-b-middle {
            display: flex;
            flex-direction: row; /* 合計金額の表示 中段は横並び */
            align-items: center; /* 要素を中段揃えにする */
            flex: 0.5;
            margin-top: 0.5vw;
            margin-bottom: 0.5vw;
            padding: 0.2vw;
            }
        .section-b-bottom {
            flex: 3.5;
            margin-top: 0.5vw; 
            margin-bottom:1vw;
            /*overflow: auto;*/
        }
        .botton-submit{
            margin: 40px;
        }