body {
    font-family: "Lucida Grande", Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo, Osaka, "黒体", "simhei", "맑은 고딕", "Malgun Gothic",
    "Lucida Sans Unicode", "Segoe UI", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    overflow: auto;
    margin: auto;
}

.report-base {
    container-name: report-body;
    container-type: inline-size;
}

.report {
    padding: 25px;
    width: fit-content;
    width: 1024px;
    margin: auto;
    position: relative;
    background-color: #F6F5F1;
    box-sizing: border-box;
    border: 4px solid #736950;
    outline: 4px solid #736950;
    outline-offset: -14px;
    font-size: 14px;
}

#grid-1,
#grid-2,
#grid-3,
#grid-4,
#grid-2-1 {
    display: grid;
}

/**
 * 1024px以上の画面サイズに対するスタイル
 * 画面サイズが1024px以上の場合、グリッドレイアウトを適用
 */
@container report-body (min-width: 1024px) {
    #grid-2 {
        grid-template-areas:
            "grid-2-1 grid-2-1"
            "grid-2-2 SensorBasedDepthMap"
            "CapturedServerTime grid-2-5"
            "issuerNote grid-2-5";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
    }

    /* SensorBasedDepthMapが非表示の時 */
    #grid-2:not(:has(#SensorBasedDepthMap:not([style*="display: none"]))) {
        grid-template-areas:
            "grid-2-1 grid-2-1"
            "grid-2-2 grid-2-5"
            "CapturedServerTime ."
            "issuerNote .";
    }

    /* SensorBasedDepthMapとgrid-2-5が非表示の場合 */
    #grid-2:not(:has(#SensorBasedDepthMap:not([style*="display: none"]))):not(:has(#grid-2-5:not([style*="display: none"]))) {
        grid-template-areas:
            "grid-2-1"
            "grid-2-2"
            "CapturedServerTime"
            "issuerNote";
        grid-template-columns: 1fr;
    }

    .header {
        word-wrap: break-word;
    }

    #grid-1.header .title.center-element {
        grid-area: title;
        justify-self: center;
        width: 964.24px;
    }

    .title {
        padding: 24px 0 0;
    }

    .title .title-image {
        width: 100%;
        height: 30px;
    }

    .body-container {
        width: 100%;
        gap: 5px 10px;
    }

    .body-area {
        display: flex;
        gap: 20px;
        flex-direction: column;
        width: 964.24px;
    }

    #grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .video-item-container {
        min-height: 370px;
    }

    .video-item-container .item-name-area {
        padding: 10px 0;
        gap: 10px;
    }

    .video-item-container .item-name-area .left-video {
        width: 428px;
        gap: 5px;
    }

    .video-item-container .item-name-area .item-name {
        font-size: 20px;
    }

    .video-item-container .item-name-area .item-name .verified-title {
        height: 27px;
        padding: 2px 0;
    }

    .video-item-container .play-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 85px;
        height: 85px;
        cursor: pointer;
        z-index: 2;
    }

    .video-item-container .video-area {
        width: 428px;
    }

    .video-item-container .text-slow-and-quick {
        font-size: 14.16px;
    }

    .slow-and-quick {
        padding: 0 7.08px;
        margin-top: 5px;
        border: 1.01px solid #BFBFBF;
        align-items: center;
        display: flex;
        box-sizing: border-box;
        gap: 3.04px;
        height: 36.42px;

        .icon {
            width: 30.35px;
            height: 20.24px;
        }
    }

    .sensor-based-depth-map-title-area {
        height: 43px;
        box-sizing: border-box;
    }

    #grid-3 .item-name {
        min-width: 210px;
        padding-right: 10px;
    }

    #CapturedServerTime .item-value-element,
    #grid-3 .item-value-element{
        width: 100%;
    }

    #grid-3 .item-value,
    #CapturedServerTime .item-value,
    #issuerNote .item-value {
        width: 100%;
        word-break: break-all;
    }

    #grid-3 .border-element {
        min-height: 40px;
        box-sizing: border-box;
    }

    .capture-server-time {
        height: 52px;
        box-sizing: border-box;
        gap: 10px;
    }

    #CapturedServerTime, #issuerNote, #grid-2-5 {
        margin-top: 5px;
        width: 468px;
    }

    .border-element {
        display: flex;
        align-items: center;
        background-color: #FFFFFF;
        border: 1px solid var(--2, #D6D6D6);
        position: relative;
        padding: 10px 20px;
    }

    .header-icon-description {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 5px;
        height: 20px;
    }

    .header-camera-icon-description {
        display: flex;
        justify-content: flex-end;
        white-space: pre-line;
        font-size: 12px;
        color: #6F6F6F;
        font-family: Arial;
        font-weight: 400;
        line-height: 100%;
        height: 14px;
    }

    #SensorBasedDepthMap, #grid-2-5 {
        margin-right: 5px;
        margin-left: 5px;
    }

    #SensorBasedDepthMap {
        justify-items: center;
    }

    .video-item-container .verification-area {
        border: 0.89px solid #BFBFBF;
        width: 423px;
        height: 55px;
        justify-self: center;
        padding: 0 10px 0 6px;
    }

    .video-item-container .depth-img-area {
        width: 439px;
        padding-bottom: 247px;
        justify-self: center;
    }

    .video-item-container .scale {
        height: 16px;
        width: 439px;
    }

    .video-item-container .scale #scale {
        height: 16px;
        min-width: 320px;
    }

    .video-item-container .scale span {
        font-size: 12px;
    }

    .video-item-container .verification-detail .verification {
        font-size: 14.31px;
        margin-top: 6px;
    }

    .video-item-container .verification-detail .verification .icon {
        height: 25px;
    }

    .video-item-container .verification-detail .verification span {
        margin-left: 5px;
    }

    .video-item-container .verification-detail .verification .no-faking {
        margin-left: auto;
        height: 20px;
        width: 20px;
    }

    #grid-2-5 {
        min-height: 179px;
        height: fit-content;
    }

    .grid-element {
        border: 1px solid var(--2, #D6D6D6);
    }

    #grid-2-5 .item-name {
        font-size: 14px;
        width: 100%;
    }

    #title_camera_signature {
        max-width: 120px;
        overflow-wrap: break-word;
    }

    /* Camera signature */
    .camera-signature {
        width: 191px;
        box-sizing: border-box;
        padding: 15px 10px;
        display: flex;
        flex-direction: column;
    }

    .camera-signature .item-name {
        width: 112.75px;
        padding-left: 6px;
    }

    .result-icon-container {
        align-items: center;
        min-height: 50px;
    }

    /* 3D detection */
    .detection-3d {
        width: 276px;
        box-sizing: border-box;
        padding: 10px;
    }

    .detection-3d .item-name-area {
        height: 26px;
    }

    .result-3d-detection-container {
        display: flex;
        align-items: center;
        gap: 20px;
        min-height: 129px;
    }

    .pie-chart {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: 28px;
        position: relative;
    }

    .pie-chart-center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 50px;
        height: 50px;
        background: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .pie-chart-label {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 14px;
        transform: translate(-50%, -50%);
        color: #222;
        pointer-events: none;
        z-index: 2;
        font-family: Noto Sans JP;
        font-weight: 400;
        font-size: 12px;
        line-height: 100%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chart-description {
        width: 113px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        align-self: center;
    }

    .chart-description-row {
        display: flex;
        align-items: center;
    }

    .chart-color-box {
        display: inline-block;
        width: 20px;
        height: 10px;
        margin-right: 4px;
        flex-shrink: 0;
    }

    .chart-description-label {
        font-size: 10px;
    }

    /* Summary text */
    .summary_text_area {
        padding: 16px 16px 0 16px;
    }

    #title_summary_text {
        font-size: 16px;
    }
    
    #issuerNote .item-name {
        font-size: 16px;
        height: 18px;
    }

    .summary-text {
        font-size: 16px;
        -webkit-line-clamp: 5;
    }

    .camera-icon-svg {
        width: 20px;
        height: 20px;
    }

    .tooltip {
        padding-left: 5px;
    }

    /* 隣接する要素の境界線の重複を防ぐ（2列グリッド用） */
    /* 2列目（偶数番目）の左側境界線を削除 */
    #grid-3 .border-element:nth-child(2n) {
        border-left: none;
    }

    /* 3番目以降（2行目以降）の上部境界線を削除 */
    #grid-3 .border-element:nth-child(n+3) {
        border-top: none;
    }
}

/**
 * SP画面サイズに対するスタイル
 * 画面サイズが1023px以下の場合、グリッドレイアウトを適用
 */
@container report-body (max-width: 1023px) {
    #grid-2 {
        grid-template-areas:
            "grid-2-2"
            "SensorBasedDepthMap"
            "grid-2-5"
            "issuerNote"
            "grid-2-1"
            "CapturedServerTime";
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
    }

    .report {
        width: 384px;
        border: 1px solid #7E7358;
        outline: none;
        padding: 5px;
    }

    .header {
        word-wrap: break-word;
        padding-top: 10px;
        box-sizing: border-box;
    }

    #grid-1.header .title.center-element {
        grid-area: title;
        justify-self: center;
        padding: 20px 0 10px;
        height: 62px;
        box-sizing: border-box;
    }

    #grid-2-1 {
        grid-area: grid-2-1;
        height: 52px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 10px;
    }

    .header-icon-description {
        display: flex;
        align-items: center;
        gap: 5px;
        height: 20px;
        justify-content: center;
    }

    .header-camera-icon-description {
        display: flex;
        justify-content: flex-end;
        white-space: pre-line;
        font-size: 12px;
        color: #6F6F6F;
        font-family: Arial;
        font-weight: 400;
        line-height: 100%;
        height: 28px;
    }

    .logo-menu {
        padding: 0 4px;
    }

    .header-camera-icon-area {
        justify-content: center;
    }

    .title .title-image {
        width: 100%;
        height: 24px;
    }

    .body-container {
        width: 100%;
        gap: 10px 10px;
    }

    .body-area {
        display: flex;
        gap: 20px;
        flex-direction: column;
        width: 376px;
        justify-self: center;
    }

    #grid-2-2 {
        width: 372px;
        height: 304.51px;
        padding: 0 8.16px 8.16px 8.16px;
        border: 0.82px solid #CCCCCC;
    }

    .video-title-area {
        padding: 8.16px 0;
        gap: 8.16px;
        height: 61.27px;
        box-sizing: border-box;
    }

    .video-item-container .item-name-area .item-name {
        font-size: 16.32px;
    }

    .video-item-container .item-name-area .item-name .verified-title {
        height: 22.26px;
        padding: 1.63px 0;
    }

    .video-item-container .play-icon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 69px;
        height: 69px;
        cursor: pointer;
        z-index: 2;
    }

    .left-video {
        width: 349.27px;
        height: 45.34px;
        gap: 4.08px;
    }

    .video-item-container .video-area {
        width: 350.9px;
        height: 230.77px;
    }

    #grid-3 .item-name {
        padding-right: 10px;
    }

    .video-item-container .text-slow-and-quick {
        font-size: 11.56px;
    }

    .slow-and-quick {
        padding: 6.61px 5.78px;
        margin-top: 4.08px;
        border: 0.83px solid #BFBFBF;
        align-items: center;
        display: flex;
        height: 29.72px;
        box-sizing: border-box;
        gap: 2.48px;

        .icon {
            width: 24.77px;
            height: 16.51px;
        }
    }

    #CapturedServerTime {
        display: block;
        margin-top: 10px;
    }

    #grid-3 > * {
        display: block;
    }

    #CapturedServerTime .item-name,
    #grid-3 .item-name {
        display: flex;
        width: auto;
        height: 16px;
        margin: 0px;
        padding: 10px;
        box-sizing: content-box;
        font-weight: bold;
        background-color: #7E735808;
    }

    #CapturedServerTime .item-value-element,
    #grid-3 .item-value-element{
        width: auto;
        min-height: 36px;
        gap: 10px;
        opacity: 1;
        border-top-width: 1px;
        padding-right: 10px;
        padding-left: 10px;
    }

    #CapturedServerTime .item-value,
    #grid-3 .item-value {
        border-top: 1px solid #bfbfbf;
        width: 350px;
        gap: 10px;
        opacity: 1;
        border-top-width: 1px;
        padding-top: 10px;
        padding-bottom: 10px;
        min-height: 16px;
        word-break: break-all;
    }

    #CapturedServerTime .camera-icon-svg,
    #grid-3 .camera-icon-svg {
        position: absolute;
        right: 0px;
        top: 25%;
        transform: translateY(-50%);
        padding-right: 10px;
    }

    #SensorBasedDepthMap {
        justify-self: center;
        width: 373.38px;
        height: 295.19px;
        padding: 0 7.98px 7.98px 7.98px;
        border: 0.8px solid #CCCCCC;
        display: grid;
        justify-items: center;
    }

    .sensor-based-depth-map-title-area {
        padding: 7.98px 0;
        gap: 7.98px;
        height: 33.96px;
        width: 351.84px;
        box-sizing: border-box;
    }

    .sensor-based-depth-map-name {
        height: 18px;
    }

    .tooltip-sensor-based-description {
        padding-left: 3.99px;
    }

    .small-info-circle {
        width: 12.77px;
        height: 12.77px;
    }

    .video-item-container .verification-area {
        border: 0.71px solid #BFBFBF;
        height: 45.48px;
        width: 350.24px;
        justify-self: center;
        box-sizing: border-box;
        margin-top: 1px;
        padding: 0 10px 0 4px;
    }

    .video-item-container .depth-img-area {
        width: 349.45px;
        padding-bottom: 196.26px;
        justify-self: center;
    }

    .video-item-container .scale {
        height: 12.77px;
        justify-self: center;
        width: 349.45px;
    }

    .video-item-container .scale #scale {
        height: 12.77px;
        width: 349.45px;
    }

    .video-item-container .scale span {
        font-size: 8.56px;
    }

    .video-item-container .verification-detail .verification {
        font-size: 11.48px;
    }

    .video-item-container .verification-detail .verification .icon {
        height: 17.83px;
    }

    .video-item-container .verification-detail .verification span {
        margin-left: 3.57px;
    }

    .video-item-container .verification-detail .verification .no-faking {
        margin-left: auto;
        height: 14.27px;
        width: 14.27px;
    }

    #grid-2-5 {
        justify-self: center;
        width: 372.58px;
        min-height: 142.81px;
        height: fit-content;
    }

    .grid-element {
        border: 0.8px solid var(--2, #D6D6D6)
    }

    #grid-2-5 .item-name {
        font-size: 11.17px;
    }

    #title_camera_signature {
        max-width: 102px;
        overflow-wrap: break-word;
    }

    #grid-2-5 .camera-icon-svg {
        width: 15.96px;
        height: 15.96px;
    }

    /* Camera signature */
    .camera-signature {
        width: 152.38px;
        box-sizing: border-box;
        padding: 7.98px 4.08px;
        display: grid;
        grid-template-rows: 43.08px auto;
    }

    .camera-signature .item-name-area {
        height: 28.72px;
        padding: 3.99px 0 11.97px 0;
        box-sizing: border-box;
        gap: 3.99px;
        justify-content: center;
    }

    .camera-signature .item-name {
        width: 112.75px;
    }

    .result-icon-container {
        width: 28.72px;
        height: 41.49px;
        justify-self: center;
        align-items: center;
    }

    .result-icon {
        width: 28.72px;
        height: 28.72px;
    }

    .result-text {
        height: 13px;
        font-family: Arial;
        font-weight: 400;
        font-size: 11.17px;
        line-height: 100%;
        text-align: center;
        vertical-align: middle;
    }

    /* 3D detection */
    .detection-3d {
        width: 220.2px;
        box-sizing: border-box;
        padding: 7.98px;
    }

    .detection-3d .item-name-area {
        height: 20.74px;
        padding: 3.99px 0 11.97px 0;
        box-sizing: border-box;
        gap: 50px;
        justify-content: end;
    }

    .result-3d-detection-container {
        display: flex;
        align-items: center;
        gap: 19.92px;
        min-height: 71.56px;
        width: 204.24px;
        margin-top: 4.79px;
    }

    .pie-chart {
        width: 71.56px;
        height: 71.56px;
        border-radius: 50%;
        flex-shrink: 0;
        margin: 14.37px 0 0 19.92px;
        position: relative;
    }

    .pie-chart-center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 39.89px;
        height: 39.89px;
        background: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    .pie-chart-label {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 36.35px;
        height: 18.62px;
        transform: translate(-50%, -50%);
        color: #222;
        pointer-events: none;
        z-index: 2;
        font-family: Noto Sans JP;
        font-weight: 400;
        font-size: 10px;
        line-height: 100%;
        text-align: center;
        vertical-align: middle;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .chart-description {
        width: 90.15px;
        display: flex;
        flex-direction: column;
        gap: 4.79px;
        align-self: center;
    }

    .chart-description-row {
        display: flex;
        align-items: center;
    }

    .chart-color-box {
        display: inline-block;
        width: 15.96px;
        height: 7.98px;
        margin-right: 4px;
        flex-shrink: 0;
    }

    .chart-description-label {
        font-size: 7.98px;
    }

    /* Summary text */
    .summary_text_area {
        width: 376px;
        min-height: 102.14px;
        padding: 10px;
    }

    #title_summary_text {
        font-size: 14px;
    }

    .summary-text {
        font-size: 14px;
        -webkit-line-clamp: 2;
    }

    .tooltip {
        padding-left: 3.99px;
    }

    #grid-4 {
        width: 374px;
        min-height: 77px;
        height: fit-content;
    }

    .menu-area {
        padding-bottom: 6px;
    }

    .border-element {
        align-items: center;
        background-color: #FFFFFF;
        border: 1px solid var(--2, #D6D6D6);
        position: relative;
        width: 370px;
        min-height: 72px;
        justify-self: center;
    }

    /* 2番目以降上部境界線を削除 */
    #grid-3 .border-element:nth-child(n+2) {
        border-top: none;
    }
}

#grid-2-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#grid-2-1 { grid-area: grid-2-1; }
#grid-2-2 { grid-area: grid-2-2; }
#SensorBasedDepthMap { grid-area: SensorBasedDepthMap; }
#CapturedServerTime { grid-area: CapturedServerTime; }
#issuerNote { grid-area: issuerNote; }
#grid-2-5 { grid-area: grid-2-5; }

#grid-2-2, #CapturedServerTime, #issuerNote {
    justify-self: center;
    margin-left: auto;
    margin-right: auto;
}

/* Header layout */
#grid-1.header {
    grid-template-areas:
        "logo-menu"
        "title";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-items: start;
}

#grid-1.header .logo-menu.left-element {
    grid-area: logo-menu;
    justify-self: start;
    align-items: flex-start;
    margin: 0px;
}

.left-element {
    display: flex;
    text-align: left;
}

.logo-menu {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
}

.logo-image[src=""] {
    display: none;
}

.logo-image {
    max-width: 100%;
    height: auto;
}

.center-element {
    display: grid;
    justify-content: center;
}

.header-camera-icon-area {
    gap: 4px;
    height: 38px;
}

.header-camera-icon {
    height: 20px;
    width: 20px;
}

.header-camera-icon-text {
    font-family: Arial;
    font-weight: 400;
    font-size: 12px;
    line-height: 100%;
    max-width: 265px;
    color: #736950;
}

/* 共通の動画コンテナスタイル */
    .video-item-container {
        width: 468px;
        height: 370px;
        background: #FFFFFF;
        border: 1px solid #CCCCCC;
        padding: 0 10px 0 10px;
        box-sizing: border-box;

        .item-name-area {
            display: flex;
            text-align: center;
            vertical-align: middle;
            justify-content: center;
            align-items: center;

            .item-name {
                font-family: Arial;
                font-weight: 700;
                font-style: Bold;
                line-height: 100%;
                letter-spacing: 0%;
                text-align: center;
                color: #736950;

                .verified-title {
                    background-color: #736950;
                    color: #FFFFFF;
                    box-sizing: border-box;
                    align-items: center;
                    display: flex;
                    justify-content: center;
                }
            }

            .left-video {
                display: flex;
                flex-direction: column;
            }
        }

        .video-container {
            position: relative;
        }

        .text-slow-and-quick {
            font-family: Arial;
            font-weight: 400;
            font-style: Regular;
            line-height: 100%;
            letter-spacing: 0%;
            vertical-align: bottom;
            color: #FF0000;
        }

        .title {
            color: RGB(34, 34, 34);
            font-size: 22px;
            text-align: left;
            min-width: 320px;
            margin: auto;
            height: 60px;
            line-height: 28px;
        }

        /* 署名検証結果 & 3D検証結果 */
        .verification-detail {
            display: table;
            margin: auto;
            width: 100%;

            .verification {
                display: flex;
                align-items: center;
                box-sizing: border-box;
                color: black;
                flex-wrap: wrap;
                text-align: left;
                padding: 0 2px;
                font-family: Arial;
                font-weight: 400;
            }
        }

        .depth-img-area {
            position: relative;
            background: black;
            display: flex;
            justify-content: center;
            align-items: center;

            .depth-canvas {
                position: absolute;
                top: 0;
                left: 50%;
                transform: translateX(-50%);
                display: block;
                max-width: 100%;
                height: 100%;
            }
        }

        .scale {
            position: relative;

            .scale-canvas {
                width: 100%;
                display: block;
            }

            .scale-canvas-retouch-hidden {
                width: 45vw;
            }

            span {
                position: absolute;
                top: 1px;
            }

            .scale-near {
                left: 6px;
                font-weight: bold;
                color: white;
            }

            .scale-far {
                right: 8px;
                font-weight: bold;
                color: white;
            }
        }   

        .seekbar-container {
            width: 100%;
            #seekbarRef3D {
	            width: 100%; /* 親要素に合わせる */
                display: block;
            }
        }
    }

.capture-server-time .item-name {
    min-width: 161px;
}

/* Summary text */
.summary_text_area {
    display: block;
    background-color: #FFFFFF;
    border: 1px solid var(--2, #D6D6D6);
    box-sizing: border-box;
}

#title_summary_text {
    font-family: Arial;
    font-weight: 700;
    font-style: Bold;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.summary-text {
    word-break: break-word;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: -webkit-line-clamp 0.2s;
    margin-top: 10px;
    font-family: Arial;
    font-weight: 400;
    font-style: Regular;
    leading-trim: NONE;
    line-height: 100%;
    letter-spacing: 0%;
}

.summary-text.expanded {
    -webkit-line-clamp: unset;
    max-height: none;
    overflow: visible;
}

.summary-toggle-btn {
    cursor: pointer;
    box-sizing: border-box;
    width: 10px;
    height: 10px;
    border-width: 0px 0px 1px 1px;
    border-style: solid;
    border-color: #D6D6D6;
    transform: rotate(-45deg);
    margin: 5px auto 8px auto;
}

/* Camera signature & 3D detection  */
#grid-2-5 {
    display: flex;
}

#grid-2-5 .item-name-area {
    display: flex;
    align-items: center;
}

#grid-2-5 .item-name {
    display: flex;
    font-family: Arial;
    font-weight: 700;
    font-style: Bold;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #736950;
    justify-content: center;
    align-items: center;
}

.grid-element {
    background-color: #FFFFFF;
}
/* 隣接する要素の境界線の重複を防ぐ */
#grid-2-5 .grid-element:nth-child(n+2) {
    border-left: none;
}

.result-icon-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

.video-js {
    width: 100% !important;
    height: auto !important;
}

.vjs-tech {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

.video-js .vjs-big-play-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.video-js .vjs-loading-spinner {
    display: block !important;
}

/* コントロールバーの要素の順序を変更 */
.video-js .vjs-play-control {
    order: 0;
}

.video-js .vjs-current-time {
    order: 1;
    display: block !important;
    padding-left: 0;
    padding-right: 0;
}

.video-js .vjs-time-divider {
    order: 2;
    display: block !important;
    padding-left: 1px;
    padding-right: 1px;
    min-width: 2px;
}

.video-js .vjs-duration {
    order: 3;
    display: block !important;
    padding-left: 0;
    padding-right: 0;
}

.video-js .vjs-progress-control {
    order: 4;
    flex: 1;
}

.video-js .vjs-volume-panel {
    order: 5;
}

#grid-3 .item-name,
#SensorBasedDepthMap .item-name,
#CapturedServerTime .item-name,
#issuerNote .item-name {
    color: #736950;
    align-items: center;
    display: flex;
}

/* Tooltip styles */
.tooltip {
    position: relative;
    cursor: pointer;
    justify-content: normal;
    /* 下記は枠が被らないようにするため */
    padding-top: 0;
    padding-bottom: 0;
    display: unset;
}

.tooltip-text {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    padding: 5px;
    background: lightgray;
    border-radius: 5px;
    white-space: pre-line;
    bottom: 25px;
    right: 0;
    overflow-wrap: break-word;
    font-size: 10px;
    z-index: 1000;
    width: 200px;
    text-align: left;
    font-weight: normal;
}

.tooltip-sensor-based-description:hover .tooltip-text-sensor-based-description,
.tooltip-sensor-based-description.show-tooltip .tooltip-text-sensor-based-description {
    opacity: 1;
    visibility: visible;
}

.tooltip-c2pa-provenance:hover .tooltip-text-c2pa-provenance,
.tooltip-c2pa-provenance.show-tooltip .tooltip-text-c2pa-provenance {
    opacity: 1;
    visibility: visible;
}

.tooltip-date-created:hover .tooltip-text-date-created,
.tooltip-date-created.show-tooltip .tooltip-text-date-created {
    opacity: 1;
    visibility: visible;
}

.tooltip-capture-server-time:hover .tooltip-text-capture-server-time,
.tooltip-capture-server-time.show-tooltip .tooltip-text-capture-server-time {
    opacity: 1;
    visibility: visible;
}

.tooltip-camera-signature:hover .tooltip-text-camera-signature,
.tooltip-camera-signature.show-tooltip .tooltip-text-camera-signature {
    opacity: 1;
    visibility: visible;
}

.tooltip-3d-detection:hover .tooltip-text-3d-detection,
.tooltip-3d-detection.show-tooltip .tooltip-text-3d-detection {
    opacity: 1;
    visibility: visible;
}

/* Footer layout */
#grid-4 {
    gap: 5px;
}

.issued-by-area {
    overflow-wrap: break-word;
    word-break: break-all;
    justify-content: flex-start;
    height: fit-content;
    min-height: 14px;
    align-items: center;
}

.issued-by {
    min-width: max-content;
    color: #736950;
    display: inline-block;
    font-size: 12px;
    font-family: Arial;
    font-weight: 400;
    font-style: Regular;
    line-height: 100%;
    letter-spacing: 0%;
}
.company-name {
    margin-left: 5px;
    color: #736950;
    font-size: 12px;
}

.small-text-description {
    color: #6f6f6f;
    font-size: 12px;
    font-family: Arial;
    font-weight: 400;
    font-style: Regular;
    line-height: 100%;
    letter-spacing: 0%;
}

.cookie-policy-link-area {
    color: #6f6f6f;
    font-size: 12px;
    height: 14px;
}

.cookie-policy-link {
    color: #6f6f6f;
    font-family: Arial;
    font-weight: 400;
    font-style: Regular;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: right;
    text-decoration: underline;
    text-decoration-style: solid;
    text-decoration-thickness: 0%;
    text-decoration-skip-ink: auto;
}

.right-element {
    display: flex;
    align-items: center;
    justify-content: end;
    text-align: right;
}

.menu-area {
    color: #6f6f6f;
    height: 14px;
}

.language-select {
    font-size: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: #6f6f6f;
    font-family: Arial;
    font-weight: 400;
    font-style: Regular;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
}

.language-select option {
    color: black;
}

[for="language-select"] {
    font-size: 12px;
}