/* One Lookup WHOIS（日本語）を www の枠の中で出すときの中核だけの CSS。
   規則はすべて .ol-whois か .ol-whois-alt で始める（ページ全体・枠のヘッダーとフッターには当てない。tests/one-lookup-whois/frame-css-scope.php）。
   読み込み順は common.css → domain/whois/style.css → この CSS。書体は body のものを継ぐ。
   フォームの帯は本番の .form_content・.domain_form と同じ大きさ（値は common.css と旧 index.php のページ内 CSS から写した。tests/one-lookup-whois/frame-browser.cjs が旧と比べる）。
   帯より下（結果・説明）は行の高さと余白を px の整数で持ち、中核の高さに端数を作らない（下に続く旧の領域が旧と同じ位置の端数で描かれる）。 */

/* ---- 共通（色は www と同じ。html の font-size は 12px・640px 以上 13px・769px 以上 14px） ---- */
.ol-whois{--ol-accent:#005bac;--ol-accent-hover:#00498a;--ol-text:#222;--ol-muted:#666;--ol-border:#e5e5e5;--ol-surface:#fff;--ol-band:#f2f4f5;--ol-input-border:#767676;--ol-radius:10px;--ol-max:800px;--ol-lh:21px;--ol-lh-heading:21px;--ol-lh-small:16px;--ol-lh-button:19px;--ol-lh-title:35px;--ol-title-pad:14px;color:var(--ol-text);line-height:var(--ol-lh)}
@media only screen and (max-width:400px){.ol-whois{--ol-lh-title:32px}}
@media only screen and (min-width:640px){.ol-whois{--ol-lh:23px;--ol-lh-heading:23px;--ol-lh-small:17px;--ol-lh-button:21px;--ol-lh-title:38px;--ol-title-pad:15px}}
@media only screen and (min-width:769px){.ol-whois{--ol-lh:25px;--ol-lh-heading:25px;--ol-lh-small:19px;--ol-lh-button:22px;--ol-lh-title:41px;--ol-title-pad:16px}}
.ol-whois a{color:var(--ol-accent);text-decoration:underline}
.ol-whois a:hover{color:var(--ol-accent-hover)}
.ol-whois :focus-visible{outline:2px solid var(--ol-accent);outline-offset:2px}
.ol-whois h2,.ol-whois h3{font-weight:bold}
.ol-whois__inner{max-width:var(--ol-max);margin:0 auto}
/* 節の見出し（本番の .sub_tit と同じ書式: 中央・1.67rem〔400px 以下 1.5rem〕・太字・字間 3px〔400px 以下 2px〕・下に主色の短い線 40px〔960px 以上 50px〕・下の余白 30px〔960px 以上 50px〕）。
   行の高さ（本番は 1.75 倍）と線までの余白（本番は 1.17rem）は、高さに端数を作らないよう px の整数に丸めたトークンで持つ。 */
.ol-whois .ol-whois__title{position:relative;margin:0 0 30px;padding:0 0 var(--ol-title-pad);font-size:1.67rem;font-weight:bold;line-height:var(--ol-lh-title);text-align:center;letter-spacing:3px}
.ol-whois .ol-whois__title::before{content:"";display:block;position:absolute;bottom:0;left:50%;width:40px;height:2px;background:var(--ol-accent);transform:translate(-50%,0)}
@media only screen and (max-width:400px){.ol-whois .ol-whois__title{font-size:1.5rem;letter-spacing:2px}}
@media only screen and (min-width:960px){.ol-whois .ol-whois__title{margin-bottom:50px}.ol-whois .ol-whois__title::before{width:50px}}
/* 枠の h1（旧の .sub_main .tit h1。書式は旧のまま）: 語の途中（「IP検索」など）で改行せず、「・」の後ろでだけ改行する（320〜340px で 2 行になる）。
   h1 の中に span を置かない（旧の .sub_main .tit span が display:block と別の書式を当てる）。
   1 行に入らない語は html の word-wrap:break-word（common.css）で折り返す（横にはみ出さない）。 */
.ol-whois__heading{word-break:keep-all}

/* ---- フォームの帯（本番の .form_content と同じ青い帯・見出し・余白） ---- */
.ol-whois__band{background:var(--ol-accent);padding:40px .83rem 50px;color:#fff}
@media only screen and (min-width:960px){.ol-whois__band{padding:40px .83rem}}
.ol-whois__band-title{margin:-5px 0 1.33rem;color:#fff;font-size:1.5rem;font-weight:bold;line-height:1.75;text-align:center;letter-spacing:1px}
@media only screen and (max-width:400px){.ol-whois__band-title{font-size:1.33rem}}
@media only screen and (min-width:769px){.ol-whois__band-title .ol-whois__br-sp{display:none}}
@media only screen and (min-width:960px){.ol-whois__band-title{margin-top:-10px;letter-spacing:2px}}

/* ---- 入力欄と検索ボタン（本番の .domain_form と同じ 1 つの箱。ボタンは箱の右端に重ね、どの幅でも入力欄と同じ行・同じ高さ） ---- */
.ol-whois .whois-form{position:relative;max-width:var(--ol-max);margin:0 auto;padding:0;background:var(--ol-band);border:0;border-radius:4px;overflow:hidden;box-shadow:0 0 10px 0 rgba(0,0,0,.1)}
.ol-whois .whois-form .field{margin:0}
/* ラベルと入力例の説明は読み上げ用に残し、画面には出さない（入力欄の aria-describedby と label が指す）。 */
.ol-whois .whois-form label,.ol-whois .whois-form .input-hint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.ol-whois .whois-form input[name="domain"]{display:block;width:100%;height:70px;margin:0;padding:0 70px 0 1rem;background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--ol-text);font:inherit;font-size:16px;outline:0}
.ol-whois .whois-form input[name="domain"]::placeholder{color:var(--ol-input-border);opacity:1}
.ol-whois .whois-form input[name="domain"]:-webkit-autofill{box-shadow:0 0 0 1000px var(--ol-band) inset}
.ol-whois .whois-form input[name="domain"]:focus-visible{outline:2px solid var(--ol-accent);outline-offset:-4px}
.ol-whois .whois-form input[aria-invalid="true"]{background:#fddddd}
.ol-whois .whois-form button[type="submit"]{position:absolute;top:0;right:0;width:60px;height:100%;margin:0;padding:0;background:url("/assets/img/common/ico_search.svg") no-repeat center/24px;border:0;border-left:1px solid #fff;border-radius:0;box-shadow:none;color:var(--ol-accent);font:inherit;overflow:hidden;text-indent:100%;white-space:nowrap;cursor:pointer}
.ol-whois .whois-form button[type="submit"]:focus-visible{outline:2px solid var(--ol-accent);outline-offset:-4px}
.ol-whois .whois-form button[disabled]{cursor:default}
.ol-whois .whois-form.is-loading button[type="submit"]{background-image:none}
.ol-whois .whois-form.is-loading button[type="submit"]::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border:2px solid #c9d4dd;border-top-color:var(--ol-accent);border-radius:50%;animation:ol-whois-spin .8s linear infinite}
@keyframes ol-whois-spin{to{transform:rotate(360deg)}}
@media only screen and (min-width:769px){
 .ol-whois .whois-form input[name="domain"]{height:64px;padding:0 80px 0 20px;font-size:1.08rem}
 .ol-whois .whois-form button[type="submit"]{width:64px}
}
@media only screen and (min-width:960px){
 .ol-whois .whois-form button[type="submit"]{transition:background-color .3s ease-in-out 0s}
 .ol-whois .whois-form button[type="submit"]:hover{background-color:#f9fafa}
}

/* ---- 結果・エラー（モジュールのパネル。白地のカード）。段の先頭に見出し「検索結果」（本番の #result と同じく帯から 50px 下・上の余白なし）、パネルの見出しは h3 ---- */
.ol-whois__results{box-sizing:content-box;padding:50px .83rem 0}
.ol-whois .panel{margin:0 0 24px;padding:16px 16px 17px;background:var(--ol-surface);border:1px solid var(--ol-border);border-radius:var(--ol-radius);box-shadow:0 1px 2px rgba(16,24,40,.06)}
@media only screen and (min-width:769px){.ol-whois .panel{padding:18px 18px 19px}}
.ol-whois .ol-whois__results .panel{margin-bottom:0}
.ol-whois .panel>h3{margin:0 0 12px;font-size:1.17rem;line-height:var(--ol-lh-heading);letter-spacing:.01em}
.ol-whois .panel p{margin:0 0 10px}
.ol-whois .error-explain{border-color:#f3c1c1;background:#fff8f8}
.ol-whois .error-explain p{margin:0}
.ol-whois .panel .input-hint{margin:0;color:var(--ol-muted);font-size:.83rem;line-height:var(--ol-lh-small)}
.ol-whois .whois-domain{margin:24px 0;color:var(--ol-accent);font-size:20px;line-height:32px;overflow-wrap:anywhere}
.ol-whois .whois-domain span{color:#555;font-size:14px}
.ol-whois .whois-kv{margin:24px 0}
.ol-whois .whois-kv>div{display:grid;grid-template-columns:210px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--ol-border)}
.ol-whois .whois-kv dt{font-weight:bold}
.ol-whois .whois-kv dd{margin:0;overflow-wrap:anywhere}
.ol-whois .whois-line{display:block}
.ol-whois .whois-line+.whois-line{margin-top:6px}
.ol-whois .whois-raw{margin:24px 0}
.ol-whois .whois-raw summary{min-height:44px;padding:12px;border:1px solid #ccd4de;border-radius:8px;color:var(--ol-accent);font-weight:bold;cursor:pointer}
.ol-whois .whois-raw pre{max-height:520px;margin:12px 0 0;padding:16px;overflow-y:auto;background:#f5f7fa;border-radius:8px;color:var(--ol-text);font-size:13px;line-height:22px;white-space:pre-wrap;overflow-wrap:anywhere}
.ol-whois .whois-actions{display:flex;flex-direction:column;align-items:flex-start;gap:20px;margin-top:28px}
.ol-whois .cta-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;padding:6px 22px;background:var(--ol-accent);border-radius:4px;color:#fff;font-weight:bold;line-height:var(--ol-lh-button);text-align:center;text-decoration:none}
.ol-whois .cta-btn:hover{background:var(--ol-accent-hover);color:#fff}
@media only screen and (max-width:600px){
 .ol-whois .whois-kv>div{grid-template-columns:1fr;gap:6px}
 .ol-whois .whois-actions{align-items:stretch}
 .ol-whois .whois-raw pre{padding:12px}
 .ol-whois .whois-domain{font-size:18px;line-height:28px}
}

/* ---- 説明・FAQ・参照情報（#about .wrap の中。本番の #about と同じ見出し・中央の導入文・灰色のカード） ----
   h2（.ol-whois__title）→ 導入文（meta description と同じ文）と初期表示の案内 → 各節のカード → h2 よくある質問 → 問いと答えのカード → 参照情報。
   先頭の見出しの位置は本番の #about .sub_tit と同じ（上の余白 -10px〔960px 以上 -40px〕）。導入文は本番の #about .txt と同じく中央・下の余白 30px〔960px 以上 上 -10px・下 40px〕。
   カードは本番の #about .detail>li と同じ #f2f4f5・余白 20px・見出し 1.17rem 太字・下 8px。768px 以下は 1 列（間 15px）、769px 以上は 2 列（列の間 2%〔本番の 49% 2 つ〕・行の間 20px）。 */
.ol-whois--guide{margin:0 auto;overflow-wrap:anywhere}
.ol-whois--guide>.ol-whois__basics>.ol-whois__title{margin-top:-10px}
.ol-whois .ol-whois__intro{margin:0 0 30px;text-align:center}
.ol-whois .ol-whois__intro .ol-whois__lead{margin:0}
.ol-whois .ol-whois__intro .ol-whois__note{margin:10px 0 0;color:var(--ol-muted);font-size:.95rem}
.ol-whois .ol-whois__lead{text-wrap:pretty;word-break:auto-phrase}
.ol-whois .ol-whois__cards{display:grid;grid-template-columns:minmax(0,1fr);gap:15px;margin:0;padding:0}
.ol-whois .ol-whois__card{margin:0;padding:20px;background:var(--ol-band)}
.ol-whois .ol-whois__card h3,.ol-whois .ol-whois__card dt{margin:0 0 8px;font-size:1.17rem;font-weight:bold;line-height:var(--ol-lh-heading)}
.ol-whois .ol-whois__card dt{font-size:1.08rem}
.ol-whois .ol-whois__card p,.ol-whois .ol-whois__card dd{margin:0}
.ol-whois .ol-whois__card a{display:inline-block;margin-top:8px}
.ol-whois .ol-whois__faq{margin:60px 0 0}
.ol-whois .ol-whois__sources{margin:40px 0 0}
.ol-whois .ol-whois__sources h2{margin:0 0 8px;font-size:1rem;line-height:var(--ol-lh)}
.ol-whois .ol-whois__sources ul{margin:0;padding-left:1.5em;list-style:disc}
@media only screen and (min-width:769px){.ol-whois .ol-whois__cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 2%}}
@media only screen and (min-width:960px){
 .ol-whois--guide>.ol-whois__basics>.ol-whois__title{margin-top:-40px}
 .ol-whois .ol-whois__intro{margin:-10px 0 40px}
 .ol-whois .ol-whois__faq{margin-top:80px}
}

/* ---- 他 TLD（旧の #result .dom_list の規則がそのまま当たる。ここでは結果のパネルと同じ幅・間隔にそろえ、価格の無い行も同じ高さにする）
   旧の規則は #content #result（id 2 つ）なので、余白だけは !important で上書きする。 ---- */
.ol-whois-alt#result{padding:0 .83rem!important}
.ol-whois-alt#result .dom_list{max-width:800px}
.ol-whois-alt .ol-whois-alt__name{font-weight:bold}
.ol-whois-alt#result .dom_list .ol-whois-alt__noprice{height:1.75em;margin:0;font-size:18px}
/* 取得できない行はリンクにしない（span.btn_blue）。旧の #result .dom_list ul li.ng>span（TLD 名を灰色にする規則）と li>span（太字）がこの span にも当たり、
   文字が背景と同じ #c9c9c9 になる。本番の行（a.btn_blue の中の「取得できません」）と同じ白い文字・太字でない文字に戻す（T7 が本番の行の形と比べる）。 */
.ol-whois-alt#result .dom_list ul li.ng>.btn_blue{color:#fff;font-weight:normal}
@media only screen and (min-width:769px){
 .ol-whois-alt#result .dom_list ul li{width:32%;margin-top:10px}
 .ol-whois-alt#result .dom_list ul li:nth-child(-n+3){margin-top:0}
}