@charset "UTF-8";

/* ======================================================================
   全ページ共通の待機表示（#loadingView_）

   モダンブラウザ: シリコンダイの走査（#loadingViewIc_）
   IE11以下      : 従来のGIF（#loadingViewImage_）。判定と生成は
                   /html/common/js/loadingViewImage.js 側で行う

   ※IE11はCSSカスタムプロパティ非対応のため var() を使わないこと。
   ====================================================================== */
#loadingView_ {
    display: none;
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 999;
    overflow: hidden;
    /* 子要素（SVG）を100%で描くため、背景色そのものを半透明にする。
       純黒より僅かに青寄りの暗色にすると、シアンの発光が沈まず締まって見える */
    background-color: rgba(6,9,16,0.72);
}
/* レガシー側は従来どおり要素ごと opacity で合成する。
   load.gif は全フレーム透過・disposal=0 なので四角は浮かないが、
   IE11の見た目を従来と完全に一致させるため指定を変えない。 */
.cs-legacy #loadingView_{
    background: #000;
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    opacity: 0.6;
}
/* 従来のGIF（レガシーのみ生成される） */
#loadingViewImage_ {
    position: absolute;
    top: 45%;
    left: 45%;
    width: 96px;
    height: 96px;
}
/* --- シリコンダイの走査（モダンのみ生成される） ---
   ほぼ黒の地に シアン #5BE0FF とバイオレット #8B7CFF の2色だけを使う。
   色を切り替えるのではなくグラデーションでにじませ、細い線で構成する。
   ・ダイを横断するソフトな走査ビーム
   ・ダイの周囲を逆回転する細いアーク2本
   IE11では生成されない（GIFに退避）。 */
#loadingViewIc_{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    width: 168px;
    height: 168px;
}
.aiRingTrack{ fill: none; stroke: #2C4266; stroke-width: 1; }
.aiArcA{
    fill: none; stroke: #5BE0FF; stroke-width: 2; stroke-linecap: round;
    -webkit-animation: aiSpin 2.6s linear infinite;
            animation: aiSpin 2.6s linear infinite;
}
.aiArcB{
    fill: none; stroke: #8B7CFF; stroke-width: 1.6; stroke-linecap: round;
    -webkit-animation: aiSpinRev 4.2s linear infinite;
            animation: aiSpinRev 4.2s linear infinite;
}
@-webkit-keyframes aiSpin{ to{ -webkit-transform: rotate(360deg) } }
@keyframes aiSpin{ to{ transform: rotate(360deg) } }
@-webkit-keyframes aiSpinRev{ to{ -webkit-transform: rotate(-360deg) } }
@keyframes aiSpinRev{ to{ transform: rotate(-360deg) } }

/* ベール rgba(6,9,16,.72) は白ページ上では #4C4E53 相当に見える。
   塗りをそれより暗くすると「黒い塊」になって構造が読めないため、
   輪郭・格子・機能ブロックを明るい青系にしてワイヤーフレームとして見せる。 */
.aiPkg{ fill: #101A29; stroke: #5A7BA8; stroke-width: 1.4; }
.aiDie{ fill: #0C1524; stroke: #4A6E9E; stroke-width: 1.2; }
.aiGrid{ stroke: #33507A; stroke-width: 0.8; }
.aiBlock{ fill: #1A2B44; stroke: #33507A; stroke-width: 0.7; }
.aiStub{ stroke: #5A7BA8; stroke-width: 1.6; stroke-linecap: round; }
.aiCore{
    fill: #5BE0FF;
    -webkit-animation: aiCore 2.6s ease-in-out infinite;
            animation: aiCore 2.6s ease-in-out infinite;
}
@-webkit-keyframes aiCore{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }
@keyframes aiCore{ 0%,100%{ opacity:.45 } 50%{ opacity:1 } }

.aiSweep{
    -webkit-animation: aiSweep 1.9s linear infinite;
            animation: aiSweep 1.9s linear infinite;
}
@-webkit-keyframes aiSweep{ from{ -webkit-transform: translateX(0) } to{ -webkit-transform: translateX(96px) } }
@keyframes aiSweep{ from{ transform: translateX(0) } to{ transform: translateX(96px) } }

@media (prefers-reduced-motion: reduce){
    .aiArcA, .aiArcB, .aiSweep, .aiCore{
        -webkit-animation: none; animation: none;
    }
}

/* ======================================================================
   BOM検索の待機表示（#bomLoading）

   モダンブラウザ: 部品テープの充填で進捗を表す
   IE11以下      : html.cs-legacy が付くので従来のGIF表示に退避
                   （判定は /jsp/include/context_path.jsp）

   ※IE11はCSSカスタムプロパティ非対応のため var() を使わないこと。
   ====================================================================== */
#bomLoading{
    position: fixed;
    _position: absolute; /* IE6対策 */
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /* #header が position:fixed; z-index:998 のため、未指定だと処理中に
       ヘッダーがオーバーレイの上に出て操作できてしまう */
    z-index: 999;
    /* 背面のページと混ざって読みにくくなるため、白のベールを濃めにする */
    background-color: rgba(255,255,255,0.8);
}
/* 従来のGIFは自身の背景色(白)で描画領域を塗るため、opacityで全体を合成しないと
   白い四角が浮いてしまう。GIFを使うレガシー側だけ従来の指定に戻す。 */
.cs-legacy #bomLoading{
    background-color: #FFFFFF;
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}

/* 中身はカードに載せて背面と分離する。flexはIE11で崩れるためtransformで中央寄せ */
#bomLoadingBox{
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
    width: 400px;
    padding: 18px 22px 20px;
    background-color: #FFFFFF;
    border: 1px solid #C9D6E4;
    border-top: 3px solid #144E94;
    box-shadow: 0 6px 24px rgba(16,26,38,0.16);
    text-align: center;
    font-family: "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic W3 JIS2004", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, Helvetica, Arial, sans-serif;
    color: #22303F;
}
.cs-legacy #bomLoadingBox{
    /* レガシーはGIFのみなのでカードを小さく */
    width: 200px;
    padding: 16px;
}
#bomLoadingCap{
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: bold;
    color: #144E94;
    letter-spacing: 0.02em;
}

/* --- 部品テープ（進捗） --- */
#bomTape{ display: block; margin: 0 auto 8px; width: 356px; height: 64px; }
.bomReelHub{ fill: none; stroke: #B4C6D9; stroke-width: 6; }
.bomReelIn{ fill: none; stroke: #D3DFEB; stroke-width: 3; }
.bomReelSpoke{ stroke: #B4C6D9; stroke-width: 3; stroke-linecap: round; }
.bomSpin{ -webkit-animation: bomSpin 3s linear infinite; animation: bomSpin 3s linear infinite; }
@-webkit-keyframes bomSpin{ to{ -webkit-transform: rotate(360deg); } }
@keyframes bomSpin{ to{ transform: rotate(360deg); } }
.bomTapeBody{ fill: #EEF3F9; stroke: #C0D0E1; stroke-width: 1; }
.bomSprocket{ fill: #FFFFFF; stroke: #C6D4E3; stroke-width: 1; }
.bomPocket{ fill: #FBFDFF; stroke: #CFDCE9; stroke-width: 1; }
.bomPocketOn{ fill: #D4E4F6; stroke: #144E94; stroke-width: 1; }
.bomChip{ fill: #CBD8E6; }
.bomChipOn{ fill: #144E94; }
.bomCursor{ stroke: #144E94; stroke-width: 2.4; }
.bomCursorGlow{ fill: #144E94; opacity: 0.10; }

/* --- 件数・率 ---
   件数はカード中央、率は右端に離して置く（数字同士が近くて紛れるため）。 */
#bomMeter{ position: relative; margin: 0 0 6px; }
#bomCount{
    font-size: 34px; font-weight: bold; letter-spacing: -0.02em;
    color: #144E94;
}
#bomCount .sep{ opacity: 0.35; margin: 0 4px; font-weight: normal; }
#bomCount .tot{ font-size: 18px; opacity: 0.7; font-weight: normal; color: #22303F; }
#bomPct{
    position: absolute;
    /* テープ本体の右端に揃える。
       #bomLoadingBox は box-sizing:content-box なので内容領域は400px、
       テープSVG(356px)はmargin:autoで左右22pxずつ余る。
       SVG内の本体右端はviewBox 400のうちx=396 → 396/400*356 = 352.4px。
       22 + 352.4 = 374.4px なので内容領域の右端から 25.6px 内側。 */
    right: 26px;
    bottom: 6px;
    font-size: 21px;
    font-weight: bold;
    color: #52627A;
}

/* --- 基板パルス（区切り線。数字と重ならないよう独立させている） ---
   1本のパルスが配線上を流れる。ビア（パッド）を白抜きで置いて基板らしさを出す。 */
#bomPcb{ display: block; margin: 2px auto 9px; width: 356px; height: 16px; }
.bomTrace{ fill: none; stroke: #C4D4E5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bomVia{ fill: #FFFFFF; stroke: #B6C7D9; stroke-width: 1.6; }
.bomSpark{
    fill: none; stroke: #144E94; stroke-width: 2.6;
    stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 46 420;
    -webkit-animation: bomRun 2.6s linear infinite;
            animation: bomRun 2.6s linear infinite;
}
@-webkit-keyframes bomRun{ from{ stroke-dashoffset:466 } to{ stroke-dashoffset:0 } }
@keyframes bomRun{ from{ stroke-dashoffset:466 } to{ stroke-dashoffset:0 } }

#bomPn{
    margin: 0; font-size: 12.5px; font-weight: bold; color: #22303F;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* --- 行スキャン --- */
#bomRows{ margin: 14px 0 0; border-top: 1px solid #E3E9F0; padding-top: 12px; }
.bomRow{
    height: 21px; line-height: 21px; padding: 0 8px; margin-bottom: 3px;
    background-color: #F4F7FB; border: 1px solid transparent;
    font-size: 11px; color: #22303F; text-align: left; white-space: nowrap;
}
.bomRow .rmark{ display: inline-block; width: 14px; text-align: center; font-weight: bold; }
.bomRow .rname{ display: inline-block; width: 244px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
/* メーカー名。CSVが空の行は照会後に回答メーカーで補われる */
.bomRow .rmk{ margin-left: 7px; opacity: 0.6; font-weight: normal; }
.bomRow .rqty{ display: inline-block; width: 74px; text-align: right; }
.bomRowWait{ color: #A8B7C7; background-color: #F8FAFC; }
.bomRowNow{ background-color: #DCE9F8; border-color: #144E94; color: #144E94; font-weight: bold; }
.bomRowHit .rmark{ color: #0E7C5A; }
.bomRowHit .rqty{ color: #0E7C5A; }
.bomRowMiss{ background-color: #FCEDE3; }
.bomRowMiss .rmark{ color: #B4530E; }
.bomRowMiss .rqty{ color: #B4530E; }

/* --- IE11以下のフォールバック（従来のGIF） --- */
#bomLoadingLegacy{ display: none; }
.cs-legacy #bomLoadingLegacy{ display: block; }
.cs-legacy #bomTape,
.cs-legacy #bomMeter,
.cs-legacy #bomPcb,
.cs-legacy #bomPn,
.cs-legacy #bomRows{ display: none; }
#bomLoading .bomLoadingMsg{
    margin: 0 auto;
    width: 100px;
    padding-top: 100px;
    text-align: center;
    background-image: url(/webImg/html/member/bom/img/bom_load.gif);
    background-position: center top;
    background-repeat: no-repeat;
    font-size: 13px;
    color: #0000ff;
    font-weight: bold;
}

/* --- 狭い画面では行スキャンを出さない ---
   オーバーレイはビューポート全面で内容を上下中央に置くため、
   幅が狭い場合も高さが低い場合も2段は収まらない。 */
@media screen and (max-width: 640px){
    #bomLoadingBox{ width: 300px; padding: 16px 14px 18px; }
    #bomTape{ width: 268px; }
    #bomPcb{ width: 268px; }
    #bomCount{ font-size: 30px; }
    /* 狭幅は内容領域300px・SVG268px（左右16px余り）なので 18.7px 内側 */
    #bomPct{ font-size: 18px; bottom: 5px; right: 19px; }
    #bomRows{ display: none; }
}
@media screen and (max-height: 560px){
    #bomRows{ display: none; }
}