/* 左上のナビゲーションメニュー (single.css を使わない /tips でも読めるよう別のファイル) */
@import url("nav_menu.css");

/* body:not(.auth) * {
    margin: 0;
    padding: 0;
} */
 * {
    margin: 0;
    padding: 0;
 }
:root {
    --main-background: linear-gradient(#2c72ff, #99c2bc);
    --blue-background: linear-gradient(#1764ff, #99c2bc);
    --lightblue-background: linear-gradient(#477ff0, #99c2bc);
}
body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family: 'serif';
}
.private_color {
    background-image: linear-gradient(to bottom, #01002ff7, #0e0445eb, #10054bc9, #813220cf);
    color: #e0e4e9e0;
}
button {
    font-family: 'serif';
}
/* button:active {
    background:#ffffff30;
} */
pre {
    font-family: 'serif';
}
#root {
    width: 100%;
    min-height: 100vh;
    background-image: var(--main-background);
}
#sfm_root {
    width: 100%;
    min-width: fit-content;
    min-height: 100vh;
    background-image: var(--main-background);
}
#account_root {
    width: 100%;
    min-width: fit-content;
    min-height: 100vh;
    background-image: var(--main-background);
}
#exclusive_root {
    width: 100%;
    min-width: fit-content;
    min-height: 100vh;
    background-image: var(--main-background);
}
#transit_root {
    width: 100%;
    min-width: fit-content;
    min-height: 100vh;
    background-image: var(--main-background);
}
#preuploader_root {
    width: 100%;
    min-width: fit-content;
    min-height: 100vh;
    background-image: var(--main-background);
}
#utility_tools_root {
    width: 100%;
    min-height: 100vh;
    background-image: var(--main-background);
}
#tips_root {
    width: 100%;
    min-height: 100vh;
    background-image: var(--main-background);
}
#example_root {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    background-image: var(--main-background);
}
#pointcloud_viewer {
    width: 100%;
    min-height: 100%;
    min-width: fit-content;
    background-image: var(--main-background);
}
#license_root {
    width: 100%;
    height: fit-content;
    background-image: var(--main-background);
}
.notation_for_law_root {
    width: 100%;
    height: fit-content;
    min-height: 100vh;
    background-image: var(--main-background);
}
.account_body_wrapper {
    min-height: 72.6vh;
}
.account_body {
    width: 50rem;
    min-width: 15rem;
    height: fit-content;
    /* background-color: #00000033; */
    border: 0.4vh outset #95b1df3b;
    margin: 0 auto;
    margin-top: 5rem;
}
.describe_area {
    display: block;
    width: 100%;
    margin-left: 4rem;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}
.describe_element {
    display: flex;
    width: 75%;
    height: fit-content;
    /* background-color: #ffffff15; */
    border: 0.4vh inset #95b1df3b;
    margin-top: 1.5rem;
    padding: 0.5rem 1.5rem;
}
.describe_data {
    margin-left: 11rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}
.describe_card_number {
    margin-left: 9.6rem;
    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
}
/* /profile Email 欄: 実行完了通知メールの ON/OFF (全 Dataset / Manual Pipeline 共通) */
.notify_email_setting {
    margin-top: 0.6rem;
    font-size: 0.9em;
}
.notify_email_setting label {
    cursor: pointer;
}
.notify_email_setting input[type="checkbox"] {
    margin-right: 0.6rem;
}
.notify_email_note {
    margin: 0.2rem 0 0 0;
    font-size: 0.85em;
    opacity: 0.75;
}
.notify_email_error {
    margin: 0.2rem 0 0 0;
    font-size: 0.85em;
    color: #ff7b7b;
}
.current_month_payment_row {
    display: flex;
    justify-content: space-between;
}
.current_payment_price {
    margin-left: 1.2rem;
}
.payment_link {
    margin-left: 1.8rem;
    border: 0.4vh inset #95b1df3b;
}
/* Register Payment リンクとヘルプアイコンの間隔を 15px にする
   (.tooltip-icon 既定の margin-left: 4px をこのページの並びだけ上書き) */
.payment_link + .tooltip-wrap .tooltip-icon {
    margin-left: 15px;
}
.payment_select_area {
    height: fit-content;
    padding: 0.5rem 1.7rem;
}
.payment_month_select {
    background-color: #5c8bd300;
    border: 0.4vh inset #95b1df3b;
}
.payment_list_area {
    margin-top: 0.5rem;
}
.auth {
    position: relative;
    width: 100%;
    height: 100vh;
    background-image: var(--main-background);
}
.auth_background {
    text-align: center;
    padding-top: 10%;
}
.auth_background button {
    line-height: 0;
    color: #000000;
    font-size: medium;
    padding: 3px 12px;
    background-color: #22222211;
    border: 0.3vh outset #95b1df3b;
    min-width: 7.5rem;
    height: 1.5rem;
}
.auth_background input {
    background-color: #202f332b;
    border: 0.3vh inset #4c84b3a6;
}
/* input:-internal-autofill-selected {
    background-color: #202f332b !important;
    color: #df1a1a !important;
} */
.sfm_warning_content {
    width: 18.5rem;
}
.generic_error_text {
    margin-top: 30px;
    margin-left: 1rem;
} 
.errorlist {
    color: #ff0000;
    font-size: 1.2rem;
    font-weight: bold;
    list-style: none;
}
.error_message {
    color: #ff0000;
    font-weight: bold;
}
header {
    width:100%;
    height: 16%;
}
header p {
    /* padding-top: 1rem; */
    font-size: 1.7rem;
    text-align: center;
    color: #093088;
}
#pointcloud_viewer header p {
    padding-right: 5.5rem;
}
.page_notes {
    font-size: 1.2rem;
    font-weight: bold;
}
footer {
    /* position: relative;
    bottom: 6%; */
    width: 100%;
}
.intro_links_outer {
    display: flex;
    flex-direction: column;
    margin-left: 4.8rem;
    margin-bottom: 1rem;
}
.intro_links {
    margin: 0.2rem 0;
    font-size: 1rem;
    color:#093088;
    width: fit-content;
}
.sample_link {
    font-size: 1rem;
    color:#093088;
}
.sample_getter_link {
    display: block;
    font-size: 1rem;
    border: transparent;
    color: #093088;
    background: #00000000;
    text-decoration: underline;
    margin: 0.3rem 0;
}
#mailto_layout {
    margin: 0 20px;
}
.mailto_link {
    font-size: 1.1rem;
    background-color: #00000000;
    padding: 0% 10% 2% 0%;
    color: #09308899;
}
.subtitle {
    font-size: 1.8rem;
    padding-top: 0px;
    padding-bottom: 1.5rem;
}
.subtitle_adjust {
    margin: 0 0 0 5.3rem;
}
#main_wrapper_layout {
    width: 100%;
    min-height: 71.6vh;
}
.main_wrapper {
    /* flex-direction: column-reverse;  */
    display: flex;
    align-items: flex-start;
    justify-content:center;
}
.main_vertical_layout {
    display: block;
}
.main_ui {
    display: flex;
}
.control_panel_list_title {
    margin-left: 4.8rem;
    margin-bottom: 1.4rem;
}
.launch_spec_expand {
    align-self: flex-start;
    margin-left: 2.4rem;
}
.launch_spec_summary {
    margin-top: 1.4rem;
}
.launch_spec_list {
    width: 12rem;
}
.server_info_list {
    margin-top: 4px;
    width: 22rem;
}
.server_info_row {
    display: flex;
    justify-content: space-between;
}
.server_info_left {

}
.server_info_right {

}
.server_info_text {
    display: flex;
    justify-content: center;
    padding-top: 12px;
}
.usage_area {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    padding-bottom: 1.5rem;
}
.usage_text {
    display: block;
    padding-left: 3.5rem;
}
.usage_row {
    margin: 0.35rem 0;
}
#sfm_root .main_wrapper {
    min-height: 76vh;
}
#canvas_area_layout {
    position: relative;
    margin-right: 1.5vh;
    height: 100%;
}
.canvas_area {
    display: flex;
    align-items: flex-start;
}
#canvas_inner {
    position: relative;
    width: 100%;
    height: 100%;   
}
#control_buttons_div {
    margin-left: 20px;
    height: 25%;
    display: flex;
    align-items: center;
}
.viewer_button_layout {
    margin: 0 auto;
}
#viewer_canvas_layout {
    position: relative;
    margin-left: 5.5rem;
    width: fit-content;
    height: 100%;
}
.empty_three_canvas {
    /* width: 30vw; */
    min-width: 480px;
    height: 50vh;
    margin: auto;
    border: 0.4vh outset #95b1df3b;
}
#pointcloud_viewer #viewer_canvas_layout {
    margin-top:4rem;
}
#target_image {
    max-width: 40vw; 
    max-height: 55vh;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
}
#layered_base_image {
    position: absolute;
    max-width: 40vw; 
    max-height: 55vh;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}
#control_area_layout {
    width: 35%;
    height: 100%;
}
#three_canvas {
    max-width: 40vw;
    max-height: 55vh;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
    border:0.4vh outset #95b1df3b;
}
#pointcloud_viewer #three_canvas {
    max-width: 95vw;
    max-height: 95vw;
    width: 90vh;
    height: 90vh;
    display: block;
    margin: auto;
    border:0.4vh outset #95b1df3b;
}
.three_canvas_button {
    display: flex;
}
.three_viewer_buttons {
    display: flex;
    flex-direction: column;
}
.elevation_buttons {
    display: flex;
    flex-direction: column;
    margin: 10rem 0.3rem 0 auto;
}
.point_size_buttons {
    display: flex;
    flex-direction: column;
}
.elevation_button {
    background-color: #22222219;
    border: 0.2vh outset #95b1df3b;
}
.move_stride_slider {
    display: flex;
    flex-direction: column;
    margin: 5px 0 0 auto;
    background-color: #22222219;
    border: 0.2vh outset #95b1df3b;
    padding: 0.1rem 0.3rem;
}
.move_stride_slider input[type='range'] {
    width: 8.5rem;
}
/* Brightness (明るさと照明の入り切り、viewer_controls.js。/3d_viewer のメッシュ系) のパネル。上の段に
   名前、下の段に明るさのスライダーと照明の入り切り・既定に戻すの 2 つのボタン。見た目と幅は Move stride
   のパネルと同じ (スライダー 4.5rem + 左右の余白 2px ずつ + 間 0.3rem × 2 + ボタン 1.7rem × 2 =
   8.5rem + 4px) */
.brightness_panel {
    display: flex;
    flex-direction: column;
    margin: 5px 0 0 auto;
    background-color: #22222219;
    border: 0.2vh outset #95b1df3b;
    padding: 0.1rem 0.3rem;
}
.brightness_title {
    white-space: nowrap;
    font-size: 0.85rem;
}
.brightness_row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.brightness_row input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 4.5rem;
    margin: 2px;
}
.brightness_button {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.4rem;
    padding: 0;
    border: 1px solid #95b1df3b;
    border-radius: 4px;
    background-color: #22222219;
    color: inherit;
    cursor: pointer;
}
.brightness_button svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: currentColor;
}
/* Keyframes (ユーザーが置いた視点を辿る再生、viewer_controls.js の KeyframeRoutePanel) のパネル。
   上から名前 (キーフレームの数。右端の余白にファイルを開く・ダウンロード)、Add view・編集・全部消す、
   向き・速さ・再生 / 一時停止・ループ、シークバー (その段はシークバーだけ)。見た目と幅は Brightness の
   パネルと同じ (中身の幅 8.5rem + 4px)。ボタンが 3 つ並ぶ段に速さのスライダーの長さを残すため、ボタンは
   1.4rem の正方形 (Brightness は 1.7rem × 1.4rem) で間も 0.25rem に詰める */
.keyframe_route_panel {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: calc(8.5rem + 4px);
    margin: 5px 0 0 auto;
    background-color: #22222219;
    border: 0.2vh outset #95b1df3b;
    padding: 0.1rem 0.3rem 0.2rem;
}
.keyframe_route_title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}
/* 名前の段: 開く・ダウンロードのボタンは名前の文字の高さ (1rem) に収め、段の高さを変えない */
.keyframe_route_title_row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.keyframe_route_button.keyframe_route_title_button {
    width: 1rem;
    height: 1rem;
}
.keyframe_route_button.keyframe_route_title_button svg {
    width: 0.7rem;
    height: 0.7rem;
}
.keyframe_route_file_input {
    display: none;
}
/* 開くボタンと、読めなかったときにその左上に重ねる赤の ! (viewer.css で小さくする) */
.keyframe_route_open_wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.keyframe_route_file_error {
    position: absolute;
    top: -6px;
    left: -7px;
}
.keyframe_route_row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.keyframe_route_row input[type='range'] {
    flex: 1 1 auto;
    min-width: 0;
    width: 3rem;
    margin: 2px;
}
.keyframe_route_button,
.keyframe_route_add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.4rem;
    padding: 0;
    border: 1px solid #95b1df3b;
    border-radius: 4px;
    background-color: #22222219;
    color: inherit;
    cursor: pointer;
}
.keyframe_route_button {
    width: 1.4rem;
}
.keyframe_route_add {
    flex: 1 1 auto;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
.keyframe_route_button svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: currentColor;
}
.keyframe_route_button:disabled,
.keyframe_route_add:disabled,
.keyframe_route_row input[type='range']:disabled {
    opacity: 0.45;
    cursor: default;
}
/* ループ: 入りは下地を明るく (viewer.css)、切りはアイコンを薄く */
.keyframe_route_loop[aria-pressed='true'] {
    background-color: #ffffff30;
}
.keyframe_route_loop[aria-pressed='false'] svg {
    opacity: 0.5;
}
/* Delete region (モデルの一部を消す編集、viewer_controls.js の RegionEditPanel) のパネル。上から名前 (右端に
   ダウンロード)、形 (球・直方体・投げ縄)、取っ手の種類 (動かす・大きさ・回す) と右端に真ん中へ、消す側
   (Inside / Outside)、Delete・戻す・やり直す、残りの数。見た目と幅は Keyframes のパネルと同じ (中身の幅
   8.5rem + 4px、ボタンは 1.4rem の正方形で間 0.25rem) */
.region_edit_panel {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    width: calc(8.5rem + 4px);
    margin: 5px 0 0 auto;
    background-color: #22222219;
    border: 0.2vh outset #95b1df3b;
    padding: 0.1rem 0.3rem 0.2rem;
}
.region_edit_title_row,
.region_edit_row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.region_edit_title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
}
.region_edit_button,
.region_edit_choice,
.region_edit_delete {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.4rem;
    padding: 0;
    border: 1px solid #95b1df3b;
    border-radius: 4px;
    background-color: #22222219;
    color: inherit;
    cursor: pointer;
}
.region_edit_button {
    width: 1.4rem;
}
.region_edit_button svg {
    width: 0.8rem;
    height: 0.8rem;
    fill: currentColor;
}
/* 名前の段のダウンロードは名前の文字の高さ (1rem) に収める (Keyframes の開く・ダウンロードと同じ) */
.region_edit_button.region_edit_title_button {
    width: 1rem;
    height: 1rem;
}
.region_edit_button.region_edit_title_button svg {
    width: 0.7rem;
    height: 0.7rem;
}
.region_edit_group_start {
    margin-left: auto;
}
.region_edit_choice,
.region_edit_delete {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 0.3rem;
    font-size: 0.8rem;
    white-space: nowrap;
}
/* 選んでいる形・取っ手・消す側は下地を明るく (viewer.css) */
.region_edit_toggle[aria-pressed='true'] {
    background-color: #ffffff30;
}
.region_edit_button:disabled,
.region_edit_choice:disabled,
.region_edit_delete:disabled {
    opacity: 0.45;
    cursor: default;
}
/* ダウンロードボタンと、作れなかったときにその左上に重ねる赤の ! (viewer.css で小さくする) */
.region_edit_download_wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}
.region_edit_file_error {
    position: absolute;
    top: -6px;
    left: -7px;
}
/* ファイルを作っている間のダウンロードボタンの中の回る輪 */
.region_edit_spinner {
    width: 0.55rem;
    height: 0.55rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: region_edit_spin 0.8s linear infinite;
}
@keyframes region_edit_spin {
    to {
        transform: rotate(360deg);
    }
}
.region_edit_count {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    opacity: 0.8;
}
.region_edit_count:empty {
    display: none;
}
/* 投げ縄を入れている間のキャンバス (three_canvas.js が付ける): ドラッグで線を描くので十字のカーソル、
   タッチで画面を動かさない */
#three_canvas.region_lasso_canvas {
    cursor: crosshair;
    touch-action: none;
}
.control_area {
    /* border:1.75vh ridge #88aff033; */
    display: flex;
    align-items: center;
}
#control_left {
    width: 62%;
    height: 100%;
}
#control_right {
    width: 34%;
    height: 100%;
    margin-left: 2%;
}
#navigation_block_layout {
    width: fit-content;
    height: fit-content;
    margin: 0 auto 7px auto;
}
.navigation_block {
    background-color: #22222211;
    border: 0.5vh outset #95b1df3b;
    align-items: center;
    display: flex;
    flex-flow: wrap;
    justify-content: space-around;
}
#editor_block_layout {
    width: 70%;
    height: fit-content;
    margin: 20px auto;
}
#complex_editor_layout {
    width: 70%;
    height: calc(65% + 20px);
    margin: 4vh auto;
}
.mask_editor_control #complex_editor_layout {
    height: auto;
}
.editor_block {
    background-color: #22222211;
    border: 0.8vh outset #95b1df3b;
}
.upload_download_buttons {
    display: flex;
    width: 100%;
}
#upload_block_layout {
    width: fit-content;
    height: fit-content;
    margin: 8px auto 0 5px;
}
#pointcloud_upload_block_layout {
    width: fit-content;
    height: fit-content;
    margin: 8px auto;
}
#sfm_root #upload_block_layout {
    margin: 20px auto;
}
.process_list_text {
    padding-bottom: 0.7rem;
    padding-top: 0.7rem;
}
.warning_display_details {
    margin: 4px 0 8px 0;
}
.warning_display_summary {
    color: #9a3412;
    cursor: pointer;
    font-size: 0.9em;
    margin: 0px 0px 5px 20px;
}
.warning_display_content {
    border: 1px solid #d97706;
    background: #fff7ed;
    border-radius: 4px;
    padding: 6px 10px;
    margin: 4px 0 4px 15px;
    width: 17rem;
  }
.download_redo_block {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.download_redo_in_progress_block {
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.download_block_outer {
    display: flex; 
    width: 100%;
    justify-content: space-between;
    align-items: center; 
}
.download_text {
    white-space: nowrap; 
    margin: 5px 5px 5px 15px;
}
#download_block_layout {
    width: fit-content;
    height: fit-content;
    margin: 5px 0px;
    vertical-align: top;
}
#result_block_layout {
    width: fit-content;
    height: fit-content;
    margin: 5px 10px;
}
.upload_panel {
    display: flex;
    background-color: #477ff040;
    border: 0.5vh outset #95b1df3b;
    justify-content: center;
}
.result_panel {
    display: flex;
    background-color: #2b4beb63;
    border: 0.5vh outset #95b1df3b;
    justify-content: center;
}
.camera_pose_download_button {
    display: flex;
    background-color: #30776c63;
    border: 0.5vh outset #95b1df7a;
    justify-content: center;
}
.pointcloud_download_button {
    display: flex;
    background-color: #ffffff7a;
    border: 0.5vh outset #95b1df7a;
    justify-content: center;
}
.mesh_download_button {
    display: flex;
    background-color: #6aa6ff6b;
    border: 0.5vh outset #95b1df69;
    justify-content: center;
}
.glb_download_button {
    display: flex;
    background-color: #3857f38c;
    border: 0.5vh outset #95b1df5c;
    justify-content: center;
}
#process_outer_layout {
    width: auto;
    height: 14%;
    margin: 0 auto;
}
.process_outer {
    padding-top: 1%;
    text-align: center;
}
#process_block_layout {
    width: 80%;
    height: 25%;
}
.process_block {
    padding-top: 2%;
    text-align: center;
    align-items: center;
    display: flex;
    flex-flow: row;
    justify-content: space-evenly;
    margin: 0 auto;
}
.process_step {
    width: max-content;
    height: fit-content;
    line-height: 1.3;
    font-size: smaller;
    background-color:#22222211;
    border: 3px outset #95b1df3b;
    display: inline-block;
}
.mid_broad_button {
    min-width: 90px
}
.broad_button {
    min-width: 114px;
}
.down_triangle {
    height: 1rem;
}
.right_triangle {
    margin: 0px 0.5rem 0px 0.5rem;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-left: 10px solid black;
    border-bottom: 10px solid transparent;
}
.contour_base_image_layout {
    position: absolute;
    /* left:0;
    margin: 0; */
    z-index: 1;
}
.contour_base_image {
    /* border: 0;
    padding: 0; */
}
#contour_surface_layout {
    position: absolute;
    max-width: 40vw;
    max-height: 55vh;
    width: auto;
    height: auto;
    display: block;
    margin: auto;
    /* left:0;
    margin: 0; */
    z-index: 2;
}
.contour_surface {
    /* border: 0;
    padding: 0; */
}
.upload_forms_div {
    display: block;
}
.upload_form_text {
    margin: 0.4rem;
    width: 11.6rem;
}
#upload_form_layout {
}
.upload_form {
    display: grid;
    text-align: center;
}
/*以下#file_choice:focus + #file_choice_label:beforeまで、
  tabフォーカス可能なままファイル選択ボタンの表示を変えるための指定*/
#file_choice {
    /*フォーカスを残したまま非表示にする */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    /* overflow: hidden; */
    padding: 0;
    clip: rect(0, 0, 0, 0);
}
#file_directory {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
}
#file_video {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0, 0, 0, 0);
}
.upload_image_button{
    content: url('/media/image/upload.png');
    display: inline-block;
    cursor: pointer;
    width: 48px;
    height: 36px;
}
#file_choice + #file_choice_label::before {
    content: "Upload";
    margin: 5px auto;
    padding: 3px 12px;
    color: #ffffff;
    background-color: #22222211;
    border: 0.3vh outset #95b1df3b;
}
#file_choice:focus + #file_choice_label::before {
    border-color: #ffffff;
    box-shadow: 0 0 5px #1589ee;
}
#chosen_file_name {
    width: 100%;
    margin: 10px 0;
    overflow: hidden;
}
#image_upload_button_layout {
    margin: 10px auto;
}
.image_upload_button {
    padding: 3px 12px;
    font-size: medium;
    color: #ffffff;
    background-color: #22222211;
    border: 0.3vh outset #95b1df3b;
}
.image_upload_button:active {
    background: #ffffff30;
}
#file_page_layout {
    width: 100%;
}
.file_page_div {
    padding: 3px 0;
    text-align: center;
}
.file_page {
    font-size: medium;
}
#previous_uploaded_arrow {
    width: 100%;
    height: 100%;
}
#next_uploaded_arrow {
    width: 100%;
    height: 100%;
}
.uploaded_arrow {
    font-size: 1.2rem;
    color: #bbbbbb99;
    background-color:#22222211;
    border:0.2vh outset #95b1df3b;
}
#next_previous_buttons_layout {
    width: 95%;
    height: 10%;
    margin: 0 auto;
}
.next_previous_buttons {
    display: flex;
}
#switch_radio {
    width: 90%;
    height: 19%;
    margin: 10px auto;
}
.linear_switch {
    display: flex;
    flex-flow: column;
    flex-wrap: wrap;
    border: 0.5vh outset #95b1df3b;
    align-items: start;
    align-content: center;
    justify-content: center;
    padding-block: 0.4rem;
}
.linear_switch label {
    margin: 7px 0;
}
.grid_switch {
    display: grid;
    /* grid-template-columns: auto auto; */
    /* grid-template-rows: 1fr 1fr; */
    border: 0.5vh outset #95b1df3b;
    align-items: start;
    justify-items: center;
    padding-block: 0.8rem;
}
.center_grid_radio {
    display: grid;
    grid-template-columns: auto auto;
    /* grid-template-rows: 1fr 1fr; */
    border: 0.5vh outset #95b1df3b;
    align-items: center;
    justify-items: start;
    justify-content: space-around;
    padding-block: 0.8rem;
}
.center_grid_radio label {
    margin: 7px 0;
}
#edit_buttons_panel_layout {
    position: relative;
    width: 92%;
    height: 68%;
    margin: 1.5vh auto 1.5vh auto;
}
.edit_buttons_panel {
    display: flex;
    flex-flow: column;
}
.panel_header {
    margin: 3% auto 0 auto;
}
#inner_radio_layout {
    margin: 7% auto 3% auto;
}
.inner_radio {
    display: flex;
    flex-flow: column;
}
.inner_radio label {
    margin: 5px 0;
}
#color_sample {
    width: fit-content;
    height: 2vh;
    backGround-color: #000000;
}
#color_value {
    position:relative;
    left: 0.8vw;
}
#color_div_layout {
    width: 100%;
}
.color_div {
    display: flex;
}
#threshold_apply_layout {
    position: relative;
    width: fit-content;
    height: 1.6rem;
}
.large_file_button {
    margin-top: 0.2rem;
    margin-left: 0.3rem;
    width: fit-content;
}
.common_button_layout {
    position: relative;
    width: fit-content;
    height: 1.6rem;
}
.common_button {
    line-height: 0;
    color: #000000;
    font-size: medium;
    padding: 3px 12px;
    background-color: #22222211;
    border: 0.3vh outset #95b1df3b;
}
.common_button:active {
    background: #ffffff30;
}
.common_disabled_button {
    line-height: 0;
    color: #00000099;
    font-size:medium;
    padding:3px 12px;
    background-color: #22222250;
    border: 0.3vh outset #95b1df3b;
}
.submit_disabled_button {
    line-height: 0;
    color: #0000003d;
    font-size: medium;
    padding: 3px 12px;
    background-color: #22222214;
    border: 0.3vh outset #95b1df3b;
}
.control_area_uploading {
    align-content: center;
}
.download_buttons {
    margin-top: 3rem;
    margin-left: 20px;
    min-height: 30%;
}
.execute_button_block {
    display: flex;
    align-items: center;
}
.execute_button_layout {
    width: fit-content;
    margin: 0.8rem;
    border: 3px inset #95b1df3b;
    padding: 0 0.4rem;
}
.execute_button {
    width: fit-content;
    height: 1.9rem;
}
.execute_button_label {
    display: flex;
    white-space: nowrap;
    align-items: center;
}
/* /manual_pipeline: 実行ボタン直上の価格表示 (色は new_preuploader.css の
   .np_run_price_value を再利用) */
.stage_price_row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    font-size: 0.85rem;
    margin: 0.2rem 0 0;
}
.progress_area {
    width: fit-content;
    margin: 0.8rem 0;
    border: 3px inset #95b1df3b;
    padding: 0.4rem 0.4rem;
}
.progress_circle {
    display: flex;
    align-items: center;
    margin-left: 2%;
}
.load_circle_text {
  padding-left: 20px;
}
.progress_text {
    display: flex;
    align-items: center;
    margin-left: 8px;
    white-space: pre;
}
/* 残クレジット数 (旧 inline style。テーマ側で上書きできるようクラス化) */
.credit_number {
    color: #0a3fab;
    font-weight: bold;
}
.credit_text_upload_adjust {
    margin-top: 1.5rem;
    text-align: center;
}
.credit_text_pointcloud_adjust {
    margin-left: 6rem;
}
.credit_text_mesh_adjust {
    margin-left: 6.1rem;
}
.credit_text_texture_adjust {
    margin-left: 6.5rem;
}
.launch_button {
    height: 1.7rem;
    min-width: 12rem;
    /* background-color: #00000025; */
}
.server_stop_button {
    width: 8rem;
    height: 2rem;
}
.close_button {
    width: fit-content;
    height: 1.1rem;
    margin: 8px 8px auto auto;
    background-color: #f3d4384a;
    font-size: 0.8rem;
}
.exclusive_button {
    width: 18rem;
    height: 2.0rem;
}
.horizontal_div {
    width: 80%;
    height: 1px;
    margin-left: 4.6rem;
    border: 3px outset #95b1df3b;
}
.user_log_expand {
    width: 80%;
    margin: 1.0rem 0;
}
.user_log_summary {
    cursor: pointer;
    margin-bottom: 0.6rem;
}
.user_log_body {
    margin-top: 0.4rem;
    margin-left: 0.2rem;
}
.user_log_admin_row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.user_log_admin_label {
    font-size: 0.85rem;
}
.user_log_admin_input {
    width: 22rem;
    max-width: 60%;
}
.user_log_reload_button {
    padding: 0.2rem 0.8rem;
}
.user_log_box {
    max-height: 21em;
    min-height: 21em;
    overflow-y: auto;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    background-color: #f7f7f700;
    border: 3px inset #95b1df3b;
    padding: 0.6rem 0.8rem;
    font-family: monospace;
    font-size: 0.8rem;
    line-height: 1.4;
    margin-left: 5.5rem;
}
.cancel_reset_button_area {
}
.reset_button_layout {
    width: fit-content;
    height: 1.9rem;
    margin: 5% auto;
    background-color: #cb096e26;
    align-items: flex-end;
}
.reset_button_adjust {
    margin-top: 30%;
    margin-left: 30px;
}
#generate_button_layout {
    width: fit-content;
    height: 1.9rem;
    margin: 12% auto;
}
.input_div {
    position: relative;
    padding-top: 3vh;
}
.input_lower_div {
    position: relative;
    top: 5vh;
}
.editor_input {
    position: relative;
    left: 1vw;
    width: 3rem;
}
#include_exclude_div_layout {
    margin: 10px 0;
}
#include_exclude_div_layout label {
    margin: 0 0 0 5%;
}
.include_exclude_div {
    display: flex;
    flex-flow: row;
}
#darker_lighter_div_layout {
    margin: 10px 0;
}
.darker_lighter_div {
    display: flex;
    flex-flow: row;
}
#darker_lighter_div_layout label {
    margin: 0 0 0 10%;
}
#editor_footer_layout {
    position: relative;
    width: 100%;
    height: fit-content;
    margin-top: 20px;
}
.editor_footer {
    display: flex;
    flex-flow: row;
}
#undo_button_layout {
    position: relative;
    top: 75%;
    width: 25%;
    height: 1.5rem;
}
.undo_button {
    line-height: 0;
    font-size: medium;
    background-color: #22222211;
    border: 3px outset #95b1df3b;
}
#redo_button_layout {
    position: relative;
    top: 75%;
    left: 5%;
    width: 25%;
    height: 1.5rem;
}
.redo_button {
    line-height: 0;
    font-size: medium;
    background-color: #22222211;
    border: 3px outset #95b1df3b;
}
#reset_button_layout {
    position: relative;
    top: 75%;
    left: 25%;
    width: 25%;
    height: 1.5rem;
}
.reset_button {
    line-height: 0;
    font-size: medium;
    background-color: #22222211;
    border: 3px outset #95b1df3b;
}
.cancel_additional_style {
    margin-left: 30px;
    background-color: #f3d4384a;
}
#result_inline {
    display: inline;
    margin: auto 15%;
}
.open_sample_image {
    content: url('/media/image/open_exclusive.png');
    display: inline-block;
    width: 36px;
    height: 36px;
}
.open_exclusive_button {
    content: url('/media/image/open_exclusive.png');
    display: inline-block;
    width: 36px;
    height: 36px;
    border: 0.3vh outset #95b1df5c;
}
.download_button {
    content: url('/media/image/download.png');
    display: inline-block;
    cursor: pointer;
    width: 48px;
    height: 36px;
}
.download_button:active {
    background: #ffffff30;
}
.spread_outer {
    width: 25rem;
}
.spread_space {
    display: flex;
}
.spread_right {
    margin-left: auto;
}
.spread_left {
    margin-right: auto;
}
.example_explain_outer {
    width: 30rem;
    margin: 1.7rem auto 0 auto;
}
.example_source_video {
    max-width: 70vw;
}
.example_result_video {
    max-width: 50vw; 
    margin-top: 2rem;
}
.recreate_button {
    content: url('/media/image/redo.png');
    width: 2.8rem;
    height: 2.8rem;
    background-color: #00000000;
    border: 0;
    margin-left: 0.7rem;
}
.recreate_hover {
    opacity: 0;
    transition: 0.5s;
    position: absolute;
    border: 7px solid transparent;
    border-top: 14px solid #000;
    bottom:12px;
    left:calc(50% - 7px);
    margin-top: -3px;
    visibility: hidden;
    pointer-events: none;
}
.recreate_button:hover::after {
    content: attr(data-text); /* data-textの内容を表示 */
    position: absolute;
    top: -30px;
    left: 0;
    background-color: #333;
    color: #fff;
    padding: 5px;
    border-radius: 4px;
    white-space: nowrap;
}
.recreate_loading {
    width: 2.8rem;
    height: 2.8rem;
    background-color: #00000000;
    border: 0;
    padding-top: 1.7rem;
    margin-left: 0.7rem;
}
.process_arrow {
    width: fit-content;
    font-size: 1.2rem;
    transform: rotate(90deg);
    margin-left: 3rem;
    height: fit-content;
}
/* "/manual_pipeline" (dataset モード) の分岐パイプライン表示。
   SfM の下で Gaussian Splatting / Point Cloud の 2 列に分かれ、
   それぞれ Mesh → Textured Mesh へ続く */
.dataset_pipeline_flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
}
.dataset_pipeline_flow .process_arrow {
    /* 工程間の ">>" は両側に少し余白を取り、ラベル/ボタンと詰まらないようにする */
    margin: 0.55rem 0;
}
.dataset_pipeline_flow .process_text_area {
    width: auto;
    padding: 0;
}
/* 2 列は広い方の列の max-content 幅に揃えた等幅グリッド。flex: 1 1 0 +
   min-width: 0 だと「両列の合計 / 2」に割られ、進捗ボックス等が隣の列へ
   はみ出して重なっていた */
.pipeline_branch_columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(max-content, 1fr));
    align-items: start;
    justify-content: center;
    column-gap: 1.5rem;
}
.pipeline_branch_column {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 選択済みブランチのみの一本道表示 */
.pipeline_branch_columns.pipeline_single_branch {
    grid-template-columns: minmax(max-content, 1fr);
}
/* 二又 ⇔ 一本道を切り替えるテキストリンク風ボタン */
.pipeline_branch_switch {
    margin-top: 0.8rem;
    padding: 0.15rem 0.4rem;
    border: 0;
    background: none;
    color: #0a3fab;
    font-size: 0.85rem;
    text-decoration: underline;
    cursor: pointer;
}
.pipeline_branch_switch:hover {
    opacity: 0.75;
}
.dataset_pipeline_flow .download_block_outer {
    flex-direction: column;
    align-items: center;
    width: auto;
    margin-left: 0;
}
.dataset_pipeline_flow .download_text {
    margin: 5px;
}
.dataset_pipeline_flow .execute_button_layout {
    margin: 0.5rem 0.2rem;
}
/* 横長表示でパイプライン最上部に移した dataset 選択ドロップダウン */
.dataset_pipeline_flow .dataset_select_area {
    margin: 0 0 0.5rem 0;
    width: 100%;
}
.dataset_pipeline_flow .preuploaded_select {
    max-width: 100%;
}
/* /manual_pipeline: キャンバス + 右パネルの 2 列以外を縦積みにするラッパー
   (.main_ui が横並び flex のため) */
.dataset_main_stack {
    display: flex;
    flex-direction: column;
}
/* 工程スロット内のエラー文 (失敗 run のメッセージ・開始失敗・クレジット不足)。
   長文でも右パネルの幅を押し広げない */
/* mesh(TSDF) / mesh(Poisson) / tex の必要メモリ予測 (Mesh オプションダイアログ内と
   実行ボタン下)。Poisson (poisson_memory_estimate / stage_poisson_estimate) と
   tex (tex_memory_estimate / stage_tex_estimate) も同じクラスを共用する。
   最大サーバー超で実行できない理由は赤の ! のツールチップ (ErrorTip) */
.tsdf_memory_note {
    margin: 0.5rem 0 0.2rem 0.8rem;
    font-size: 0.9em;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.stage_tsdf_estimate {
    max-width: 16rem;
    margin: 0 auto;
    text-align: center;
}
.stage_tsdf_estimate .tsdf_memory_note {
    margin: 0.3rem 0;
}
/* Mesh オプションダイアログの tex 工程の予測 (TexForecastNote) と、実行ボタン
   下の注記 (MeshForecastStatus。.stage_tsdf_estimate の中)。tex が実行できない・
   GLB に収まらない警告は黄色の ! のツールチップ (WarningTip) */
.tex_forecast .tex_forecast_note,
.tex_forecast .tex_forecast_price,
.tex_forecast .tex_forecast_staff {
    margin: 0.4rem 0 0.2rem 0.8rem;
    font-size: 0.9em;
    line-height: 1.4;
    overflow-wrap: anywhere;
}
.tex_forecast .tex_forecast_price {
    font-weight: bold;
}
.tex_forecast_hint {
    font-weight: normal;
}
.tex_forecast .tex_forecast_staff {
    font-size: 0.85em;
    opacity: 0.85;
}
/* 工程の失敗・実行できない理由の入れ物 (中はエラー・警告のツールチップ。ラベルの色は
   ツールチップ側: 警告のラベルが赤くならないよう、ここでは色を付けない) */
.dataset_stage_error {
    max-width: 16rem;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    margin: 0.3rem auto;
    text-align: center;
}
.dataset_panel_error {
    max-width: 24rem;
    margin-bottom: 0.8rem;
}
/* 3D モデルの「サイズ掲示 + Display ボタン」ゲート
   (/manual_pipeline のプレビューと /3d_viewer の dataset 表示で共用) */
.empty_three_canvas {
    display: flex;
    align-items: center;
    justify-content: center;
}
.model_load_gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
}
.model_load_size {
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}
.model_load_button {
    min-width: 7rem;
    height: 2rem;
}
/* 表示できない掲示 (短いラベルと黄色の ! のツールチップ。pointcloud_viewer.js ModelTooLargeNotice) */
.model_load_too_large {
    max-width: 24rem;
}
.exclusive_launcher_area {
    border: 0.4vh outset #95b1df3b;
    padding: 5px;
    margin-right: 0.5rem;
    min-width: 12rem;
}
.billing_explanation {
    margin-left: 1.2rem;
}
.spec_description {
    border: 0.4vh inset #95b1df3b;
    padding: 0.3rem 0rem 0.5rem 1.25rem;
}
.launch_server_list {
    display: flex;
    margin-left: 4.5rem;
    margin-bottom: 1.1rem;
}
.server_list_row {
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-right: 1rem;
    margin-left: 4.5rem;
}
.private_data_time {
    margin-right: 1rem;
    width: 16rem;
}
.private_data_type {
    margin-right: 1rem;
    width: 10rem;
}
.private_data_link {
    display: flex;
    align-items: center;
    margin-left: 1rem;
}
.private_data_state {
    margin-left: 0.7rem;
    width: 7rem;
}
.private_data_stop {
    margin-left: 5rem;
}
.exclusive_list_row {
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-left: 4.5rem;
    max-width: 94vw;
}
.preupload_buttons_layout {
    display: flex;
    gap: 4rem;
    margin-top: 2rem;
    margin-left: 8rem;
}
.preuploaded_list_row {
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-left: 3.5rem;
}
.preuploaded_data_count {
    margin-right: 1rem;
    width: 6rem;
}
.preuploaded_data_time {
    margin-right: 1rem;
}
.preuploaded_data_size {
    margin-right: 1rem;
    width: 6rem;
    max-width: 8rem;
}
.preuploaded_data_rename_button {
    width: fit-content;
    height: 1.5rem;
}
.preuploaded_data_name_input {
    background-color: #202f332b;
    border: 0.3vh inset #4c84b3a6;
    margin-left: 0.3rem;
}
.preuploaded_data_rename_cancel_button {
    background-color: #f3d43859;
    width: fit-content;
    height: 1.5rem;
    margin-left: 0.3rem;
}
.preuploaded_data_rename_submit_button {
    width: fit-content;
    height: 1.5rem;
    margin-left: 0.3rem;
}
.preuploaded_data_name {
    margin-right: 3px;
    width: 23vw;
    max-width: 25rem;
    overflow-wrap: break-word;
}
.preuploaded_data_delete {
    margin-right: 1rem;
    margin-left: 2rem;
}
.download_data_time {
    margin-right: 1rem;
    width: 22vw;
    max-width: 18rem;
}
.download_data_type {
    margin-right: 1rem;
    width: 9vw;
    max-width: 8rem;
}
.download_data_size {
    margin-right: 1rem;
    width: 6vw;
    max-width: 8rem;
}
.download_data_name {
    margin-right: 1rem;
    width: 20vw;
    max-width: 21rem;
    overflow-wrap: break-word;
}
.download_data_options {
    margin-right: 1rem;
    width: 20rem;
    max-width: 21vw;
}
.download_data_options_element {
    white-space: pre-wrap;     /* 改行を保持 + 自動折返し */
    word-break: break-word;    /* 長い文字列を強制的に折る */
    overflow-wrap: anywhere;
}
.download_data_delete {
    margin-right: 1rem;
    margin-left: 1.7rem;
    width: 22vw;
    max-width: 18rem;
}
.canvas_switch_layout {
    position: relative;
    width: fit-content;
    height: 1.6rem;
}
.canvas_switch {
    line-height: 0;
    color: #000000;
    font-size: medium;
    padding: 3px 12px;
    background-color: #22222211;
    border: 0.3vh outset #95b1df3b;
}
.selected_canvas_switch {
    line-height: 0;
    color: #000000;
    font-size: medium;
    padding: 3px 12px;
    background-color: rgba(51, 34, 136, 0.267);
    border: 0.3vh outset #95b1df3b;
}
.loading_circle_layout {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 4;
}
#usage_area_layout {

}
#usage_inner_area {
    width: 45%;
    height: 100%;
    margin: 0 auto;
    background-color: #ffffff20;
    padding-inline: 50px;
    padding-block: 8px;
    margin-block: 60px;
}
.shared_limit_text {
    margin-top: 0.12rem;
}
.uploaded_file_list_outer {
    display: flex;
}
#uploaded_file_list {
    display: flex;
    min-height: 40vh;
    min-width: 40vh;
    height: fit-content;
    width: fit-content;
    border: 3px outset #95b1df3b;
    text-align: center;
    padding: 10px 10px 20px 10px;
    margin: 10px auto;
    align-items: center;
    justify-content: center;
}
.uploaded_file_area {
    display: block;
    border: 3px inset #95b1df3b;
    padding: 10px;
}
.upload_button_label {
    display: flex;
    width: fit-content;
    align-items: center;
    margin-top: 2.5rem;
}
.upload_button_label_with_preupload {
    display: flex;
    width: fit-content;
    align-items: center;
    margin-top: 1.5rem;
}
.dropdown_menu_div {
    display: flex;
    flex-direction: column;
}
.preuploaded_select {
    box-sizing: border-box;
    width: 22rem;
    height: 2rem;
    background-color: #5c8bd300;
    border: 0.4vh inset #95b1df3b;
    padding: 0 0.6rem;
    margin-top: 0.8rem;
    margin-bottom: 15px;
}
.snapshot_dropdown {
    box-sizing: border-box;
    width: 22rem;
    position: relative;
    margin-top: 0.5rem;
    margin-bottom: 15px;
    display: inline-block;
}
.snapshot_dropdown_trigger {
    box-sizing: border-box;
    width: 100%;
    height: 2rem;
    background-color: #5c8bd300;
    border: 0.4vh inset #95b1df3b;
    color: inherit;
    padding: 0 0.6rem;
    cursor: pointer;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font: inherit;
}
.snapshot_dropdown_trigger:disabled {
    opacity: 0.5;
    cursor: default;
}
.snapshot_dropdown_trigger_label {
    margin-left: 0.25rem;
}
.snapshot_dropdown_arrow {
    font-size: 0.7em;
    opacity: 0.8;
}
.snapshot_dropdown_list {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    min-width: 100%;
    background-color: #1d3550;
    border: 0.3vh outset #95b1df3b;
    max-height: 18rem;
    overflow-y: auto;
    color: #fff;
}
.snapshot_dropdown_row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.4rem;
}
.snapshot_dropdown_row:hover {
    background-color: #95b1df3b;
}
.snapshot_dropdown_row_label {
    flex: 1;
    cursor: pointer;
    white-space: nowrap;
    padding: 0.1rem 0.2rem;
}
.snapshot_dropdown_row_edit {
    background: transparent;
    border: 0.2vh outset #95b1df3b;
    border-radius: 4px;
    padding: 2px 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.snapshot_dropdown_row_edit:hover {
    background-color: #95b1df3b;
}
.snapshot_dropdown_row_edit:active {
    border-style: inset;
}
.snapshot_dropdown_row_edit img {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}
.snapshot_dropdown_row_delete {
    background: transparent;
    border: 0.2vh outset #95b1df3b;
    border-radius: 4px;
    padding: 2px 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.snapshot_dropdown_row_delete:hover {
    background-color: #df5e5e80;
}
.snapshot_dropdown_row_delete:active {
    border-style: inset;
}
.snapshot_dropdown_row_delete img {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}
.snapshot_storage_used {
    color: #000;
    font-size: 0.85em;
    margin-top: 0.2rem;
    margin-bottom: 0.4rem;
}
.snapshot_title_edit_dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    background-color: #56a8ef;
    border: 0.4rem outset #95b1df3b;
    color: #000;
    padding: 1rem 1.2rem;
    max-width: 32rem;
}
.snapshot_title_edit_row {
    display: flex;
    align-items: center;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.snapshot_title_edit_input {
    background-color: #202f332b;
    border: 0.3vh inset #4c84b3a6;
    padding: 0.2rem 0.4rem;
    flex: 1;
    min-width: 12rem;
}
.snapshot_title_edit_buttons {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.auto_save_snapshot_label {
    margin-top: 0.2rem;
    font-size: 0.9em;
}
.execute_button_with_save {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}
.save_now_button {
    background-color: #f5dca0;
    border: 0.3vh outset #d6b974;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
    align-self: center;
}
.save_now_button:hover {
    background-color: #f0cf80;
}
.save_now_button:active {
    border-style: inset;
}
#preupload_block_layout {
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
}
.preupload_uploading {
    display: block;
    width: fit-content;
    margin-top: 2.5rem;
    margin-left: 3.5rem;
    margin-bottom: 2rem;
}
.preupload_button_label {
    display: block;
    width: fit-content;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
}
.preupload_panel {
    display: flex;
    margin: 0 auto;
    background-color: #477ff040;
    border: 0.5vh outset #95b1df3b;
}
.preupload_form_text {
    margin: 0.4rem;
}
.page_explanation {
    max-width: 80vw;
    padding-bottom: 3rem;
    font-size: 1.14rem;
    color: #021235;
    width: fit-content;
    margin: 0 auto;
}
#exclusive_root .page_explanation {
  margin-left: 5rem;
}
#sfm_download {
    width: 100%;
    height: 100%;
}
#site_header {
    display: flex;
    margin-bottom: 2rem;
    padding-bottom: 4rem;
    align-items: center;
}
#thin_site_header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}
#viewer_site_header {
    display: flex;
    align-items: center;
}
#site_footer {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding-top: 3rem;
}
#site_title {
    /* margin: 0 auto; */
    padding-left: 1.1rem;
    padding-bottom: 0.4rem;
}
#policy_layout {
    margin: 0 20px;
}
.article_text {
    padding-top: 20px;
    padding-left: 30px;
}
.tips_text {
    padding-top: 20px;
    padding-left: 5rem;
    padding-bottom: 7rem;
}
.tips_text p {
    line-height: 1.4rem;
}
.tips_text h3 {
    padding-bottom: 0.5rem;
}
.license_text {
    width: 50rem;
}
.paragraph_text {
    width: 55rem;
    margin-left: 20px;
    text-indent: -20px;
    text-wrap: wrap;
}
#confirm_overlay {
  /*　画面全体を覆う設定　*/
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,0.5);

  /*　画面の中央に要素を表示させる設定　*/
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading_circle { 
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
} 
.circle {
  box-sizing: border-box;
  width: 55px;
  height: 55px;
  border-radius: 100%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgb(45, 84, 255);
  animation: spin 1s infinite linear;
}
.overlay_center {
  transform: translateY(-7%);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
}
.inner_load_circle {
  margin: 0 auto;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #245099d9;
  animation: spin 1s infinite linear;
  /* box-sizing: border-box;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  border: 10px solid rgba(255, 255, 255, 0.2);
  border-top-color: #FFF;
  animation: spin 1s infinite linear; */
}
.transit_loading {
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  position: sticky;
  top: 40%;
}
@keyframes spin { 
  100% { 
    transform: rotate(360deg); 
  } 
}
.invisible{
  opacity: 0;
  visibility: hidden;
}
.disable_button {
  text-decoration: line-through;
}
#user_login {
    display: flex;
    margin-left: auto;
    padding-right: 1rem;
    align-items: center;
}
#user_name {
    font-size: 1rem;
    color: #093088;
    font-weight: bold;
    margin-left: 0.4rem;
    margin-right: 0.8rem;
    padding-top: 0.27rem;
}
#login_link {
    font-size: 1rem;
    color: #093088;
    margin-top: 0.2rem;
}
.login_required_text {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
}
#preuploader_root .login_required_text{
    margin-bottom: 1.2rem;
}
.logout_area {
    display: flex;
    width: 75%;
    height: fit-content;
    padding-left: 3rem;
}
.logout_link {
    font-size: 1rem;
    color: #093088;
    margin-left: auto;
    border: 0.4vh inset #95b1df3b;
    padding: 0.12rem;
}
.user_icon {
    content: url('/media/image/user_icon.png');
    width: 2.15rem;
    height: 1.6rem;
}
.guidance_images_area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
}
.guidance_image {
    width: 50px;
    margin-left: 0.3rem;
}
.guidance_arrow {
    width: 30px;
    height: 40px;
}
.other_example_link {
    color: #70c9ff;
    margin-top: 0.5rem;
}
.help_toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    width: 45px;
    height: 45px;
}
.help_dialog_layout {
}
.help_dialog_inner {
    background-color: #13262d;
    color: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    font-size: 14px;
    z-index: 999;
    border: 0px outset #95b1df3b;
    margin: auto;
    max-width: 500px;
}
.help_arrows_layout {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 6rem;
    display: flex;
    justify-content: center;
}
.help_close_button {
    width: 5rem;
    height: 1.8rem;
    margin-top: 1rem;
    margin-bottom: 0.8rem;
    border-radius: 6px;
    border: 0rem outset #95b1df3b;
    background-color: #7faacdb0;
}
.option_button {
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    margin: 1rem 0 0 0.5rem;
    padding-bottom: 1rem;
}
.option_close_button_layout {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}
/* オプションダイアログ一番上のリセット行 (全項目を既定値に戻すボタン) */
.option_dialog_top_row {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.4rem;
}
/* リセット行の右端の小さな Close (SfM ダイアログ) */
.option_top_close_button {
    margin-left: auto;
    margin-top: 0;
    width: 3.5rem;
    height: 1.4rem;
    font-size: small;
}
.option_reset_button {
    height: 1.4rem;
    padding: 0 0.6rem;
    font-size: small;
    background-color: #511a4a24;
    border: 0.2rem outset #95b1df3b;
}
/* /manual_pipeline: オプションダイアログ下部の見積もり＋実行ボタン。
   ここから直接 (実行確認ダイアログを経て) 工程を開始できる */
/* 下部の仕切りは上部 (.option_divider) と同じ立体的な線 */
.option_dialog_run_footer {
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 3px outset #95b1df3b;
}
.option_run_button {
    width: auto;
    min-width: 5rem;
    font-weight: 700;
}
.option_run_button:disabled {
    opacity: 0.5;
    cursor: default;
}
.option_close_button {
    width: 5rem;
    height: 1.8rem;
    margin-top: 1rem;
    background-color: #511a4a24;
    border: 0.2rem outset #95b1df3b;
}
.option_dialog {
    position: relative;
    top: 12%;
    left: 26%;
    background-color: #56a8ef;
    border: 0.4rem outset #95b1df3b;
}
.mesh_option_dialog {
    position: relative;
    top: 30%;
    left: 28%;
    background-color: #56a8ef;
    border: 0.4rem outset #95b1df3b;
}
.dialog_button {
    width: fit-content;
    height: 1.4rem;
}
dialog {
  padding: 10px 20px 20px 20px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  max-width: 750px;
  width: 90%;
}
/* 背景を暗くする */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.advanced_option_area {
    background: #00000010;
    padding-bottom: 0.1px;
    padding-top: 0.1px;
}
/* 選択中の SfM エンジンと無関係なオプション群のグレーアウト表示 */
.engine_off_section {
    opacity: 0.45;
}
.option_block {
    margin-bottom: 1.5rem;
}
.option_title {
    /* transform: translateX(-1.5%); */
}
/* "- " で始まる項目見出しの直前がチェックボックス行など余白の無い div の
   ときは間を空ける (option_block の後は margin-bottom があるので不要。
   縦マージンは相殺されるので余白が二重にはならない) */
div:not(.option_block) + .option_title,
div:not(.option_block) + .option_block > .option_title:first-child {
    margin-top: 1rem;
}
/* Modular SfM: オプションが渡されるコマンドごとの枠と、その間の下向き矢印 */
.option_step {
    padding: 0.7rem 0.6rem 0.2rem;
    /* 実行ボタンの枠 (.execute_button_layout) と同じ窪んだ縁 */
    border: 3px inset #95b1df3b;
    border-radius: var(--np-radius, 10px);
    /* 地のグラデーションをほぼそのまま透かす、ごく薄い黒 */
    background: rgba(0, 0, 0, 0.05);
}
.option_step > .option_block:last-child {
    margin-bottom: 0.6rem;
}
.option_step_arrow {
    display: flex;
    justify-content: center;
    margin: 0.25rem 0;
    color: rgba(2, 18, 53, 0.6);
}
.option_step_arrow svg {
    display: block;
}
/* SfM ダイアログ上部 (High quality / 白飛びマスク) と SfM Engine の仕切り */
.option_block_top {
    margin-bottom: 0.8rem;
}
/* SfM エンジンの切り替えタブと、その設定パネル。選択中のタブは下のパネルと
   地続きで、タブの足元は外向きのカーブ (フレア) で枠の上辺へつながる。
   border-radius が丸められるのは「その箱自身の 4 隅 (凸の角)」だけで、タブの
   足元のように 2 つの箱の境目にできる凹の角は丸められない。そこで枠線を
   小さな部品に分けて描く:
     - タブの輪郭 (上と左右)      … .option_tab::before   (足元の手前で止める)
     - 足元のフレア / 直線        … .option_tab::after・.option_tab_hit::before
       (フレアは r×r の箱の「凸の角」を凹の角の位置に置いて円弧を描く)
     - 選択していないタブの下の線 … .option_tab::after
     - タブの右に残る上辺         … .option_tab_row::after
     - パネルの枠 (右上の角を含む) … .option_tab_panel::before。上辺は右上の
       円弧だけ残してマスクで消す (上辺は上の部品が描くため)
   半透明の枠線は重なると濃くなるので、部品同士は重ねず突き合わせる。
   立体表現はライト = outset / inset、ダーク = solid + 明暗 2 色
   (manual_pipeline.css が --ot-* を上書きする) */
.option_tabs {
    --ot-r: var(--np-radius, 10px);
    --ot-b: 3px;
    --ot-style: outset;       /* 上・左が明、右・下が暗 */
    --ot-style-inv: inset;    /* 上・左が暗、右・下が明 (フレア用) */
    --ot-light: #95b1df3b;
    --ot-dark: #95b1df3b;
    margin-bottom: 0.8rem;
}
.option_tab_row {
    display: flex;
    align-items: flex-end;
}
/* タブの右に残る部分の上辺。右端 r はパネル枠の右上の円弧が描く */
.option_tab_row::after {
    content: "";
    flex: 1 1 auto;
    height: 0;
    margin-right: var(--ot-r);
    border-top: var(--ot-b) var(--ot-style) var(--ot-light);
}
.option_tab {
    position: relative;
    display: flex;
    align-items: center;
    /* タブの右の r は隣のタブとの間隔 (フレアと下の線がここを通る) */
    margin-right: var(--ot-r);
    padding: calc(0.15rem + var(--ot-b)) calc(0.6rem + var(--ot-b)) 0.25rem;
    border-radius: var(--ot-r) var(--ot-r) 0 0;
    background: rgba(0, 0, 0, 0.08);
}
.option_tab_active {
    background: rgba(0, 0, 0, 0.04);
}
.option_tab::before,
.option_tab::after,
.option_tab_hit::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
}
/* 輪郭 (上と左右)。選択していないタブは下の線の手前まで、選択中のタブは
   足元のフレアの手前 (下から r) まで */
.option_tab::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--ot-b);
    border: var(--ot-b) var(--ot-style);
    border-color: var(--ot-light) var(--ot-dark) var(--ot-dark) var(--ot-light);
    border-bottom: 0;
    border-radius: var(--ot-r) var(--ot-r) 0 0;
}
.option_tab_active::before {
    bottom: var(--ot-r);
}
/* 選択していないタブ: 文字のすぐ下の線 (右の間隔の分まで引く)。右隣が選択中の
   ときは、そのタブの左フレアが始まる位置で止める */
.option_tab:not(.option_tab_active)::after {
    left: 0;
    right: calc(-1 * var(--ot-r));
    bottom: 0;
    height: 0;
    border-top: var(--ot-b) var(--ot-style) var(--ot-light);
}
.option_tab_before_active:not(.option_tab_active)::after {
    right: calc(-1 * var(--ot-b));
}
/* 選択中のタブ: 右の足元のフレア (右辺 = 暗 から 上辺 = 明 へ曲がる)。幅は
   円弧 r + 直線 b で、右隣のタブ (または残りの上辺) の始点にちょうど届く */
.option_tab_active::after {
    left: calc(100% - var(--ot-b));
    bottom: 0;
    width: calc(var(--ot-r) + var(--ot-b));
    height: var(--ot-r);
    border-left: var(--ot-b) var(--ot-style-inv) var(--ot-dark);
    border-bottom: var(--ot-b) var(--ot-style-inv) var(--ot-light);
    border-bottom-left-radius: var(--ot-r);
}
/* 選択中のタブ: 左の足元。先頭のタブはパネルの左辺へまっすぐ下ろし、
   それ以外は左へフレアさせる (左辺も上辺も明) */
.option_tab_active .option_tab_hit::before {
    left: calc(var(--ot-b) - var(--ot-r));
    bottom: 0;
    width: var(--ot-r);
    height: var(--ot-r);
    border-right: var(--ot-b) var(--ot-style-inv) var(--ot-light);
    border-bottom: var(--ot-b) var(--ot-style-inv) var(--ot-light);
    border-bottom-right-radius: var(--ot-r);
}
.option_tab_active:first-child .option_tab_hit::before {
    left: 0;
    width: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 0;
    border-left: var(--ot-b) var(--ot-style) var(--ot-light);
}
.option_tab_hit {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}
.option_tab:not(.option_tab_active) .option_tab_hit {
    opacity: 0.75;
}
.option_tab_active .option_tab_hit {
    font-weight: 700;
}
.option_tab_hit:has(.option_tab_input:disabled) {
    cursor: default;
}
/* パネル。枠は ::before が描く (本体の枠は幅だけ確保する透明な線)。マスクを
   本体に掛けるとはみ出すツールチップまで切れるので、枠専用の擬似要素に掛ける */
.option_tab_panel {
    position: relative;
    padding: 0.8rem 0.6rem 0.2rem;
    border: var(--ot-b) solid transparent;
    border-top: 0;
    border-radius: 0 var(--ot-r) var(--ot-r) var(--ot-r);
    background: rgba(0, 0, 0, 0.04);
}
.option_tab_panel::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    top: calc(-1 * var(--ot-b));
    left: calc(-1 * var(--ot-b));
    right: calc(-1 * var(--ot-b));
    bottom: calc(-1 * var(--ot-b));
    border: var(--ot-b) var(--ot-style);
    border-color: var(--ot-light) var(--ot-dark) var(--ot-dark) var(--ot-light);
    border-radius: 0 var(--ot-r) var(--ot-r) var(--ot-r);
    pointer-events: none;
    /* 上辺は右上の円弧 (右端 r) だけ残して消す */
    -webkit-mask:
        linear-gradient(#000 0 0) top left / calc(100% - var(--ot-r)) var(--ot-b) no-repeat,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) top left / calc(100% - var(--ot-r)) var(--ot-b) no-repeat,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
}
/* 仕切り線は /control_panel の区切り (.horizontal_div) と同じ立体的な線 */
.option_divider {
    height: 1px;
    border: 3px outset #95b1df3b;
    margin: 0.2rem 0 0.8rem;
}
/* オプションダイアログの素のチェックボックス (行の左に余白を取って置くもの)。
   以前は同じ値をインライン style で持っていた */
.option_inline_checkbox {
    margin-left: 0.8rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}
/* オプションのチェックボックス (OptionCheckbox)。オンでも枠の地色はそのまま
   でチェックマークだけ青。中身は透明にした checkbox を枠の上に重ねている */
.option_check_row {
    display: flex;
    align-items: center;
    margin: 0 0 0.5rem 0.8rem;
}
.option_check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}
.option_check_input {
    position: absolute;
    left: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    opacity: 0;
    cursor: inherit;
}
.option_check_box {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgba(2, 18, 53, 0.55);
    border-radius: 3px;
    /* ダイアログ地色 (#56a8ef) を少し明るくしただけの半透明 */
    background: rgba(255, 255, 255, 0.18);
}
/* チェックマーク (L 字の枠線を 45° 回す)。枠に収まる通常の大きさ
   (/manual_pipeline のダークだけ枠からはみ出す大きさ。manual_pipeline.css) */
.option_check_input:checked + .option_check_box::after {
    content: "";
    position: absolute;
    left: 0.3rem;
    top: 0.06rem;
    width: 0.28rem;
    height: 0.56rem;
    border: solid #1d4ed8;
    border-width: 0 0.16rem 0.16rem 0;
    transform: rotate(45deg);
}
.option_check_input:focus-visible + .option_check_box {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}
.option_check_input:disabled + .option_check_box,
.option_check_input:disabled ~ .option_check_label {
    opacity: 0.5;
}
.option_check:has(.option_check_input:disabled) {
    cursor: default;
}
.option_item {
    display: inline-flex;
    margin-left: 0.8rem;
    margin-right: 1.2rem;
}
/* 全体の包み（位置の基準にする） */
.tooltip-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* クエスチョンマークの見た目 */
.tooltip-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  background-color: #9999998a; /* アイコンの色 */
  color: white;
  border-radius: 50%;     /* 丸くする */
  font-size: 12px;
  font-weight: bold;
  margin-left: 4px;       /* 単語との隙間 */
}

/* 浮かび上がる説明文（初期状態は非表示） */
.tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  /* 初期位置（画面外に飛ばしておく） */
  top: 0;
  left: 0;
  pointer-events: none; /* ツールチップ自体がマウス操作を邪魔しないように */
  
  /* 吹き出しの見た目 */
  width: 300px;           /* 幅はお好みで */
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 8px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 999;           /* 他の要素より手前に */
  transition: opacity 0.2s; /* ふわっと表示 */
}

/* 広い内容（支払いブランド一覧など）向けのワイド版 */
.tooltip-text.tooltip-text-wide {
  width: 380px;
  max-width: calc(100vw - 16px);
}

/* 開き方・閉じ方は全ツールチップ共通 (tooltip_toggle.js): ホバーで表示 (ホバーできる端末だけ。
   ? で閉じた直後は離れるまで出さない = tooltip-dismissed)、? のクリック・タップで固定
   (tooltip-pinned)。固定中はツールチップがクリックを受け止める (後ろの選択肢・ボタンへ通さない) */
@media (hover: hover) {
  .tooltip-wrap:not(.tooltip-dismissed):hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
}
.tooltip-wrap.tooltip-pinned .tooltip-text {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  /* 固定中は文字をドラッグで選択できる (2026-11-02 ユーザー指示。祖先の user-select: none も受けない) */
  -webkit-user-select: text;
  user-select: text;
  cursor: text;
}
.tips_round_image {
    display: flex;
    
}
.tips_linear_image {
    display: block;
    margin-bottom: 3rem;
}
.tips_round_ok_image {
    content: url('/media/image/tips_round_ok.png');
    width: 316px;
    height: fit-content;
    margin-right: 6px;
    margin-bottom: 6px;
    max-width: 40vw;
}
.tips_overlap_round_ok_image {
    content: url('/media/image/tips_overlap_round_ok.png');
    width: 316px;
    height: fit-content;
    margin-bottom: 6px;
    max-width: 40vw;
}
.tips_parallel_ok_image {
    display: inherit;
    content: url('/media/image/tips_parallel_ok.png');
    width: fit-content;
    height: fit-content;
    margin-bottom: 6px;
    max-width: 90vw;
}
.tips_diagonal_ok_image {
    display: inherit;
    content: url('/media/image/tips_diagonal_ok.png');
    width: fit-content;
    height: fit-content;
    margin-bottom: 6px;
    max-width: 90vw;
}
.tips_nonparallel_ng_image {
    display: inherit;
    content: url('/media/image/tips_nonparallel_ng.png');
    width: fit-content;
    height: fit-content;
    margin-bottom: 6px;
    max-width: 90vw;
}
.tips_distance_ng_image {
    display: inherit;
    content: url('/media/image/tips_distance_ng.png');
    width: fit-content;
    height: fit-content;
    margin-bottom: 6px;
    max-width: 90vw;
}
.tips_sparse_ng_image {
    display: inherit;
    content: url('/media/image/tips_sparse_ng.png');
    width: fit-content;
    height: fit-content;
    margin-bottom: 6px;
    max-width: 90vw;
}
.tips_delicate_image {
    display: inherit;
    content: url('/media/image/tips_delicate.png');
    width: fit-content;
    height: fit-content;
    margin-bottom: 6px;
    max-width: 90vw;
}
/* .user_icon {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    padding-top: 0.2rem;
} */
/* .user_icon::before, .user_icon::after {
    content: '';
    display: block;
    margin: 0 auto;
    border: 0.3em solid #555555;
    box-sizing: border-box;
} */
/*   
.user_icon::before {
    height: 0.5em;
    border-radius: 50%;
} */
  
/* .user_icon::after {
    width: 0.6em;
    height: 0.4em;
    border-radius: 50% / 100% 100% 0 0;
} */
.usage_paragraph {
    margin-block: 1rem;
}
.usage_paragraph p {
    line-height: 1.4rem;
    margin-block: 0.5rem;
}
.models_diagram {
    width: 100%;
}
.diagram_caption {
    display: flex;
    justify-content: center
}
.option_expand {
    display: flex;
    padding-top: 1rem;
    margin-left: 0.5rem;
}
.expand_summary {
    text-align: center;
}
.time_expand {
    display: flex;
    justify-content: center;
    /* padding-left: 2.55rem; */
    padding-top: 3.5rem;
    margin-bottom: -0.4rem;
}
.server_info_label {
    transform: translateX(1.28rem);
}

ul a {
    display: block;
    width: 100%;
    height: 100%;
}
.clear_text_color {
    color: #00000000;
}
.input:disabled {
    background-color: #00000000;
    color: #00000000;
    border: 0.3vh outset #95b1df3b;
    cursor: not-allowed;
}
.private_recommend_link {
    display: flex;
    justify-content: center;
    margin-top: 1.8rem;
    padding-left: 0.68rem;
    padding-left: 2rem;
}
@keyframes blinking {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* 点滅アニメーションを適用 */
.blink {
  animation: blinking 0.5s ease-in-out infinite alternate;
}

@media only screen and (max-width: 1280px) {
  .main_wrapper {
      justify-content: space-evenly;
  }
  .account_body {
      width: 45rem;
  }
  #usage_inner_area {
      width: 70%;
  }
  .preuploaded_list_row {
    margin-left: 1.5rem;
  }
  .option_dialog {
    left: 10%;
  }
  dialog {
    max-width: 600px;
  }
  .option_block {
    margin-bottom: 1.2rem;
  }
}

@media only screen and (min-width: 881px) {
  #canvas_area_layout:has(.contour_base_image_layout){
      width: 40%;
  }
  #control_area_layout {
      margin-top: 50px;
  }
  .control_area:not(:has(.process_block)) {
      display: block;
  }
}

@media only screen and (max-width: 880px) {
  body {
      height: auto;
  }
  dialog {
    max-width: 500px;
  }
  #root {
      width: fit-content;
      height: fit-content;
  }
  #main_wrapper_layout {
      height: auto;
  }
  .navigation_wrapper {
    padding-top: 1.5rem;
  }
  #site_title {
    max-width: 305px;
    margin: 0 auto;
    padding-top: 1rem;
    padding-left: 0;
    padding-bottom: 0;
  }
  #exclusive_root .page_explanation {
    width: 80%;
    margin: 0 auto;
  }
  .intro_links_outer {
    width: 50%;
    margin: 0 auto 1rem auto;
  }
  .main_ui {
      display: block;
  }
  #user_login {
    padding-top: 1rem;
  }
  #pointcloud_viewer {
      min-height: 100vh;
      width: 100%;
      height: 100%;
  }
  .account_body {
    width: 30rem;
  }
  .subtitle_adjust {
      margin: 0 auto;
  }
  .main_wrapper {
      display: grid;
      justify-content: center;
  }
  #canvas_area_layout {
      width: auto;
      max-width: 90%;
      margin: 0 auto;
      position: relative;
  }
  #canvas_inner {
      height: 90%;
  }
  #control_area_layout {
      width: 100%;
      height: auto;
  }
  .shared_limit_text {
      margin-left: 0;
  }
  .execute_button_layout {
      margin: 0.8rem auto;
  }
  .execute_button_block {
      flex-direction: column;
  }
  .execute_button_label {
      flex-direction: column;
  }
  .progress_circle {
      flex-direction: column;
      margin-top: 0.5rem;
  }
  .load_circle_text {
      margin-top: 0.5rem;
      padding-left: 5rem;
  }
  .load_circle_adjust {
    
  }
  .progress_text {
      flex-direction: column;
      margin-top: 0.5rem;
      margin-left: 3vw;
  }
  .cancel_additional_style {
      margin-right: auto;
      margin-left: auto;
  }
  .credit_text_upload_adjust {
      margin-left: 2rem;
      margin-top: 1.0rem;
      text-align: center;
  }
  .credit_text_pointcloud_adjust {
      margin-left: 0.8rem;
  }
  .credit_text_mesh_adjust {
      margin-left: 0.75rem;
  }
  .credit_text_texture_adjust {
      margin-left: 1.25rem;
  }
  .download_buttons {
      margin-top: 1rem;
      margin-left: 0;
      margin-bottom: 2rem;
      min-height: 30%;
  }
  /* 基本ルール (.dataset_controls, ファイル後方) より優先させるため特異度を上げる */
  .three_canvas_button .dataset_controls {
      margin-left: 0;
  }
  /* 工程列と Re-run の仕切りの間隔はデスクトップと同程度に保つ */
  .three_canvas_button .dataset_controls .download_buttons {
      margin-bottom: 0;
  }
  .three_canvas_button .dataset_controls .cancel_reset_button_area {
      padding-top: 0;
  }
  .download_block_outer {
      flex-direction: column;
      align-items: center;
      margin-left: 0;
      width: 4rem;
  }
  .download_text {
      white-space: nowrap; 
      margin: 5px 5px 5px 15px;
  }
  #target_image {
      max-height: 100%;
      max-width: 100%;
      margin: 0 auto;
  }
  #layered_base_image {
      position: relative;
      max-height: 100%;
      max-width: 100%;
      margin: 0 auto;
  }
  #uploaded_file_list {
      min-height: 80vw;
      min-width: fit-content;
      width: 80vw;
      height: fit-content;
    }
  .uploaded_file_list_outer {
      display: block;
  }
  .upload_container {
    text-align: center;
  }
  .upload_forms_div {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-evenly;
      width: 100%;
  }
  .upload_button_label {
      display: block;
      text-align: center;
      width: fit-content;
      margin-top: 0;
  }
  .upload_button_label_with_preupload {
    display: block;
    text-align: center;
  }
  .recreate_button {
      margin-bottom: 0.35rem;
  }
  .warning_display_details {
    justify-items: center;
  }
  .warning_display_summary {
    margin: 0;
  }
  .warning_display_content {
    width: 22rem;
  }
  .download_redo_block {
      justify-content: center;
      align-items: flex-end;
      margin-left: 3.3rem;
  }
  .download_redo_in_progress_block {
      justify-content: center;
      align-items: flex-end;
  }
  .process_text_area {
      width: 100%;
      justify-items: center;
      padding: 10px 0;
  }
  .process_arrow {
      margin-left: 0;
  }
  .progress_area {
      margin: 0.8rem auto;
  }
  .preupload_buttons_layout {
    justify-content: center;
    margin-left: 0;
  }
  .preuploaded_select {
    margin-top: 1.5rem;
  }
  #control_buttons_div {
      display: block;
      margin-left: 0;
      width: 100%;
      justify-items: center;
  }
  .exclusive_launcher_area {
      min-width: auto;
  }
  .server_list_row {
      display: block;
      width: 21rem;
      justify-items: left;
      margin-top: 15px;
      margin-left: auto;
      margin-right: auto;
      padding-top: 1rem;
      padding-bottom: 1rem;
      background-color: #298add5c;
      border: 0.4vh outset #9ab7e63b;
  }
  .open_exclusive_button {
      width: 60px;
      height: 60px;
}
  .private_data_time {
      margin-left: 1rem;
      margin-bottom: 0.2rem;
  }
  .private_data_type {
      margin-top: 0.4rem;
      margin-bottom: -1rem;
      margin-left: 1rem;
      margin-right: 12rem;
  }
  .private_data_link {
      margin-left: 1rem;
      margin-bottom: -0.5rem;
      flex-direction: row-reverse;
  }
  .private_data_state {
      margin-left: 0.07rem;
      margin-right: 7.5rem;
      display: flex;
  }
  .private_data_stop {
      margin-left: 0.9rem;
  }
  .exclusive_list_row {
      display: block;
      width: 30rem;
      border: 0.4vh outset #95b1df3b;
      margin-bottom: 3rem;
      margin-left: auto;
      margin-right: auto;
      justify-items: left;
      padding: 1rem;
  }
  .preuploaded_list_row {
      display: block;
      width: 30rem;
      border: 0.4vh outset #95b1df3b;
      margin-bottom: 3rem;
      margin-left: auto;
      margin-right: auto;
      justify-items: right;
      padding: 1rem;
  }
    .preuploaded_data_time {
        margin-right: 0rem;
        margin-bottom: 0.2rem;
        width: 18rem;
    }
  .preuploaded_data_count {
      margin-top: 0.4rem;
      margin-right: 0rem;
      margin-bottom: 0.2rem;
      width: 6rem;
  }
  .preuploaded_data_size {
      margin-top: 0.4rem;
      margin-right: 0rem;
      margin-bottom: 0.2rem;
      width: 6rem;
  }
  .preuploaded_data_name {
      margin-top: 0.3rem;
      margin-right: 0rem;
      margin-bottom: 0.2rem;
      width: 20rem;
      max-width: max-content;
      overflow-wrap: break-word;
  }
  .preuploaded_data_delete {
        margin-top: 0.5rem;
        margin-left: 0rem;
        margin-right: 0rem;
        width: 18rem;
  }
  .download_data_time {
      margin-right: 0rem;
      margin-bottom: 0.2rem;
      width: 18rem;
  }
  .download_data_type {
      margin-right: 0rem;
      margin-bottom: 0.2rem;
      width: auto;
  }
  .download_data_size {
      margin-right: 0rem;
      margin-bottom: 0.2rem;
      width: auto;
  }
  .download_data_name {
      margin-right: 0rem;
      margin-bottom: 0.1rem;
      width: 20rem;
      max-width: max-content;
      overflow-wrap: break-word;
  }
  .download_data_options {
      max-width: 50vw;
  }
  .download_data_delete {
      margin-left: 0rem;
      width: 18rem;
  }
  .option_button {
    margin-top: 1.2rem;
    margin-left: 0.7rem;
  }
  .option_dialog {
    top: 55%;
    left: 15%;
  }
  .result_panel {
      width: fit-content;
      margin-right: 0.5rem;
      margin-top: -3rem;
      margin-bottom: 0.5rem;
      margin-left: 25rem;
  }
  .pointcloud_download_button {
      width: fit-content;
      margin-right: 0.5rem;
      margin-top: -3rem;
      margin-bottom: 0.5rem;
      margin-left: 25rem;
  }
  .mesh_download_button {
      width: fit-content;
      margin-right: 0.5rem;
      margin-top: -3rem;
      margin-bottom: 0.5rem;
      margin-left: 25rem;
  }
  .glb_download_button {
      width: fit-content;
      margin-right: 0.5rem;
      margin-top: -3rem;
      margin-bottom: 0.5rem;
      margin-left: 25rem;
  }
  .describe_element {
      display: block;
      /* width: 70%; */
      width: auto;
      max-width:  80%;
      margin-left: auto;
      margin-right: auto;
  }
  .describe_area {
      margin: 0 auto;
  }
  .describe_data {
      margin-left: 1rem;
  }
  .describe_card_number {
      margin-left: 1rem;
  }
  .payment_link {
      margin-left: 5.8rem;
  }
  .payment_month_select {
      margin-left: 4rem;
  }
  #contour_surface_layout {
      max-width: 100%;
      max-height: 100%;
      margin: 0 auto;
      display: block;
      position: relative;
  }
  #viewer_canvas_layout {
      width: auto;
      margin: 0 auto;
      position: relative;
  }
  .empty_three_canvas {
      width: 60vw;
      height: 60vw;
      min-width: auto;
      margin: 0 auto;
  }
  #three_canvas {
      max-height: 98%;
      max-width: 98%;
      margin: 0 auto;
  }
  .three_canvas_button {
      display: flex;
      flex-direction: column;
  }
  .elevation_buttons {
      margin-top: 0;
      display: flex;
      flex-direction: column;
  }
  .elevation_button {
      margin-bottom: 0.1rem;
  }
  .reset_button_layout {
      margin: 0 auto;
  }
  .reset_button_adjust {
      margin-top: 0;
      margin-left: auto;
      margin-right: auto;
  }
  #mailto_layout {
      position: relative;
      display: flex;
      justify-content: flex-end;
      width: auto;
  }
  #canvas_switcher {
      margin: 0 10px 0 0;
  }
  .process_block {
      box-sizing: border-box;
      padding-right: 10px;
      padding-left: 10px;
  }
  .process_step {
      width: fit-content;
      height: fit-content;
      line-height: 1.3;
      font-size: smaller;
      background-color:#22222211;
      border: 3px outset #95b1df3b;
      display: inline-block;
  }
  .right_triangle {
      margin: 0px 0.15rem 0px 0.15rem;
      width: 0;
      height: 0;
      border-top: 7px solid transparent;
      border-left: 7px solid black;
      border-bottom: 7px solid transparent;
  }
  .common_button {
    padding: 3px 8px;
  }
  .cancel_reset_button_area {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  .launch_server_list {
      justify-content: center;
      margin-left: 0;
      margin-bottom: 1.5rem;
  }
  .horizontal_div {
      margin: 0 auto;
  }
  .usage_text {
      padding-left: 0.5rem;
  }
  .private_recommend_link {
      padding-left: 1rem;
  }
  .license_text {
      white-space: pre-wrap;
      width: 85%;
  }
  .option_block {
    margin-bottom: 0.6rem;
  }
  .tips_text {
      padding-left: 4vw;
  }
}

@media only screen and (max-width: 680px) and (orientation: portrait) {
  :root {
      --main-background: linear-gradient(#1764ff, #99c2bc);
  }
  #pointcloud_viewer header p {
    padding-right: 0;
  }
  .empty_three_canvas {
      width: 80vw;
      height: 80vw;
  }
  #site_header {
    display: block;
    margin-bottom: 0rem;
  }
  #site_title {
    padding-top: 1rem;
  }
  .page_explanation {
    margin-left: 10%;
    padding-bottom: 1rem;
  }
  .account_body {
    width: 29rem;
  }
  .common_button {
    padding: 3px 12px;
  }
  .control_panel_list_title {
    width: fit-content;
    margin: 0 auto 1.4rem auto;
  }
  .launch_server_list {
      display: block;
      margin: 0.5rem auto 1.5rem auto;
      width: fit-content;
  }
  .launch_button {
    margin: 0 auto;
  }
  .exclusive_launcher_area {
      margin: 0.8rem 0 0.8rem 0;
  }
  .exclusive_list_row {
      width: 25rem;
  }
  .preupload_buttons_layout {
    display: block;
    justify-items: center;
  }
  .preuploaded_list_row {
      width: 25rem;
  }
  .preupload_uploading {
    margin-left: auto;
    margin-right: auto;
  }
  .horizontal_div {
      margin: 0 auto;
  }
  #user_login {
    justify-content: flex-end;
  }
  .article_text {
      padding-left: 0;
  }
  .payment_link {
      margin-left: 3.8rem;
  }
  .payment_month_select {
      margin-left: 2rem;
  }
  .account_body_wrapper {
      min-height: auto;
  }
  .overlay_center {
      transform: none;
  }
  .help_dialog_layout {
    max-width: 460px;
  }
  .credit_text_upload_adjust {
      margin-left: 0.3rem;
  }
  .option_dialog {
      top: 50%;
      left: 10%;
      max-width: 75%;
      max-height: 70%;
  }
  .option_block {
    margin-bottom: 0.8rem;
  }
  .result_panel {
      width: fit-content;
      margin-left: 21rem;
  }
  .pointcloud_download_button {
      width: fit-content;
      margin-left: 21rem;
  }
  .mesh_download_button {
      width: fit-content;
      margin-left: 21rem;
  }
  .glb_download_button {
      width: fit-content;
      margin-left: 21rem;
  }
  .spread_outer {
      width: 95vw;
  }
  .example_explain_outer {
      width: 80vw;
      margin: 1.7rem auto 0 auto;
  }
}

/* 縦長のデバイス用 */
@media only screen and (max-width: 480px) and (orientation: portrait) {
    body {
        height: auto;
    }
    #root {
        min-width: 100%;
        width: fit-content;
        height: fit-content;
    }
    #main_wrapper_layout {
        height: auto;
    }
    #site_title {
        min-width: 210px;
    }
    .page_explanation {
        margin-left: 8%;
    }
    .main_ui {
        display: block;
    }
    #pointcloud_viewer {
        min-width: 100%;
        width: 100%;
        height: 100%;
    }
    .empty_three_canvas {
        width: 90vw;
        height: 90vw;
    }
    .subtitle_adjust {
        margin: 0 auto;
    }
    .main_wrapper {
        display: grid;
        justify-content: center;
    }
    #site_header {
        flex-wrap : wrap;
        padding-bottom: 2rem;
    }
    .intro_links_outer {
      width: 70%;
    }
    .account_body {
        min-width: 20rem;
        width: 90%;
    }
    .preupload_buttons_layout {
        gap: 0rem;
    }
    .preuploaded_list_row {
        width: 85%;
    }
    .preuploaded_data_time {
        margin-left: 0.3rem;
        width: 90%;
    }
  .preuploaded_data_count {
      margin-left: 0.3rem;
  }
  .preuploaded_data_size {
      margin-left: 0.3rem;
  }
  .preuploaded_data_name {
        margin-left: 0.3rem;
        width: 95%; 
  }
  .preuploaded_data_delete {
        margin-left: 0.3rem;
        width: 90%;
  }
    .exclusive_list_row {
        width: 85%;
    }
    .download_data_time {
        margin-left: 0.3rem;
        width: 90%;
    }
    .download_data_type {
        margin-left: 0.3rem;
    }
    .download_data_size {
        margin-left: 0.3rem;
    }
    .download_data_name {
        margin-left: 0.3rem;
        width: 81%;
    }
    .download_data_options {
        max-width: 67vw;
    }
    .download_data_delete {
        margin-left: 0.3rem;
        width: 90%;
    }
    .help_arrows_layout {
        margin-left: 16vw;
    }
    .help_toggle {
        bottom: 20px;
        right: 20px;
    }
    .option_dialog {
        top: 45%;
        left: 5%;
    }
    .result_panel {
        margin-left: 82%;
    }
    .pointcloud_download_button {
        margin-left: 82%;
    }
    .mesh_download_button {
        margin-left: 82%;
    }
    .glb_download_button {
        margin-left: 82%;
    }
    #canvas_area_layout {
        width: auto;
        max-width: 90%;
        margin: 0 auto;
        position: relative;
    }
    #control_area_layout {
        width: 100%;
        height: auto;
    }
    #canvas_inner {
        height: 90%;
    }
    #target_image {
        max-height: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    #layered_base_image {
        position: relative;
        max-height: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
    .uploaded_file_list_outer {
        display: block;
    }
    .upload_button_label {
        display: block;
        text-align: center;
    }
    .upload_form_text {
        margin: 0.4rem;
        width: auto;
    }
    .preuploaded_select,
    .snapshot_dropdown {
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .download_buttons {
        margin-left: 0;
    }
    #control_buttons_div {
        display: block;
    }
    #contour_surface_layout {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
        display: block;
        position: relative;
    }
    #viewer_canvas_layout {
        width: auto;
        margin: 0 auto;
        position: relative;
    }
    #three_canvas {
        max-width: 100%;
        max-height: 100%;
        margin: 0 auto;
    }
    #mailto_layout {
        position: relative;
        display: flex;
        justify-content: flex-end;
        width: auto;
    }
    #canvas_switcher {
        margin: 0 10px 0 0;
    }
    .process_block {
        box-sizing: border-box;
        padding-right: 10px;
        padding-left: 10px;
    }
    .process_step {
        width: fit-content;
        height: fit-content;
        line-height: 1.3;
        font-size: smaller;
        background-color:#22222211;
        border: 3px outset #95b1df3b;
        display: inline-block;
    }
    .right_triangle {
        margin: 0px 0.15rem 0px 0.15rem;
        width: 0;
        height: 0;
        border-top: 7px solid transparent;
        border-left: 7px solid black;
        border-bottom: 7px solid transparent;
    }
    details[open] summary.server_info_label {
        width: fit-content;
        transform: translateX(100%);
    }
    .server_info_list {
        width: 20rem;
        max-width: 90vw;
    }
    #usage_inner_area {
        width: 90%;
        padding-inline: 10px;
        padding-block: 2px;
        margin-block: 5px;
    }
    .usage_text {
        max-width: 94vw;
    }
    .private_recommend_link {
        padding-left: 1rem;
    }
    .payment_link {
        margin-left: 2.8rem;
    }
    .payment_month_select {
        margin-left: 1rem;
    }
    .license_text {
        width: 85%;
    }
    .tips_text {
        padding-left: 2vw;
    }
}
.auto_shutdown_section {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 1rem;
}
.auto_shutdown_section .auto_shutdown_toggle {
    display: inline-block;
    font-size: 1rem;
}
.auto_shutdown_toggle {
    margin-top: 0.2rem;
    font-size: 0.9em;
    display: block;
}
.auto_shutdown_toggle label {
    display: inline-block;
}
.auto_shutdown_minutes_wrap {
    margin-left: 0.4rem;
}
.auto_shutdown_minutes_input {
    width: 3.5rem;
    text-align: right;
    margin: 0 0.2rem;
}
.auto_shutdown_minutes_input:disabled {
    background-color: #00000000;
    cursor: not-allowed;
    color: #00000099;
}
.auto_shutdown_banner {
    position: fixed;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    background-color: #2a3540ee;
    color: #ffffff;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px #00000066;
    pointer-events: auto;
}
.auto_shutdown_banner--final {
    background-color: #b03030ee;
}
.auto_shutdown_banner--failed {
    background-color: #6a3030ee;
}
.auto_shutdown_banner--canceled {
    background-color: #305a30ee;
}
.auto_shutdown_cancel_btn {
    margin-left: 0.8rem;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    border: 1px solid #ffffffaa;
    background-color: #ffffff22;
    color: #ffffff;
    cursor: pointer;
}
.auto_shutdown_cancel_btn:hover {
    background-color: #ffffff44;
}

/* --------------------------------------------------------------------------
 * インライン style 属性からの移行用ユーティリティクラス。
 * CSP style-src から 'unsafe-inline' を除去する対応（各テンプレートの
 * style="..." をこれらのクラスへ置換）。ファイル末尾に置くことで、既存の
 * 単一クラスセレクタと同詳細度でも後勝ちで確実に適用される。
 * -------------------------------------------------------------------------- */
.img-no-orient { image-orientation: none; }
.img-no-orient-wide { image-orientation: none; max-width: 98vw; }
.block-center-top { display: block; margin: 3rem auto 0 auto; text-align: center; }
.block-center-top-bb { display: block; margin: 3rem auto 0 auto; text-align: center; box-sizing: border-box; }
.mx-auto-fit { width: fit-content; margin: 0 auto; }
.watch-video-margin { margin: 3rem 0 1.7rem 0; }
.example-block-28 { width: 28rem; margin: 0.4rem auto 0.5rem auto; }
.mb-sm { margin-bottom: 0.3rem; }
.text-left { text-align: left; }
.mt-5rem { margin-top: 5rem; }
.section-gap-bottom { margin: 7rem 0 0 0; padding-bottom: 4rem; }
.transit-note { margin-top: 30px; margin-left: 1rem; }

/* --------------------------------------------------------------------------
 * 3D Viewer: dataset の生成物切替パネル（/3d_viewer?dataset=ID で表示）。
 * canvas_area (flex row) の末尾子要素 .viewer_side_panel の中で、
 * 切替ボタン群 (.viewer_model_switch) → 操作ボタン群 (.elevation_buttons) の順に
 * キャンバスの右に縦に並ぶ。
 * -------------------------------------------------------------------------- */
.viewer_side_panel {
    display: flex;
    flex-direction: column;
    margin-left: 1.4rem;
}
/* 切替ボタン群から少し下に離して操作ボタンを置く
   (通常配置の margin: 10rem 0.3rem 0 auto を上書き) */
.viewer_side_panel .elevation_buttons {
    margin: 2rem 0 0 0;
    align-items: stretch;
}
/* dataset 表示時: 横長画面で縦スクロールが出ないサイズに抑え、
   下端に 2rem の余白を残す。7.1rem ≒ ヘッダー+上マージン+枠 (約5.1rem) + 下余白2rem */
#pointcloud_viewer .dataset_mode #three_canvas {
    height: min(calc(100vh - 7.1rem), 70vw);
    width: auto;
    max-width: none;
    max-height: none;
}
#pointcloud_viewer #viewer_canvas_layout.dataset_mode {
    margin: 1rem auto 0;
    justify-content: center;
}
.viewer_model_switch {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 9.5rem;
}
.viewer_model_switch_title {
    font-weight: bold;
    font-size: 0.95rem;
    margin: 0 0 0.3rem 0;
    overflow-wrap: anywhere;
}
.viewer_model_switch_button {
    padding: 0.45rem 0.8rem;
    border: 1px solid #95b1df;
    border-radius: 6px;
    background: #fff;
    color: #333;
    cursor: pointer;
    font-size: 0.9rem;
    text-align: left;
}
.viewer_model_switch_button:hover {
    background: #eef3fb;
}
.viewer_model_switch_button.viewer_model_active {
    background: #3e64ad;
    border-color: #3e64ad;
    color: #fff;
}
/* 880px 以下: サイドパネル (切替+操作ボタン) をキャンバスの下に回す。
   この幅では縦スクロールを許容し、キャンバスは横幅基準でサイズを決める。
   形は正方形 (横長のままだと狭い横幅に合わせて高さも縮み、小さくなり過ぎる。
   ローカルファイルの表示と同じ形。描画バッファは placement.js が要素の実寸に
   合わせる) */
@media only screen and (max-width: 880px) {
    #pointcloud_viewer #viewer_canvas_layout.dataset_mode {
        flex-direction: column;
        align-items: center;
    }
    #pointcloud_viewer .dataset_mode #three_canvas {
        width: min(92vw, calc(100vh - 7.1rem));
        height: auto;
        aspect-ratio: 1 / 1;
    }
    .viewer_side_panel {
        margin: 1.2rem 0 2rem;
        align-items: center;
    }
    /* 切替ボタンはタイトルの下に横並び (折り返しあり) */
    .viewer_side_panel .viewer_model_switch {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        min-width: 0;
    }
    .viewer_side_panel .viewer_model_switch_title {
        width: 100%;
        text-align: center;
        margin-bottom: 0.1rem;
    }
    /* 操作ボタンも横並びにして縦方向の占有を抑える */
    .viewer_side_panel .elevation_buttons {
        margin: 1.2rem 0 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 0.4rem;
    }
    .viewer_side_panel .point_size_buttons {
        flex-direction: row;
        gap: 0.4rem;
    }
    .viewer_side_panel .move_stride_slider,
    .viewer_side_panel .brightness_panel,
    .viewer_side_panel .keyframe_route_panel,
    .viewer_side_panel .region_edit_panel {
        margin: 0;
    }
}

/* --------------------------------------------------------------------------
   dataset_sfm ("/" 共用サーバーのステップ実行ページ) 追加分
   -------------------------------------------------------------------------- */
.dataset_select_area {
    display: flex;
    justify-content: center;
    margin: 1rem 0;
}

.dataset_sfm_notice {
    display: flex;
    justify-content: center;
    margin: 3rem 1rem;
    text-align: center;
}

/* 右パネル ("/manual_pipeline")。工程の流れ (.download_buttons) と
   キャンセル (.cancel_reset_button_area) を同じ縦軸で中央揃えにする。
   従来は .download_buttons だけに margin-left: 20px が付き軸がずれていた */
.dataset_controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-left: 20px;
}
.dataset_controls .download_buttons {
    margin-left: 0;
}
/* Re-run パネルの展開・収納で右パネルの高さが変わっても、左のキャンバスは
   動かさない (margin: auto による右パネル基準の垂直中央寄せを無効化)。
   empty キャンバスは画面の高さだけで決まる上余白で、上端固定の位置とヘッダー
   (static, 下端 ≈ 115px) より下の表示領域の上下中央との中間 (中央寄せの余白
   / 2 = / 4、低い画面では 0) からさらに 40px 下げる。高さ = 50vh + 縁 0.4vh × 2。
   モデル表示中のキャンバスは empty キャンバスと同じ枠 (.mp_canvas_slot) に
   右上の角を揃えて置き、表示操作ボタンはその下 (下の説明) */
@media only screen and (min-width: 881px) {
    body.manual_pipeline .three_canvas_button {
        align-items: flex-start;
        /* 二又の完了表示 (≈770px) がキャンバスの横に収まらない中くらいの
           画面幅では、右パネルをキャンバスの下へ折り返す (はみ出し防止) */
        flex-wrap: wrap;
        justify-content: center;
    }
    body.manual_pipeline .three_canvas_button #three_canvas {
        margin-top: 0;
        margin-bottom: 0;
    }
    body.manual_pipeline .three_canvas_button .empty_three_canvas,
    body.manual_pipeline .three_canvas_button .mp_canvas_slot {
        margin-top: calc(max(0px, (100vh - 115px - 50.8vh) / 4) + 40px);
        margin-bottom: 0;
        /* キャンバスだけ 30px 左へ。margin だと中央寄せの行ごと動いて右パネルも
           ずれるため、レイアウトに影響しない相対位置でずらす */
        position: relative;
        left: -30px;
    }
    /* empty キャンバス横の右パネル (control 領域) は 10px 右へ (同じく相対位置) */
    body.manual_pipeline .three_canvas_button .empty_three_canvas + .dataset_controls,
    body.manual_pipeline .three_canvas_button .mp_canvas_slot + .dataset_controls {
        position: relative;
        left: 10px;
    }
    /* モデル表示中: 表示操作ボタン + 工程名 + キャンバスを包む枠を empty キャンバスと
       同じ幅 (min-width 480px + 縁 3px × 2) にし、キャンバスを枠の右端に寄せる。
       右上の角と右パネル (折り返しも) は Display を押す前と同じまま、キャンバスの
       大きさの差 (min(40vw, 55vh)) は枠の左へはみ出す。枠は 1 列の grid で、列の幅 =
       キャンバスの幅 (min-content)。1 行目にキャンバス、2 行目に表示操作ボタン */
    body.manual_pipeline #viewer_canvas_layout {
        width: auto;
        margin-left: 0;
    }
    body.manual_pipeline .three_canvas_button .mp_canvas_slot {
        display: grid;
        grid-template-columns: min-content;
        justify-content: end;
        align-items: start;
        flex: none;
        width: 486px;
    }
    body.manual_pipeline .three_canvas_button .mp_canvas_slot #three_canvas {
        grid-row: 1;
        grid-column: 1;
        margin: 0;
    }
    /* 工程名はキャンバスの上の左端。キャンバスと同じ升に置いて自分の高さ + 0.25rem
       だけ上へずらし、上の余白 (最小 40px) の中に出す (キャンバスは動かさない) */
    body.manual_pipeline .three_canvas_button .mp_canvas_slot .canvas_label {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
        margin: 0;
        transform: translateY(calc(-100% - 0.25rem));
    }
    /* 表示操作ボタンはキャンバスの下に、従来どおりの縦積み (幅はいちばん広い
       ボタンにそろう) で、右端をキャンバスの右端から 0.6rem 内側に置く。
       キャンバスの上の余白 (1920×1080 で 127px、最小 40px) には収まらないことが
       あるため下 (いちばん高いのは点群のときの組) */
    body.manual_pipeline .three_canvas_button .mp_canvas_slot .elevation_buttons {
        grid-row: 2;
        grid-column: 1;
        justify-self: end;
        margin: 0.6rem 0.6rem 0 0;
    }
}
/* モデル表示中の枠は横長表示だけ (上の display: grid)。他では枠を消し、表示操作
   ボタン・工程名・キャンバスを従来どおり .three_canvas_button の子として並べる */
.mp_canvas_slot {
    display: contents;
}
/* キャンバスの左上に出す名前 (placement.js の canvasLabel。/manual_pipeline の
   工程名)。見た目は /3d_viewer のファイル名 (viewer.css の .vw_file_name) と同じ。
   縦長表示では表示操作ボタンとキャンバスの間の行 */
.canvas_label {
    margin: 0 0 0.25rem;
    padding: 0 0.1rem;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* 完了工程スロット: ダウンロードボタンの右隣に "Re-run" トグル
   (.pipeline_branch_switch と同じテキストリンク風)。展開領域はダウンロード
   行の真上にスロット全幅で出し、中の実行ボタン枠 (.execute_button_layout) は
   上の工程列と同じ縦のラインに中央揃え。展開中のトグルはダウンロード行から
   外れ、展開領域の先頭 (実行ボタン枠の上) に中央揃えで出る。
   ダウンロードボタン自体も工程列 (ラベル・">>") と同じ中央ラインに置く:
   行の幅はボタンだけにし、Re-run と変換ボタンはボタンの右に絶対配置
   (行の幅に含めない) */
.dataset_download_row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dataset_download_row .dataset_slot_side_actions {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.6rem);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.dataset_slot_rerun_toggle {
    padding: 0.15rem 0.4rem;
    border: 0;
    background: none;
    color: #0a3fab;
    font-size: 0.85rem;
    white-space: nowrap;
    cursor: pointer;
}
.dataset_slot_rerun_toggle:hover {
    opacity: 0.75;
}
.dataset_slot_rerun_marker {
    font-size: 0.7em;
    margin-right: 0.25rem;
}
/* 縦長 (スマホ) では右側の操作 (Re-run + 変換 + 複製) が画面外へ出るため、
   絶対配置をやめてダウンロードボタンの下に中央揃えで折り返す */
@media (max-width: 880px) {
    .dataset_download_row {
        flex-direction: column;
        gap: 0.4rem;
    }
    .dataset_download_row .dataset_slot_side_actions {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        justify-content: center;
    }
}
/* 展開領域の開閉アニメーション: 1 行グリッドの行の高さを 0fr ⇔ 1fr で
   transition し (中身の実際の高さまで伸び縮みする)、中身をフェードさせる。
   開いた状態は .dataset_slot_rerun_panel_open (dataset_sfm.js が畳んだ高さで
   一度描画してから付ける)。閉じるときはクラスを外し、パネル自身の
   transitionend で DOM から外す。中身ははみ出さないよう inner で切り抜く */
.dataset_slot_rerun_panel {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows 0.25s ease;
}
.dataset_slot_rerun_panel.dataset_slot_rerun_panel_open {
    grid-template-rows: 1fr;
}
.dataset_slot_rerun_panel_inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}
/* 先頭の Re-run トグルのフォーカス枠が切り抜かれない余白。inner の
   padding だと畳んだ高さ (0fr) が 0 にならず、開閉の前後で下が 3px 跳ねる
   ので、中身側の margin で取る */
.dataset_slot_rerun_panel_inner > .dataset_slot_rerun_toggle {
    margin-top: 3px;
}
.dataset_slot_rerun_panel_open .dataset_slot_rerun_panel_inner {
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .dataset_slot_rerun_panel,
    .dataset_slot_rerun_panel_inner {
        transition: none;
    }
}
.dataset_slot_rerun_panel .execute_button_layout {
    margin: 0.2rem 0 0.4rem;
}

/* /control_panel: 有料サーバー廃止後の Under Construction 案内 */
.private_server_notice {
    border: 0.4vh outset #95b1df3b;
    padding: 1rem 1.5rem;
    max-width: 40rem;
    color: #021235;
    line-height: 1.6;
}
.private_server_notice_title {
    font-weight: bold;
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
}