@import url('https://fonts.googleapis.com/css2?family=Klee+One&display=swap');

            /* 親要素からtableが飛び出さないようにする処理 */
            /* まず、固定幅テーブルを潰して親幅に合わせる */
            table {
                width: 100% !important;
                /* inline style を上書き */
                max-width: 100%;
                height: auto !important;
                /* inline の height を上書き */
                border-collapse: collapse;
                table-layout: auto;
                /* fixed だと2列が等分され続ける */
            }

            /* 空のセルは消す（列としてカウントさせない）*/
            td:empty,
            th:empty {
                display: none;
                padding: 0;
                border: 0;
                width: 0;
            }

            /* 画像が親要素から飛び出さないようにする処理*/
            img {
                max-width: 100%;
                width: 100%;
                /* 必要なら */
                height: auto !important;
                /* インラインstyle対策 */
                display: block;
            }

            /* ===== Box Navigation ===== */
            :root {
                --accent: #e88945;
                --accent-strong: #cf6f32;
                --accent-soft: #fff0e6;
                /* 同系の薄め背景 */
            }

            /* 見出し帯（添付画像風） */
            .bar-heading {
                /* 幅は親要素に合わせる。ページ全幅で使うなら親を100%に */
                width: 100%;
                background: #3a2e2b;
                /* ダークブラウン */
                color: #fff;
                padding: 5px 14px;
                /* 高さ感はここで調整 */
                position: relative;
                box-sizing: border-box;
                margin: 4em 0 1em;
            }

            /* タイトル文字 */
            .bar-heading__text {
                font-weight: 800;
                letter-spacing: .02em;
                /* 画像の高さ感に近づけるサイズ（可変） */
                font-size: clamp(16px, 2.2vw, 25px);
                color: #fff;
                font-family: "Klee One", cursive;
                font-weight: 400;
                font-style: normal;
            }

            /* 下辺の細い白ライン */
            .bar-heading::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 10px;
                /* 帯の外に少しだけ出すと画像っぽい雰囲気に */
                height: 1px;
                /* ラインの太さ */
                background: #fff;
            }

            /* 任意：ページ端から余白を作りたいとき（例：中央のコンテンツ幅に合わせる） */
            .container .bar-heading {
                border-radius: 0;
            }

            .boxnav {
                display: grid;
                grid-template-columns: 1fr;
                gap: 14px;
                margin: 28px auto;
                grid-auto-rows: max-content;
            }

            @media (min-width: 760px) {
                .boxnav {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 18px;
                }
            }

            .boxnav__item {
                display: grid;
                grid-template-columns: auto 1fr;
                grid-template-rows: auto auto;
                grid-template-areas:
                    "icon title"
                    "icon desc";
                column-gap: 12px;
                row-gap: 4px;

                text-decoration: none;
                background: var(--accent-soft);
                border: 1.5px solid #ffd9c5;
                border-radius: 14px;
                padding: 16px 18px;
                color: #2c2c2c;

                box-shadow: 0 8px 18px rgba(0, 0, 0, .06);
                transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
            }

            .boxnav__item:focus-visible {
                outline: 3px solid rgba(232, 137, 69, .35);
                outline-offset: 3px;
            }

            .boxnav__item:hover {
                transform: translateY(-2px);
                box-shadow: 0 12px 24px rgba(232, 137, 69, .20);
                border-color: var(--accent);
                background: #ffe9da;
                /* ほんの少し濃く */
            }

            .boxnav__icon {
                grid-area: icon;
                width: 44px;
                height: 44px;
                display: grid;
                place-items: center;
                color: var(--accent-strong);
                background: #fff;
                border: 2px solid var(--accent);
                border-radius: 12px;
            }

            .boxnav__title {
                grid-area: title;
                align-self: end;
                font-weight: 800;
                font-size: clamp(1.02rem, 1.8vw, 1.12rem);
                color: var(--accent-strong);
            }

            .boxnav__desc {
                grid-area: desc;
                font-size: .96rem;
                color: #666;
            }

            /* コンパクト表示（とても狭い幅） */
            @media (max-width: 360px) {
                .boxnav__item {
                    grid-template-columns: 1fr;
                    grid-template-areas: "title" "desc" "icon";
                    row-gap: 8px;
                }

                .boxnav__icon {
                    justify-self: start;
                }
            }