/* ============================================================
   WEBオーダーの資料ページ(固定ページ order-documents)の枠
   一覧・検索・絞り込み・パスワードの部品は ips-site の docs-center.css(会社サイトの資料ダウンロードと共通)。
   ここでは WEBオーダーの中に置くための幅・余白と、ページの題・案内文だけを決める
   ============================================================ */

/* 通常の固定ページは本文の左右余白が無いため、ヘッダー(.ips-ws-wrap)と同じ幅・余白に揃える */
.ips-docs-page {
    box-sizing: border-box;
    max-width: 1240px;
    margin: 0 auto;
    padding: 8px 16px 40px;
    font-size: 16px;
}
.ips-docs-page .ips-docs-page__head { margin: 0 0 20px; }
.article .ips-docs-page h1.ips-docs-page__title,
.ips-docs-page h1.ips-docs-page__title {
    margin: 0; padding: 0; border: 0; background: none;
    font-size: 26px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; color: var(--ips-navy, #14265c);
}
.ips-docs-page .ips-docs-page__lead,
.ips-docs-page .ips-docs-page__lead p { margin: 6px 0 0; font-size: 14px; line-height: 1.8; color: #46586b; }
/* 部品のトークンを WEBオーダーの色に寄せる(紺・青) */
.ips-docs-page .dc { --dc-navy: var(--ips-navy, #14265c); }
@media (max-width: 600px) {
    .ips-docs-page { padding: 4px 12px 32px; }
    .article .ips-docs-page h1.ips-docs-page__title, .ips-docs-page h1.ips-docs-page__title { font-size: 22px; }
}

/* ips-site の部品が無い環境の簡単な一覧 */
.ips-docs-basic ul { margin: 0; padding: 0 0 0 1.2em; }
.ips-docs-basic li { margin: 0 0 6px; }
.ips-docs-basic small { color: #5b6478; }

/* WEBオーダーの灰色の地の上: 一覧・案内の面は白に */
.ips-docs-page .dc { --dc-s2: #fff; }
.ips-docs-page .dc .dc-group { padding: 0 16px 4px; border: 1px solid var(--dc-line); border-radius: var(--dc-rl); background: #fff; }
.ips-docs-page .dc .dc-group__title { margin: 0 -16px; padding: 12px 16px; }
.ips-docs-page .dc .dc-row:last-child { border-bottom: 0; }
.ips-docs-page .dc .dc-row:hover { background: #f6f8fb; }
.ips-docs-page .dc .dc-help, .ips-docs-page .dc .dc-empty { border: 1px solid var(--dc-line); }
/* 資料の部品の文字は端末のフォント(会社サイトの資料ダウンロードと同じ)。WEBオーダーの Webフォントの読み込み処理が
   一覧の文字を1つずつ調べて重くなる(行が増えるほど遅くなる)のを避ける */
.ips-docs-page .dc { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo, sans-serif; }

/* ============================================================
   資料ページの軽い枠(templates/order-documents.php)
   テーマ(Cocoon)のCSSを読まないので、ここで土台を決める。文字は端末のフォント(会社サイトの資料ダウンロードと同じ)
   ============================================================ */
html:has(body.ips-odocs) { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--odocs-hdr, 0px) + 8px); }
body.ips-odocs { margin: 0; line-height: 1.7; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo, sans-serif; -webkit-font-smoothing: antialiased; }
:where(body.ips-odocs) :where(*, *::before, *::after) { box-sizing: border-box; }
:where(body.ips-odocs) :where(a) { color: var(--ips-blue, #1a3fa8); }
:where(body.ips-odocs) :where(img, svg) { vertical-align: middle; }
:where(body.ips-odocs) :where(input, button, select, textarea) { font-family: inherit; }
.ips-odocs-main { display: block; padding: 24px 0 0; }
.ips-odocs-main:focus { outline: none; }
/* テーマの本文の枠と同じ左右の余白(ほかのWEBオーダーのページと同じ位置に) */
@media (max-width: 1023px) { .ips-odocs-main { padding: 20px 10px 0; } }

/* 本文へスキップ(フォーカスした時だけ出る) */
.ips-odocs-skip {
    position: absolute; top: 8px; left: 8px; z-index: 1000; padding: 10px 16px; border-radius: 8px;
    background: #fff; color: var(--ips-navy, #14265c) !important; font-weight: 700; text-decoration: none;
    box-shadow: 0 2px 10px rgba(20, 38, 92, .25); transform: translateY(-200%);
}
.ips-odocs-skip:focus { transform: none; outline: 2px solid var(--ips-blue, #1a3fa8); outline-offset: 2px; }

/* ヘッダーの製品検索・ボタン類のフォーカスの見た目 */
body.ips-odocs .ips-ws-search input[type="search"]:focus-visible { outline: 2px solid var(--ips-blue, #1a3fa8); outline-offset: 2px; }
body.ips-odocs :is(.ips-ws-topbar, .ips-ws-header, .ips-ws-catnav, .ips-ws-footer) :is(a, button):focus-visible { outline: 2px solid var(--ips-blue, #1a3fa8); outline-offset: 2px; }
body.ips-odocs .ips-ws-topbar a:focus-visible, body.ips-odocs .ips-ws-footer a:focus-visible { outline-color: #fff; }
body.ips-odocs .ips-ws-catnav a:focus-visible { outline-offset: -2px; }

/* 資料の部品の左の欄・パスワード欄の位置: 追従するヘッダーの下から(--odocs-hdr はヘッダーの高さ。枠のスクリプトが測る) */
.ips-docs-page .dc { --dc-top: calc(var(--odocs-hdr, 70px) + 16px); }

/* スマホ・タブレット: 下へスクロール中はヘッダーの製品検索の行を畳む(ヘッダーを検索の行の分だけ上へ送り、
   ロゴ・ログイン・カートの行は元の位置に戻す)。上へスクロールすると出す */
@media (max-width: 1023px) {
    body.ips-odocs .ips-ws-header,
    body.ips-odocs .ips-ws-header :is(.ips-ws-logo, .ips-ws-user) { transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
    body.ips-odocs .ips-ws-header .ips-ws-search { transition: opacity .2s ease, visibility 0s linear 0s; }
    .is-odocs-min body.ips-odocs .ips-ws-header { transform: translateY(calc(-1 * var(--odocs-row, 0px))); }
    .is-odocs-min body.ips-odocs .ips-ws-header :is(.ips-ws-logo, .ips-ws-user) { transform: translateY(var(--odocs-row, 0px)); }
    .is-odocs-min body.ips-odocs .ips-ws-header .ips-ws-search { opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility 0s linear .15s; }
    /* 資料の部品の「今の条件」の帯の位置は、資料の部品のスクリプトが今見えているヘッダーの下端に合わせる */
}
/* 横向きのスマホ(高さ 500px 以下): 「今の条件」の帯が出ている間はヘッダーを隠す(固定の部品で画面が狭くならないように。上へ戻すと出す) */
@media (max-height: 500px) and (max-width: 1023px) {
    body.ips-odocs .ips-ws-header { transition: transform .25s cubic-bezier(.2, .7, .3, 1); }
    .is-odocs-away body.ips-odocs .ips-ws-header { transform: translateY(-100%); }
}
/* 「今の条件」の帯が出ている間は、先頭へ戻るボタンを出さない(帯の「検索・絞り込み」で上へ戻れる。一覧の行のボタンに重ならないように) */
@media (max-width: 1023px) {
    .is-dc-float .ips-odocs-totop { opacity: 0; visibility: hidden; transform: translateY(8px); }
}

/* ページの先頭へ戻る(1画面分スクロールしたら右下に出る。44×44) */
.ips-odocs-totop {
    position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, calc(env(safe-area-inset-bottom) + 8px)); z-index: 300;
    display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px;
    background: var(--ips-navy, #14265c); color: #fff !important; box-shadow: 0 2px 10px rgba(20, 38, 92, .25);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.ips-odocs-totop.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease, visibility 0s; }
.ips-odocs-totop:focus-visible { outline: 2px solid var(--ips-blue, #1a3fa8); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .ips-odocs-totop:hover { background: var(--ips-blue, #1a3fa8); } }

@media (prefers-reduced-motion: reduce) {
    body.ips-odocs .ips-ws-header, body.ips-odocs .ips-ws-header :is(.ips-ws-logo, .ips-ws-user, .ips-ws-search), body.ips-odocs .dc.dc .dc-float, .ips-odocs-totop { transition: none !important; }
}