@media screen and (max-width: 768px) {
    #header {
        height: auto;
        padding: 10px 16px;
    }

    #header-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    #logo-block {
        height: 48px;
    }

    #header-controls {
        width: 100%;
        padding-right: 0;
    }

    #search-form,
    #search-form > div {
        width: 100%;
    }

    #search-form input[type="text"] {
        flex: 1;
        width: auto;
    }

    #navi {
        padding: 8px 16px;
    }

    .page-h1-wrap {
        padding: 16px 16px 0;
    }

    .page-body {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .page-sidebar {
        width: 100%;
    }

    .top-featured .swiper-slide {
        height: 200px;
    }

    .content-heading {
        font-size: 22px;
    }

    .content-heading-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* TOPの「都道府県からお城を探す」＋「地図から探す」は縦積みにせず横並びのままにする */
    .content-heading-row--with-heading {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .content-heading-row--with-heading .content-heading {
        flex: 1;
        min-width: 0;
        font-size: 17px;
    }

    .content-heading-row--with-heading .map-link-btn {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 12px;
    }

    #map_box {
        flex-direction: column;
        align-items: stretch;
    }

    #map_canvas {
        height: 320px;
    }

    #map_search {
        flex-direction: column;
    }

    #map_box > img {
        display: none;
    }

    .content-with-aside {
        flex-direction: column;
        align-items: stretch;
    }

    .area-pref-list {
        width: 100%;
    }

    .castle-list {
        grid-template-columns: 1fr;
        gap: 0;
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        margin: 16px 0;
    }

    .castle-list-item {
        border: none;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
    }

    .castle-list-item:last-child {
        border-bottom: none;
    }

    #castle-info {
        grid-template-columns: 1fr;
    }

    #castle-info dt {
        grid-column: 1;
        padding: 10px 0 2px;
        border-bottom: none;
    }

    #castle-info dd {
        grid-column: 1;
        padding: 0 0 10px;
    }

    #footer {
        padding: 16px;
    }

    #foot_box {
        display: block;
        padding: 16px;
    }

    .footer-area-heading {
        padding-top: 12px;
    }

    .footer-area:first-child .footer-area-heading {
        padding-top: 0;
    }

    .confirm-row {
        display: block;
    }

    .confirm-row:last-child {
        min-height: 160px;
    }

    .confirm-label {
        display: block;
        width: 100%;
        border-bottom: 1px solid var(--border);
    }

    .confirm-value {
        width: 100%;
    }

    ul.about-badge-list {
        grid-template-columns: 1fr;
    }
}