/* =========================================================
   おっぱい検索（page-search-oppai.php）
   ---------------------------------------------------------
   絞り込み・並び替えの中身は従来どおり。見た目だけ作り直した。
   PC：ツールバー＋中央モーダル／スマホ：ツールバー＋下からのシート＋追従ボタン
   ========================================================= */
.os{
    --os-accent:#ff6699;
    --os-accent-d:#e04f83;
    --os-accent-soft:#fff0f5;
    --os-ink:#2b2b33;
    --os-sub:#8a8a99;
    --os-line:#ececf2;
    --os-bg:#fafafc;
    --os-radius:14px;
    --os-btn:linear-gradient(135deg, #f2548c 0%, #d63a74 100%);   /* 主ボタン（濃いピンク） */
    color:var(--os-ink);
}

/* ---------------------------------------------------------
   見出し
   --------------------------------------------------------- */
.os-hero{
    position:relative;
    margin:0 0 18px;
    padding:22px 22px 20px;
    border-radius:18px;
    overflow:hidden;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255,102,153,.20) 0%, rgba(255,102,153,0) 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(255,184,208,.28) 0%, rgba(255,184,208,0) 60%),
        #fff;
    border:1px solid #ffe0ea;
}
.os-hero__eyebrow{
    margin:0 0 4px;
    font-size:10.5px;
    font-weight:800;
    letter-spacing:.2em;
    color:var(--os-accent);
}
.os-hero__title{
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:none !important;
    font-size:26px;
    font-weight:800;
    line-height:1.3;
    letter-spacing:.02em;
    color:var(--os-ink);
}
.os-hero__title::before,
.os-hero__title::after{ content:none !important; display:none !important; }
.os-hero__lead{
    margin:8px 0 0;
    font-size:13px;
    line-height:1.7;
    color:#6c6c7a;
}

/* ---------------------------------------------------------
   大きさのクイック選択
   --------------------------------------------------------- */
.os-quick{
    display:flex;
    gap:8px;
    margin:0 0 14px;
    padding:2px 2px 6px;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
}
.os-quick::-webkit-scrollbar{ display:none; }
.os-quick__chip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:5px 14px 5px 5px;
    border:1px solid var(--os-line);
    border-radius:999px;
    background:#fff;
    color:#555;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    box-shadow:0 1px 3px rgba(0,0,0,.04);
    transition:border-color .15s, background .15s, color .15s, transform .15s;
}
.os-quick__chip img{
    width:28px; height:28px;
    border-radius:50%;
    object-fit:cover;
    background:var(--os-bg);
}
.os-quick__chip:hover{ border-color:var(--os-accent); color:var(--os-accent); transform:translateY(-1px); }
.os-quick__chip.is-on{
    border-color:var(--os-accent);
    background:var(--os-accent);
    color:#fff;
    box-shadow:0 4px 12px rgba(255,102,153,.3);
}
.os-quick__chip.is-on img{ background:#fff; }

/* ---------------------------------------------------------
   ツールバー（絞り込み＋並び替え）
   --------------------------------------------------------- */
.os-bar{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin:0 0 12px;
}
.os-filterBtn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 18px;
    border:none;
    border-radius:12px;
    background:var(--os-btn);
    color:#fff;
    font-size:14px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(214,58,116,.3);
    transition:filter .15s, transform .15s;
}
.os-filterBtn:hover{ filter:brightness(.94); transform:translateY(-1px); }
/* ピンクのボタンの上に乗るので、白地にピンク文字 */
.os-filterBtn__num{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:#fff;
    color:var(--os-accent-d);
    font-size:11px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
}

.os-sort{
    display:inline-flex;
    margin-left:auto;
    padding:4px;
    border-radius:12px;
    background:#f2f2f6;
}
.os-sort__item{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border-radius:9px;
    color:#6c6c7a;
    font-size:12.5px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    transition:background .15s, color .15s;
}
.os-sort__item i{ font-size:11px; opacity:.8; }
.os-sort__item:hover{ color:var(--os-ink); }
.os-sort__item.is-on{
    background:#fff;
    color:var(--os-accent-d);
    box-shadow:0 1px 4px rgba(0,0,0,.08);
}

/* ---------------------------------------------------------
   件数・選択中の条件
   --------------------------------------------------------- */
.os-status{ margin:0 0 20px; }
.os-count{
    display:flex;
    align-items:baseline;
    gap:4px;
    margin:0;
    font-size:13px;
    color:var(--os-sub);
}
.os-count strong{
    font-size:22px;
    font-weight:800;
    color:var(--os-ink);
    font-variant-numeric:tabular-nums;
    letter-spacing:.01em;
}
.os-count__page{ margin-left:10px; font-size:12px; }

.os-active{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin-top:10px;
}
.os-active__chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px 5px 6px;
    border-radius:999px;
    background:var(--os-accent-soft);
    border:1px solid #ffd3e2;
    color:var(--os-accent-d);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    transition:background .15s, border-color .15s;
}
.os-active__chip:hover{ background:#ffe0eb; border-color:var(--os-accent); color:var(--os-accent-d); }
.os-active__group{
    padding:1px 7px;
    border-radius:999px;
    background:#fff;
    color:var(--os-sub);
    font-size:10px;
    font-weight:700;
}
.os-active__chip i{ font-size:10px; opacity:.7; }
.os-active__clear{
    margin-left:4px;
    font-size:12px;
    font-weight:700;
    color:var(--os-sub);
    text-decoration:underline;
    text-underline-offset:2px;
}
.os-active__clear:hover{ color:var(--os-ink); }

/* ---------------------------------------------------------
   結果・空状態
   --------------------------------------------------------- */
.os-list{ margin-top:0; }

.os-empty{
    padding:48px 20px;
    text-align:center;
    background:var(--os-bg);
    border:1px dashed #dcdce6;
    border-radius:var(--os-radius);
}
.os-empty i{ font-size:32px; color:#d0d0da; }
.os-empty__title{ margin:14px 0 4px; font-size:15px; font-weight:800; }
.os-empty__lead{ margin:0 0 16px; font-size:12.5px; color:var(--os-sub); }
.os-empty__cta{
    display:inline-block;
    padding:10px 24px;
    border-radius:999px;
    background:var(--os-accent);
    color:#fff;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
}
.os-empty__cta:hover{ background:var(--os-accent-d); color:#fff; }

/* ---------------------------------------------------------
   ページ送り
   --------------------------------------------------------- */
.os-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin:40px 0 10px;
}
.os-pager__step{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 14px;
    border-radius:10px;
    border:1px solid var(--os-line);
    background:#fff;
    color:var(--os-ink);
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:border-color .15s, color .15s;
}
.os-pager__step i{ font-size:11px; }
a.os-pager__step:hover{ border-color:var(--os-accent); color:var(--os-accent); }
.os-pager__step.is-disabled{ opacity:.35; }

.os-pager__nums{ display:flex; align-items:center; gap:4px; }
.os-pager__num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 6px;
    border-radius:10px;
    color:#555;
    font-size:13.5px;
    font-weight:700;
    text-decoration:none;
    font-variant-numeric:tabular-nums;
    transition:background .15s, color .15s;
}
a.os-pager__num:hover{ background:var(--os-accent-soft); color:var(--os-accent-d); }
.os-pager__num.is-on{ background:var(--os-accent); color:#fff; box-shadow:0 4px 12px rgba(255,102,153,.3); }
.os-pager__gap{ color:#b8b8c4; padding:0 2px; }

.os-pager__jump{
    display:none;   /* スマホだけ出す */
    align-items:center;
    gap:6px;
    margin:0;
    font-size:13px;
    color:var(--os-sub);
}
.os-pager__jump input{
    width:52px;
    height:38px;
    padding:0;
    border:1px solid var(--os-line);
    border-radius:10px;
    background:#fff;
    text-align:center;
    font-size:14px;
    font-weight:700;
    color:var(--os-ink);
}
.os-pager__jump input:focus{ outline:none; border-color:var(--os-accent); box-shadow:0 0 0 3px rgba(255,102,153,.15); }

/* ---------------------------------------------------------
   追従ボタン（スマホ）
   --------------------------------------------------------- */
.os-fab{
    position:fixed;
    left:50%;
    /* 固定フッター（SWELLの下部固定メニュー）の上に出す。実際の高さはJSが --os-fab-bottom に入れる */
    bottom:var(--os-fab-bottom, calc(76px + env(safe-area-inset-bottom)));
    z-index:90;
    display:none;
    align-items:center;
    gap:8px;
    padding:12px 20px;
    border:none;
    border-radius:999px;
    background:var(--os-btn);
    color:#fff;
    font-size:13.5px;
    font-weight:700;
    white-space:nowrap;   /* バッジが付いても改行させない */
    max-width:calc(100vw - 32px);
    box-shadow:0 8px 24px rgba(214,58,116,.35);
    cursor:pointer;
    transform:translate(-50%, 24px);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
}
.os-fab.is-shown{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }

/* ---------------------------------------------------------
   絞り込みパネル（dialog）
   --------------------------------------------------------- */
.os-panel{
    /* SWELLのリセットが dialog の margin:auto（中央寄せ）を打ち消すので明示する */
    position:fixed;
    inset:0;
    margin:auto;
    width:min(760px, 92vw);
    max-width:none;
    max-height:86vh;
    padding:0;
    border:none;
    border-radius:20px;
    background:#fff;
    color:var(--os-ink);
    box-shadow:0 24px 60px rgba(0,0,0,.25);
    overflow:hidden;
}
.os-panel[open]{ display:flex; animation:os-pop .22s ease; }
.os-panel::backdrop{
    background:rgba(20,20,28,.5);
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
}
@keyframes os-pop{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }

.os-panel__form{
    display:flex;
    flex-direction:column;
    width:100%;
    max-height:86vh;
    margin:0;
}
.os-panel__head{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-bottom:1px solid var(--os-line);
}
.os-panel__title{ margin:0; font-size:16px; font-weight:800; }
.os-panel__title i{ color:var(--os-accent); margin-right:4px; }
.os-panel__close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px; height:36px;
    border:none;
    border-radius:50%;
    background:#f2f2f6;
    color:#555;
    font-size:15px;
    cursor:pointer;
}
.os-panel__close:hover{ background:#e8e8ef; }

.os-panel__body{
    flex:1 1 auto;
    overflow-y:auto;
    padding:16px 20px 8px;
    overscroll-behavior:contain;
}
.os-panel__note{
    margin:0 0 16px;
    padding:9px 12px;
    border-radius:10px;
    background:var(--os-bg);
    font-size:11.5px;
    line-height:1.6;
    color:var(--os-sub);
}

.os-group{ margin:0 0 20px; padding:0; border:none; min-width:0; }
.os-group__label{
    display:flex;
    align-items:center;
    gap:7px;
    margin:0 0 10px;
    padding:0;
    font-size:13.5px;
    font-weight:800;
    color:var(--os-ink);
}
.os-group__label i{ width:16px; text-align:center; color:var(--os-accent); font-size:12px; }
.os-group__count{
    padding:1px 8px;
    border-radius:999px;
    background:var(--os-accent);
    color:#fff;
    font-size:10.5px;
    font-weight:800;
}
.os-group__count:empty{ display:none; }

/* 画像タイル */
.os-tiles{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(100px, 1fr));
    gap:10px;
}
.os-tile{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:8px 8px 9px;
    border:1.5px solid var(--os-line);
    border-radius:14px;
    background:#fff;
    cursor:pointer;
    user-select:none;
    transition:border-color .15s, background .15s, box-shadow .15s, transform .15s;
}
.os-tile:hover{ border-color:#ffc2d6; transform:translateY(-1px); }
.os-tile input{ position:absolute; opacity:0; width:0; height:0; }
.os-tile__img{
    display:block;
    width:100%;
    aspect-ratio:1;
    border-radius:10px;
    overflow:hidden;
    background:var(--os-bg);
}
.os-tile__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.os-tile__name{ font-size:12px; font-weight:700; color:#555; line-height:1.3; text-align:center; }
.os-tile__check{
    position:absolute;
    top:5px; right:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:22px; height:22px;
    border-radius:50%;
    background:var(--os-accent);
    color:#fff;
    font-size:11px;
    box-shadow:0 2px 6px rgba(255,102,153,.4);
    opacity:0;
    transform:scale(.6);
    transition:opacity .15s, transform .15s;
}
.os-tile:has(input:checked),
.os-tile.is-on{
    border-color:var(--os-accent);
    background:var(--os-accent-soft);
    box-shadow:0 0 0 3px rgba(255,102,153,.14);
}
.os-tile:has(input:checked) .os-tile__name,
.os-tile.is-on .os-tile__name{ color:var(--os-accent-d); }
.os-tile:has(input:checked) .os-tile__check,
.os-tile.is-on .os-tile__check{ opacity:1; transform:none; }
.os-tile input:focus-visible ~ .os-tile__img{ outline:2px solid var(--os-accent); outline-offset:2px; }

/* 並び替え（パネル内） */
.os-seg{ display:flex; gap:6px; flex-wrap:wrap; }
.os-seg__item{ position:relative; cursor:pointer; }
.os-seg__item input{ position:absolute; opacity:0; width:0; height:0; }
.os-seg__item span{
    display:inline-block;
    padding:8px 14px;
    border:1.5px solid var(--os-line);
    border-radius:999px;
    font-size:12.5px;
    font-weight:700;
    color:#555;
    transition:border-color .15s, background .15s, color .15s;
}
.os-seg__item input:checked + span{ border-color:var(--os-accent); background:var(--os-accent); color:#fff; }
.os-seg__item input:focus-visible + span{ outline:2px solid var(--os-accent); outline-offset:2px; }
/* PCはツールバーで並び替えられるので、パネルではスマホだけ出す */
.os-group--order{ display:none; }

.os-panel__foot{
    flex:0 0 auto;
    display:flex;
    gap:10px;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    border-top:1px solid var(--os-line);
    background:#fff;
}
.os-panel__reset{
    flex:0 0 auto;
    padding:13px 20px;
    border:1px solid var(--os-line);
    border-radius:12px;
    background:#fff;
    color:#555;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.os-panel__reset:hover{ border-color:#c8c8d4; }
.os-panel__submit{
    flex:1 1 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:13px 20px;
    border:none;
    border-radius:12px;
    background:var(--os-accent);
    color:#fff;
    font-size:15px;
    font-weight:800;
    white-space:nowrap;
    cursor:pointer;
    background:var(--os-btn);
    box-shadow:0 6px 16px rgba(214,58,116,.35);
    transition:filter .15s;
}
.os-panel__submit:hover{ filter:brightness(.94); }
.os-panel__sel:empty{ display:none; }
.os-panel__sel{
    font-variant-numeric:tabular-nums;
    transition:opacity .15s;
    padding:1px 8px;
    border-radius:999px;
    background:rgba(255,255,255,.25);
    font-size:12px;
}

/* 該当人数の更新中 */
.os-panel__sel.is-loading{ opacity:.55; }
/* 0人になる組み合わせは送信しても空なので、ボタンを弱める */
.os-panel__submit.is-zero{ filter:grayscale(.6); opacity:.75; }

/* =========================================================
   トップページ（template-parts/front-top.php）
   ========================================================= */
.of-br-sp{ display:none; }

/* ---- 特徴で探す ---- */
.of-finder{
    margin:0 0 40px;
    border-radius:20px;
    overflow:hidden;
    background:#fff;
    border:1px solid #ffe0ea;
    box-shadow:0 10px 30px rgba(255,102,153,.10);
}
.of-finder__head{
    padding:22px 22px 16px;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255,102,153,.22) 0%, rgba(255,102,153,0) 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(255,184,208,.30) 0%, rgba(255,184,208,0) 60%),
        #fff;
}
.of-finder__title{
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:none !important;
    font-size:24px;
    font-weight:800;
    line-height:1.35;
    letter-spacing:.02em;
    color:var(--os-ink);
}
.of-finder__title::before,
.of-finder__title::after{ content:none !important; display:none !important; }
.of-finder__lead{ margin:8px 0 0; font-size:13px; line-height:1.7; color:#6c6c7a; }
.of-finder__lead strong{ color:var(--os-accent-d); font-size:15px; font-variant-numeric:tabular-nums; }

.of-finder__form{ margin:0; padding:0 22px 18px; }

/* 項目のタブ */
.of-tabs{
    display:flex;
    gap:6px;
    margin:0 -22px 14px;
    padding:12px 22px;
    border-top:1px solid #ffe8f0;
    border-bottom:1px solid var(--os-line);
    background:#fffafc;
    overflow-x:auto;
    scrollbar-width:none;
}
.of-tabs::-webkit-scrollbar{ display:none; }
.of-tab{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    border:1px solid var(--os-line);
    border-radius:999px;
    background:#fff;
    color:#666;
    font-size:12.5px;
    font-weight:700;
    white-space:nowrap;
    cursor:pointer;
    transition:border-color .15s, background .15s, color .15s;
}
.of-tab i{ font-size:11px; color:var(--os-accent); }
.of-tab:hover{ border-color:#ffc2d6; color:var(--os-ink); }
.of-tab.is-on{ border-color:var(--os-accent); background:var(--os-accent); color:#fff; box-shadow:0 3px 10px rgba(255,102,153,.3); }
.of-tab.is-on i{ color:#fff; }
.of-tab__num{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:18px;
    height:18px;
    padding:0 5px;
    border-radius:999px;
    background:var(--os-accent);
    color:#fff;
    font-size:10.5px;
    font-weight:800;
}
.of-tab.is-on .of-tab__num{ background:#fff; color:var(--os-accent-d); }
.of-tab__num:empty{ display:none; }

/* タブで切り替えるとき（JSが is-tabbed を付ける。JSが無ければ全部並ぶ） */
.is-tabbed .of-pane{ display:none; }
.is-tabbed .of-pane.is-on{ display:block; animation:os-fade .2s ease; }
.is-tabbed .of-pane .os-group__label{ display:none; }   /* タブが見出しの代わり */
@keyframes os-fade{ from{ opacity:0; } to{ opacity:1; } }
.of-pane{ margin:0 0 16px; }

.of-finder__foot{ display:flex; gap:10px; }
.of-finder__note{ margin:10px 0 0; font-size:11px; color:var(--os-sub); text-align:center; }

/* ---- セクション ---- */
.of-sec{ margin:0 0 44px; }
.of-sec__head{
    position:relative;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    margin:0 0 16px;
    padding:0 0 10px;
    border-bottom:2px solid #ffe3ec;
}
.of-sec__head::after{
    content:"";
    position:absolute;
    left:0; bottom:-2px;
    width:64px; height:2px;
    background:var(--os-accent);
}
.of-sec__ttl{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.of-sec__sub{ font-size:10px; font-weight:800; letter-spacing:.18em; color:var(--os-accent); }
.of-sec__title{
    margin:0 !important;
    padding:0 !important;
    border:none !important;
    background:none !important;
    font-size:20px;
    font-weight:800;
    line-height:1.35;
    color:var(--os-ink);
}
.of-sec__title::before,
.of-sec__title::after{ content:none !important; display:none !important; }
.of-sec__more{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:6px 12px;
    border-radius:999px;
    background:var(--os-accent-soft);
    color:var(--os-accent-d);
    font-size:12px;
    font-weight:700;
    text-decoration:none;
    white-space:nowrap;
    transition:background .15s;
}
.of-sec__more i{ font-size:11px; }
.of-sec__more:hover{ background:#ffe0eb; color:var(--os-accent-d); }

/* 新着クリップ：PCは2列 */
@media (min-width:601px){
    .of-clips.oc-clipGrid.p-postList{ grid-template-columns:repeat(2, 1fr); }
}

/* 注目の新人：ショートコード側の見出し・一覧リンクはこちらの見出しと重なるので隠す */
.of-newfaces > .pa-rank-title,
.of-newfaces > .actress-links{ display:none; }

/* スクロールを止める（パネルを開いている間） */
html.os-lock{ overflow:hidden; }

/* =========================================================
   スマホ
   ========================================================= */
@media (max-width:782px){
    /* 結果までの距離を縮める（説明文はスマホでは出さない） */
    .os-hero{ margin-bottom:14px; padding:14px 16px; border-radius:14px; }
    .os-hero__eyebrow{ margin-bottom:2px; font-size:9.5px; }
    .os-hero__title{ font-size:21px; }
    .os-hero__lead{ display:none; }

    .os-quick{ margin-left:-16px; margin-right:-16px; padding-left:16px; padding-right:16px; }

    .os-bar{ gap:8px; }
    .os-filterBtn{ flex:1 1 100%; justify-content:center; padding:13px 16px; }
    .os-sort{ flex:1 1 100%; margin-left:0; }
    .os-sort__item{ flex:1 1 0; justify-content:center; padding:8px 4px; font-size:11.5px; }
    .os-sort__item i{ display:none; }

    .os-fab{ display:inline-flex; }

    /* ページ送り：番号の代わりに入力欄 */
    .os-pager{ gap:10px; }
    .os-pager__nums{ display:none; }
    .os-pager__jump{ display:inline-flex; }
    .os-pager__step{ padding:10px 16px; }

    /* 下から出るシート */
    .os-panel{
        width:100%;
        max-width:100%;
        max-height:90vh;
        margin:auto 0 0;
        border-radius:20px 20px 0 0;
    }
    .os-panel[open]{ animation:os-sheet .26s ease; }
    .os-panel__form{ max-height:90vh; }
    .os-panel__head{ position:relative; padding:18px 16px 12px; }
    .os-panel__head::before{
        content:"";
        position:absolute;
        top:7px; left:50%;
        width:38px; height:4px;
        margin-left:-19px;
        border-radius:2px;
        background:#dcdce4;
    }
    .os-panel__body{ padding:14px 16px 6px; }
    .os-panel__foot{ padding-left:16px; padding-right:16px; }

    .os-group--order{ display:block; }

    /* トップ */
    .of-br-sp{ display:inline; }
    .of-finder{ margin-bottom:32px; border-radius:16px; }
    .of-finder__head{ padding:18px 16px 12px; }
    .of-finder__title{ font-size:21px; }
    .of-finder__lead{ font-size:12px; }
    .of-finder__form{ padding:0 16px 16px; }
    .of-tabs{ margin:0 -16px 12px; padding:10px 16px; }
    .of-sec{ margin-bottom:36px; }
    .of-sec__title{ font-size:18px; }
    .os-tiles{ grid-template-columns:repeat(3, 1fr); gap:8px; }
    .os-tile{ padding:6px 6px 8px; border-radius:12px; }
    .os-tile__name{ font-size:11.5px; }
}
@keyframes os-sheet{ from{ transform:translateY(40px); opacity:.4; } to{ transform:none; opacity:1; } }

@media (prefers-reduced-motion:reduce){
    .os-panel[open], .os-fab, .os-tile, .os-quick__chip{ animation:none; transition:none; }
}