/*
Theme Name: SWELL Child
Theme URI:
Description: SWELL子テーマ ワニマガweb
Author: WANI MAGAZINE
Template: swell
Version: 1.0.0
Text Domain: swell-child
*/

/* アダルトTOPページ：タイトル・パンくず・上部余白を非表示 */
.page-adult .entry-title,
.page-adult .p-entryTitle,
.page-adult .p-breadcrumb,
.page-adult .c-breadcrumb,
.page-adult .l-breadcrumb,
.page-adult #breadcrumb,
.page-adult .breadcrumb,
.page-adult [class*="breadcrumb"] {
    display: none !important;
}

.page-adult .p-article__header,
.page-adult .p-entryHeader,
.page-adult .p-pageHeader,
.page-adult [class*="entryHeader"],
.page-adult [class*="pageHeader"] {
    display: none !important;
}

.page-adult .p-article__body,
.page-adult .p-entryContent,
.page-adult .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* フルブリードバナーのPC右余白対策 */
.page-adult {
    overflow-x: hidden;
}


/* SPヘッダーナビのSwiper複製スライドを非表示（1アイテム時の重複対策） */
.p-spHeadMenu .swiper-slide-duplicate {
    display: none !important;
}

/* 共通セクション見出し（左ボーダー付き）→ SWELLカスタマイザーの見出しデザインで設定 */
.wani-section-head {
    padding-left: 12px;
    margin: 0 0 20px;
}

/* SWELLページタイトルに左ボーダースタイル */
.entry-title,
.p-entryTitle,
.p-pageTitle,
.p-pageTitle__text,
.p-pageHead .p-pageTitle__text,
.p-pageHead__title,
h1.page-title,
.wp-block-post-title {
    padding-left: 14px !important;
    border-left: 4px solid #1a3060 !important;
}

/* ============================================================
   Snow Monkey Forms カスタムデザイン（お問い合わせ／投稿フォーム）
   v12.1.3 検証済み (2026-06-15)
   - 影・カード枠なし。項目間の細い区切り線のみ
   - フォームは左寄せ
   - 送信/確認ボタン: 濃いグレー (#333) の丸ピル
   ============================================================ */
.smf-form {
    --form-accent: #2A6CF5;            /* リンク・focus色 */
    --form-submit-bg: #333333;         /* ボタン色 */
    --form-submit-bg-hover: #4a4a4a;
    --form-border: #E2E5EB;
    --form-divider: #D1D5DB;
    --form-text: #2a2a2a;
    --form-control-bg: #FAFBFC;
    --form-required-bg: #E53E3E;
    --form-radius: 6px;

    /* 幅は下の「フォームのあるページは本文を800pxの1本の欄にそろえる」側で決める。ここでは上限を持たない */
    max-width: none;
    margin: 0;
    color: var(--form-text);
}

/* フォームのあるページ（お問い合わせ・WEB持ち込み窓口）は、本文を800pxの1本の欄にそろえる（2026-09-17）。
   広い画面では本文の欄が1,200px以上になり、説明文は途中で改行して左に寄るのに、フォームの区切り線だけ右端まで伸び、
   「確認画面へ／送信する」ボタンは欄の中央＝フォームから遠く右に浮いて見えていた（ユーザー指摘「バランスが悪い」）。
   以前は .smf-form だけを720pxに絞っていたが、それだとボタン（form 直下の .smf-action）と説明文が揃わない。
   欄ごと絞れば、見出し・説明文・よくある質問・フォームの左端と右端が揃い、ボタンはフォームの真下の中央に来る。
   左寄せのまま（ページ見出しと同じ左端）。スマホは画面幅が800px未満なので影響しない。 */
.post_content:has(> .snow-monkey-form) > * {
    max-width: 800px;
}

/* 旧カード化を完全リセット */
.smf-form--input {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* SMFのwrapperを block 化（width:100% を効かせる） */
.smf-form .smf-placeholder,
.smf-form .smf-text-control,
.smf-form .smf-email-control,
.smf-form .smf-tel-control,
.smf-form .smf-url-control,
.smf-form .smf-textarea-control,
.smf-form .smf-select-control {
    display: block;
    width: 100%;
}

/* 各 item: SP=1カラム, PC=2カラム
   SMFデフォルトのテーブル風枠線(border:1px solid #ddd, ラベル列灰背景)を完全リセット
   SMFのspecificityに確実に勝つため !important で固定 */
.smf-form .smf-item,
.smf-form .smf-item:not(:first-child) {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 20px;
    padding: 16px 0;
    margin: 0;
    border: 0 !important;
    border-bottom: 1px solid var(--form-divider) !important;
}
.smf-form .smf-item:last-child { border-bottom: 0 !important; }
/* 1項目めの上にも区切り線（2026-09-18。説明文とフォームの境目をはっきりさせる） */
.smf-form .smf-item:first-child { border-top: 1px solid var(--form-divider) !important; }
@media (min-width: 600px) {
    .smf-form .smf-item,
    .smf-form .smf-item:not(:first-child) {
        grid-template-columns: 170px 1fr;
        align-items: center;
    }
    .smf-form .smf-item:has(.smf-textarea-control) {
        align-items: start;
    }
    .smf-form .smf-item:has(.smf-textarea-control) .smf-item__col--label {
        padding-top: 10px;
    }
    /* ラジオ・チェックボックスの縦並びも項目名を上揃え（中央だと選択肢の途中に浮いて見える。2026-09-18） */
    .smf-form .smf-item:has(.smf-radio-buttons-control, .smf-checkboxes-control) {
        align-items: start;
    }
}
.smf-form .smf-item__col {
    flex: unset;
    max-width: none;
    padding: 0;
    background: transparent;
    border: 0;
}
.smf-form .smf-item__col--label {
    background: transparent;
    border: 0;
}
.smf-form .smf-item__col--controls { min-width: 0; }
.smf-form .smf-item__label {
    font-weight: 500;
    font-size: 14px;
    color: var(--form-text);
}

/* 必須バッジ */
.smf-form .smf-item:has(.smf-item__controls [data-validations~="required"]) .smf-item__label__text::after {
    content: "必須";
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    background: var(--form-required-bg);
    border-radius: 9999px;
    vertical-align: 1px;
    white-space: nowrap;
}

/* PC（2カラム）では「必須」をラベル欄の右端に揃える。
   項目名の直後に付けると項目名の長さで位置がずれ、縦に並べたとき「うねうね」して見えるため（2026-09-18）。
   スマホは縦並びなので項目名の直後のまま */
@media (min-width: 600px) {
    .smf-form .smf-item__label > label { display: block; }
    .smf-form .smf-item:has(.smf-item__controls [data-validations~="required"]) .smf-item__label__text {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .smf-form .smf-item:has(.smf-item__controls [data-validations~="required"]) .smf-item__label__text::after {
        margin-left: 0;
        flex-shrink: 0;
    }
}

/* 入力欄 */
.smf-form input[type="text"],
.smf-form input[type="email"],
.smf-form input[type="tel"],
.smf-form input[type="url"],
.smf-form input[type="number"],
.smf-form textarea,
.smf-form select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;       /* heightをやめてpaddingで高さを作る */
    font-size: 16px;          /* iOSのauto-zoom防止 (SP) */
    line-height: 1.5;
    color: var(--form-text);
    background: var(--form-control-bg);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    transition: border-color .15s, box-shadow .15s;
    appearance: none;
    font-family: inherit;
}
@media (min-width: 600px) {
    .smf-form input[type="text"],
    .smf-form input[type="email"],
    .smf-form input[type="tel"],
    .smf-form input[type="url"],
    .smf-form input[type="number"],
    .smf-form textarea,
    .smf-form select { font-size: 14px; }
}
.smf-form textarea {
    min-height: 140px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.6;
}
.smf-form input:focus,
.smf-form textarea:focus,
.smf-form select:focus {
    outline: none;
    border-color: var(--form-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-accent) 18%, transparent);
}
.smf-form ::placeholder { color: #aab0b8; }

/* セレクトの矢印は SMF の .smf-select-control__toggle が描画するため自前矢印は付けない。
   右側にtoggle分の余白だけ確保 */
.smf-form select {
    padding-right: 36px;
}

/* ラジオ・チェックボックス */
.smf-form .smf-radio-buttons-control,
.smf-form .smf-checkboxes-control {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.smf-form .smf-checkbox-control,
.smf-form .smf-radio-button-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.smf-form .smf-checkbox-control__label,
.smf-form .smf-radio-button-control__label {
    font-size: 14px;
    line-height: 1.5;
}
.smf-form input[type="radio"],
.smf-form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--form-accent);
    margin: 0;
    vertical-align: middle;
}

/* item内リンク */
.smf-form .smf-item__col--controls a {
    color: var(--form-accent);
    text-decoration: underline;
}

/* 同意確認 item: 別カード化はやめて通常itemとして扱う（区切り線で分離） */
.smf-form--input .smf-item:has(.smf-checkboxes-control) {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 16px 0;
    margin: 0;
}

/* ボタン（確認画面へ／送信／戻る）
   .smf-action は .smf-form の外側にあるためCSS変数が継承されない → 固定値で指定
   SP=左寄せ, PC=中央寄せ */
.smf-action {
    margin-top: 28px;
    text-align: left;
}
@media (min-width: 600px) {
    .smf-action {
        text-align: center;
    }
}
.smf-action .smf-button-control__control {
    min-width: 220px;
    padding: 14px 48px;
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    background-color: #333333;
    background-image: none;
    border: none;
    border-radius: 9999px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color .15s;
}
.smf-action .smf-button-control__control:hover {
    background-color: #4a4a4a;
    background-image: none;
}

/* ==========================================================================
   固定ページのタイトル（h1.c-pageTitle）
   ※SWELLは body_class() を <body> ではなく #body_wrap に出力するため
     セレクタは #body_wrap.page とする（body.page では効かない）。

   2026-06-29 に全固定ページで一律非表示にしていたが、2026-08-06 に取りやめた。
   もともとは新着一覧が自前の大見出しを持っていて二重見出しになるのを避ける対処
   だったが、それが全ページに広がった結果、雑誌一覧・単行本一覧・発売カレンダー・
   著者一覧などが「何のページか分からない」状態になっていた。
   （タイトルを消しても枠の余白は残るため、パンくずの下に空白が出る副作用もあった）

   自前の大見出しを持つページだけ個別に隠す方針に変更:
     - 新着一覧(529621)   … ショートコード側で .c-pageTitle を !important で非表示
     - 成年向けTOP(526989) … 「adultページ：タイトル・パンくず・余白を非表示」で対応
     - 一般TOP(523987)    … TOPページに「一般TOP」という内部呼称を出したくないので下で除外
   ========================================================================== */
#body_wrap.page-id-523987 .c-pageTitle {
    display: none;
}
/* ==========================================================================
   パンくずリストの文字サイズ
   SWELL標準は 10px で、スマホでは特に読みづらいので少し大きくする。
   .p-breadcrumb__list に指定すれば a・span 両方（現在地の非リンク項目含む）に効く。
   ========================================================================== */
.p-breadcrumb__list {
    font-size: 13px;
}
@media (max-width: 600px) {
    .p-breadcrumb__list {
        font-size: 12px;
    }
}

/* ── 末尾（現在地）のクラム ─────────────────────────────────
   SWELLは記事ページで末尾を .single .p-breadcrumb__item:last-child > span
   { display:none } で隠す（下の大見出しと重複するため）。
   ただし ::after の「›」を消しているのは*本当の*最後のli なので、
   末尾が隠れると1つ前のクラムの「›」が行末に取り残される（TOP › R18 › 雑誌 ›）。

   雑誌の号ページは末尾がタイトル全文ではなく号だけ（例：2026年8月号）で
   重複感が無く、どの号を見ているかの手がかりになるので表示する。
   単行本・書籍も表示する（2026-09-14 ユーザー指摘「R18 › 単行本 のあとにタイトルが無い」）。
   それ以外の記事ページは SWELL のまま隠し、取り残される「›」だけ消す。
   ※ セレクタは #body_wrap 側（SWELLは body_class() を <body> に出さない）

   🔴 SWELL の .p-breadcrumb__list は1行固定（flex・nowrap・overflow:hidden）なので、
      長い書名はそのままだと文字の途中でブツ切れる。末尾だけ縮めて「…」で省略する。
      span は SWELL で inline-flex だが、flex では text-overflow が効かないので block にする。
   ------------------------------------------------------------ */
#body_wrap.single-magazine .p-breadcrumb__item:last-child,
#body_wrap.single-comics .p-breadcrumb__item:last-child,
#body_wrap.single-books .p-breadcrumb__item:last-child {
    min-width: 0;
}
#body_wrap.single-magazine .p-breadcrumb__item:last-child > span.p-breadcrumb__text,
#body_wrap.single-comics .p-breadcrumb__item:last-child > span.p-breadcrumb__text,
#body_wrap.single-books .p-breadcrumb__item:last-child > span.p-breadcrumb__text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}
#body_wrap.single:not(.single-magazine):not(.single-comics):not(.single-books) .p-breadcrumb__item:nth-last-child(2)::after {
    content: none;
}

/* ── スマホ（マウスの無い端末）のタップ反応 ─────────────────────
   ホバーの色変化は @media (hover: hover) でPCだけにした（貼り付きホバー対策・2026-09-15）。
   代わりにスマホは「押した瞬間だけ薄くなる」反応を全リンク・ボタンに付けて、押したことを伝える。 */
@media (hover: none) {
    a:active,
    button:active {
        opacity: .6;
    }
}

/* ── 小さい試し読みボタンは全端末で高さ44px・14px（2026-09-15 ユーザー決定）──────
   一覧・カレンダー・著者ページ・関連作品の「小」ボタンは高さ約32px・12pxで、スマホで押し間違えやすかった。
   指の目安（Apple 44pt / Google 48dp）に合わせて44px・14pxにし、PCも同じ大きさに揃えた（案A）。
   「小さい試し読みボタン＝どの端末でも44px・14px」の1ルール。商品ページの主ボタン(約50px)とも印象が揃う。
   商品ページの主ボタン .wani-trial-open-btn は元から大きいので対象外。
   ⚠️ 各ボタンのCSSはショートコードが本文中に出す <style> にあり style.css より後に読まれる。
      同じ詳細度だと負けるので #body_wrap を前に付けて勝たせている。
   雑誌一覧 .wmi-btn は同じ行に「X」「最新号」などが並ぶので、行の高さが揃うよう全ボタンに効かせる。 */
#body_wrap .wci-trial-btn,
#body_wrap .wmi-btn,
#body_wrap .wrc-trial-btn,
#body_wrap .wmp-book-trial,
#body_wrap .wat-card__trial,
#body_wrap .wauthor-trial-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: 14px;
    box-sizing: border-box;
}
/* 単行本一覧・雑誌一覧はカード幅いっぱいのボタンなので横幅は元のまま広げる */
#body_wrap .wci-trial-btn,
#body_wrap .wmi-btn {
    display: flex;
}

/* ==========================================================================
   デザイントークン
   🔴 明朝との混在は採用しない（2026-09-11 ユーザー判断）。FANZA・DLsite・講談社なども
   本文と同じゴシックで、**大きさと太さだけ**で階層を作っている。
   一度 Noto Serif JP を入れたが撤去した（Webフォントの読み込みごと削除済み）。
   ========================================================================== */
:root {
    /* 限定版だけに使う赤。⚠️ これ以外の要素に使わないこと（2026-09-11 ユーザー指定で #E60012 から変更） */
    --wani-ltd-red: #c8102e;
}

/* reCAPTCHA v3：右下のバッジは隠し、フォーム下の一文（.wani-recaptcha-note）で規約表示を代える（2026-09-18）。
   display:none にすると reCAPTCHA が動かなくなるので visibility で隠す（Google 公式の方法） */
.grecaptcha-badge { visibility: hidden; }
.wani-recaptcha-note {
    margin: 16px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #777;
    text-align: center;
}
.wani-recaptcha-note a { color: inherit; text-decoration: underline; }