@charset "UTF-8";
/*
 * pages.css — 個別ページの JS → CSS 置き換え
 *   1. サービスページのタブ (:target)
 *   2. 沿革 / プライバシーのサイドナビ (scroll-margin-top + :target。スクロール連動は scrollspy.js)
 *   3. ニュース一覧の絞り込み (:has(:checked))。ページネーションは news.js
 *   4. フォーム (abuse/form の行切替・URL 入力欄、select 背景の相対パス化)
 * 元 CSS (service/history/privacy/news/form.css) は編集せず、ここで上書き・追加する。
 */

/* ============================================================
 * 1. サービスページのタブ
 *    wrapper 先頭の <span class="service__anchor" id="cloud|security|storage|wordpress"> が :target。
 *    target 無し (または無関係な hash) のときは cloud。
 *    非 cloud タブ内の注釈リンクは #footer-annotation-<tab> (注釈ブロック先頭の .service__note-anchor) を指し、
 *    注釈へ飛んでもそのタブが選択されたままになる。
 * ============================================================ */
.service__anchor {
  position: absolute; /* 位置指定祖先なし → ページ最上部。クリック時は元と同じく最上部へ戻る */
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.service__note-anchor {
  position: absolute; /* 行ボックスを作らず高さ 0 (静的位置 = 注釈ブロック先頭にスクロール) */
  width: 0;
  height: 0;
  overflow: hidden;
}
.service__index-btn {
  display: block;
  text-decoration: none;
}
@media screen and (max-width: 600px) {
  .service__index-btn {
    display: flex;
  }
}
body:not(:has(.service__anchor:target, .service__note-anchor:target)) .service__container[data-tab="cloud"],
body:has(#cloud:target, #footer-annotation-cloud:target) .service__container[data-tab="cloud"],
body:has(#security:target, #footer-annotation-security:target) .service__container[data-tab="security"],
body:has(#storage:target, #footer-annotation-storage:target) .service__container[data-tab="storage"],
body:has(#wordpress:target, #footer-annotation-wordpress:target) .service__container[data-tab="wordpress"] {
  display: block;
}
/* 選択中ボタン = 元 service.css の .service__index-btn.selected */
body:not(:has(.service__anchor:target, .service__note-anchor:target)) .service__index-btn[href="#cloud"],
body:has(#cloud:target, #footer-annotation-cloud:target) .service__index-btn[href="#cloud"],
body:has(#security:target, #footer-annotation-security:target) .service__index-btn[href="#security"],
body:has(#storage:target, #footer-annotation-storage:target) .service__index-btn[href="#storage"],
body:has(#wordpress:target, #footer-annotation-wordpress:target) .service__index-btn[href="#wordpress"] {
  color: #0B7BEC;
}
@media screen and (max-width: 1050px) {
  body:not(:has(.service__anchor:target, .service__note-anchor:target)) .service__index-btn[href="#cloud"],
  body:has(#cloud:target, #footer-annotation-cloud:target) .service__index-btn[href="#cloud"],
  body:has(#security:target, #footer-annotation-security:target) .service__index-btn[href="#security"],
  body:has(#storage:target, #footer-annotation-storage:target) .service__index-btn[href="#storage"],
  body:has(#wordpress:target, #footer-annotation-wordpress:target) .service__index-btn[href="#wordpress"] {
    background: linear-gradient(90deg, #004FC8, #00A3EC);
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
  }
}
body:not(:has(.service__anchor:target, .service__note-anchor:target)) .service__index-btn[href="#cloud"]::before,
body:has(#cloud:target, #footer-annotation-cloud:target) .service__index-btn[href="#cloud"]::before,
body:has(#security:target, #footer-annotation-security:target) .service__index-btn[href="#security"]::before,
body:has(#storage:target, #footer-annotation-storage:target) .service__index-btn[href="#storage"]::before,
body:has(#wordpress:target, #footer-annotation-wordpress:target) .service__index-btn[href="#wordpress"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(90deg, #004FC8, #00A3EC);
  position: absolute;
  top: 22px;
  left: 0;
}
@media screen and (max-width: 1050px) {
  body:not(:has(.service__anchor:target, .service__note-anchor:target)) .service__index-btn[href="#cloud"]::before,
  body:has(#cloud:target, #footer-annotation-cloud:target) .service__index-btn[href="#cloud"]::before,
  body:has(#security:target, #footer-annotation-security:target) .service__index-btn[href="#security"]::before,
  body:has(#storage:target, #footer-annotation-storage:target) .service__index-btn[href="#storage"]::before,
  body:has(#wordpress:target, #footer-annotation-wordpress:target) .service__index-btn[href="#wordpress"]::before {
    width: 0;
  }
}

/* ============================================================
 * 2. 沿革 / プライバシーのサイドナビ
 *    元 JS: window.scrollTo(target.offsetTop - offset, smooth)
 *      history: offset desktop -268 / tablet(<=850) -200 / mobile(<=450) -160。
 *               .history__wrapper が position:relative なので offsetTop は wrapper 基準
 *               → 画面上端からの余白 = wrapper のページ上位置 - |offset| ≒ 128 / 100 / 84px
 *      privacy: offset 128 / 128 / 84 (offsetTop はページ基準)
 * ============================================================ */
html:has(.history__index),
html:has(.privacy__index) {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html:has(.history__index),
  html:has(.privacy__index) {
    scroll-behavior: auto;
  }
}
.history__era,
.privacy__section {
  scroll-margin-top: 128px;
}
@media screen and (max-width: 850px) {
  .history__era {
    scroll-margin-top: 100px;
  }
}
@media screen and (max-width: 450px) {
  .history__era,
  .privacy__section {
    scroll-margin-top: 90px; /* 元 84px + モバイルヘッダーとの重なり 6px 分 */
  }
}
/* 選択表示 (JS 無効時): :target、無ければ先頭項目。
   scrollspy.js が動くと nav に .js-spy が付き、元 CSS の .selected に任せる。 */
/* = 元 history.css の .history__index-btn.selected */
body:not(:has(.history__index.js-spy)):not(:has(.history__era:target)) .history__index li:first-child .history__index-btn,
body:not(:has(.history__index.js-spy)):has(#group_01:target) .history__index-btn[href="#group_01"],
body:not(:has(.history__index.js-spy)):has(#group_02:target) .history__index-btn[href="#group_02"],
body:not(:has(.history__index.js-spy)):has(#group_03:target) .history__index-btn[href="#group_03"] {
  color: #0B7BEC;
  transition: 0.3s;
}
body:not(:has(.history__index.js-spy)):not(:has(.history__era:target)) .history__index li:first-child .history__index-btn::before,
body:not(:has(.history__index.js-spy)):has(#group_01:target) .history__index-btn[href="#group_01"]::before,
body:not(:has(.history__index.js-spy)):has(#group_02:target) .history__index-btn[href="#group_02"]::before,
body:not(:has(.history__index.js-spy)):has(#group_03:target) .history__index-btn[href="#group_03"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(90deg, #004FC8, #00A3EC);
  position: absolute;
  top: 22px;
  left: 0;
  transition: 0.3s;
}
@media screen and (max-width: 850px) {
  body:not(:has(.history__index.js-spy)):not(:has(.history__era:target)) .history__index li:first-child .history__index-btn::before,
  body:not(:has(.history__index.js-spy)):has(#group_01:target) .history__index-btn[href="#group_01"]::before,
  body:not(:has(.history__index.js-spy)):has(#group_02:target) .history__index-btn[href="#group_02"]::before,
  body:not(:has(.history__index.js-spy)):has(#group_03:target) .history__index-btn[href="#group_03"]::before {
    width: 0;
  }
}
/* = 元 privacy.css の .privacy__index-btn.selected */
body:not(:has(.privacy__index.js-spy)):not(:has(.privacy__section:target)) .privacy__index li:first-child .privacy__index-btn,
body:not(:has(.privacy__index.js-spy)):has(#privacy_01:target) .privacy__index-btn[href="#privacy_01"],
body:not(:has(.privacy__index.js-spy)):has(#privacy_02:target) .privacy__index-btn[href="#privacy_02"] {
  color: #0B7BEC;
}
body:not(:has(.privacy__index.js-spy)):not(:has(.privacy__section:target)) .privacy__index li:first-child .privacy__index-btn::before,
body:not(:has(.privacy__index.js-spy)):has(#privacy_01:target) .privacy__index-btn[href="#privacy_01"]::before,
body:not(:has(.privacy__index.js-spy)):has(#privacy_02:target) .privacy__index-btn[href="#privacy_02"]::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(90deg, #004FC8, #00A3EC);
  position: absolute;
  top: 22px;
  left: 0;
}
@media screen and (max-width: 900px) {
  body:not(:has(.privacy__index.js-spy)):not(:has(.privacy__section:target)) .privacy__index li:first-child .privacy__index-btn::before,
  body:not(:has(.privacy__index.js-spy)):has(#privacy_01:target) .privacy__index-btn[href="#privacy_01"]::before,
  body:not(:has(.privacy__index.js-spy)):has(#privacy_02:target) .privacy__index-btn[href="#privacy_02"]::before {
    width: 0;
  }
}

/* ============================================================
 * 3. ニュース一覧の絞り込み (カテゴリ × 年)
 *    「すべて」/ all は何も隠さない。before2023 は 2023 年以降を隠す。
 * ============================================================ */
.news__wrapper:has(input[name="category"][value="サービスニュース"]:checked) .news__link:not([data-category="サービスニュース"]),
.news__wrapper:has(input[name="category"][value="イベント・セミナー"]:checked) .news__link:not([data-category="イベント・セミナー"]),
.news__wrapper:has(input[name="category"][value="お知らせ"]:checked) .news__link:not([data-category="お知らせ"]),
.news__wrapper:has(input[name="year"][value="2026"]:checked) .news__link:not([data-year="2026"]),
.news__wrapper:has(input[name="year"][value="2025"]:checked) .news__link:not([data-year="2025"]),
.news__wrapper:has(input[name="year"][value="2024"]:checked) .news__link:not([data-year="2024"]),
.news__wrapper:has(input[name="year"][value="2023"]:checked) .news__link:not([data-year="2023"]),
.news__wrapper:has(input[name="year"][value="before2023"]:checked) .news__link[data-year="2023"],
.news__wrapper:has(input[name="year"][value="before2023"]:checked) .news__link[data-year="2024"],
.news__wrapper:has(input[name="year"][value="before2023"]:checked) .news__link[data-year="2025"],
.news__wrapper:has(input[name="year"][value="before2023"]:checked) .news__link[data-year="2026"],
.news__wrapper:has(input[name="year"][value="before2023"]:checked) .news__link[data-year="2027"],
.news__wrapper:has(input[name="year"][value="before2023"]:checked) .news__link[data-year="2028"],
.news__wrapper:has(input[name="year"][value="before2023"]:checked) .news__link[data-year="2029"],
.news__wrapper:has(input[name="year"][value="before2023"]:checked) .news__link[data-year="2030"] {
  display: none;
}
/* ページネーション: news.js が動くまで (JS 無効時) は隠して全件表示 */
.pagenation:not(.js-ready) {
  display: none;
}
.news__link.is-paged-out {
  display: none;
}
.pagenation__btn:disabled {
  cursor: default;
}

/* ============================================================
 * 4. フォーム
 * ============================================================ */
/* form.css の select 背景がルート絶対パス (/common/img/...) なので相対パスで上書き */
.form__input.select {
  background-image: url("../img/icon_chevron.svg");
}

/* --- abuse/form: 依頼者 (identity 0=本人 / 1=代理人) による行の切替 ---
   元 JS: 初期は claimant-name のみ表示、代理人系 3 行は非表示。 */
form:not(:has(input[name="identity"][value="1"]:checked)) .form__row:has([name="agent-claimant-name"]),
form:not(:has(input[name="identity"][value="1"]:checked)) .form__row:has([name="agent-name"]),
form:not(:has(input[name="identity"][value="1"]:checked)) .form__row:has([name="agent-organization"]),
form:has(input[name="identity"][value="1"]:checked) .form__row:has([name="claimant-name"]) {
  display: none;
}
/* --- 侵害されたとする権利 (right 3=著作権 → copyright 行, 4=商標権 → trademark 行) --- */
form:not(:has(select[name="right"] option[value="3"]:checked)) .form__row:has([name="copyright"]),
form:not(:has(select[name="right"] option[value="4"]:checked)) .form__row:has([name="trademark"]) {
  display: none;
}

/* --- 対象 URL: モーダルの代わりに静的な入力欄。
   初期は元と同じく「URLを入力」ボタン (label) だけ。クリックで hidden checkbox が入り、
   入力欄リストと説明が開いてボタンは消える。開いた後は空欄の次以降を隠す段階表示 --- */
.form__url-lists.static-urls,
.static-urls-note {
  display: none;
}
form:has(#url-input-toggle:checked) .form__url-lists.static-urls {
  display: flex;
  margin-top: 12px;
  row-gap: 12px;
}
form:has(#url-input-toggle:checked) .static-urls-note {
  display: block;
}
form:has(#url-input-toggle:checked) label.form__btn.url {
  display: none;
}
label.form__btn.url {
  cursor: pointer;
}
/* checkbox は視覚的にだけ隠し、キーボード (Tab + Space) でも開けるようにする */
.url-input-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.url-input-toggle:focus-visible ~ label.form__btn.url {
  outline: 2px solid #10181D;
  outline-offset: 2px;
}
.form__url-lists.static-urls .form__url-list {
  padding-left: 4px;
}
.form__url-lists.static-urls .form__input {
  width: 100%;
}
.form__url-lists.static-urls .form__url-list:has(input:placeholder-shown) ~ .form__url-list {
  display: none;
}
.static-urls-note {
  margin-top: 8px;
  font-size: 13px;
}

/* --- abuse/form: 文字数カウンタ。現在数は form-counter.js (form に .js-counter を付ける) ---
   JS 無効時は「最大20000文字」、JS 有効時は元と同じ「0 / 20000文字」 */
.form__length-js,
form.js-counter .form__length-nojs {
  display: none;
}
form.js-counter .form__length-js {
  display: inline;
}