/* 読むための固定ページ（お問い合わせ・信頼ページ6枚・よくある質問・/career/）の本文（2026-09-25）。
   土台は templates/play/page.html（play/base.html を継承。背景・ヘッダー・フッターはトップや /shindan/ と同じ）。
   見出しの帯（.pl-listhead）・羊皮紙（.pl-parch）は play.css の部品をそのまま使い、ここには
   「本文の行長と組版」「フォームの部品」「行き先の札」しか書かない。
   ★クラス無しの全体規則を書かない（play.css と同じ約束。app/test_play_page.py が見張る）。
   ★色・字は play-chrome.css 先頭の変数（--pl-*）だけを使う。生の色値を書かない。
   正本の棚卸し: docs/調査_古いUIのページの棚卸し_2026-09-25.md */

/* ------------------------------------------------------------ 列（帯と羊皮紙を同じ幅にそろえる） */

/* 本文は1行 40字前後（16px × 40 = 640px）。羊皮紙の枠 16px と内側の余白 36px を足して 744px */
.pl-page-col {
    max-width: calc(744px + 48px);
}

.pl-page-head .pl-listhead-title {
    font-size: clamp(24px, 3vw, 30px);
}

.pl-page-lead {
    line-height: 1.7;
    word-break: auto-phrase;
}

.pl-page-lead:empty {
    display: none;
}

.pl-page-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--pl-muted);
}

.pl-page-crumbs a {
    color: var(--pl-muted);
}

.pl-page-crumbs a::after {
    content: "›";
    margin-left: 6px;
    text-decoration: none;
    display: inline-block;
}

.pl-page {
    padding-block: 32px 56px;
}

/* ------------------------------------------------------------ 羊皮紙の中の本文 */

.pl-page-body {
    /* play.css の html{color-scheme:dark} を羊皮紙の中だけ戻す（入力欄・選択肢の既定色が暗くならないように） */
    color-scheme: light;
    padding: 20px 20px 24px;
    font-size: 16px;
    line-height: 1.95;
    letter-spacing: 0.03em;
}

.pl-page-sec + .pl-page-sec {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px dashed var(--pl-parch-dark);
}

.pl-page-sec h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 19px;
    font-weight: 900;
    line-height: 1.5;
    color: var(--pl-ink);
}

/* 見出しの頭の小さな菱形（ドット絵の飾り。四角を45度回すだけ） */
.pl-page-sec h2::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--pl-wood);
    transform: rotate(45deg);
}

.pl-page-sec p {
    margin: 0 0 12px;
}

.pl-page-sec p:last-child {
    margin-bottom: 0;
}

.pl-page-sec ul {
    margin: 0;
    padding-left: 1.3em;
}

.pl-page-sec li + li {
    margin-top: 6px;
}

.pl-page-sec li::marker {
    color: var(--pl-wood);
}

.pl-page-body a:not([class]) {
    color: var(--pl-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------ 行き先の札（信頼ページ6枚） */

.pl-page-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.pl-page-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 14px;
    background: var(--pl-navy-deep);
    border: 2px solid var(--pl-navy-line);
    color: var(--pl-white);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}

.pl-page-links a:hover,
.pl-page-links a:focus-visible {
    border-color: var(--pl-gold);
    color: var(--pl-gold);
    outline: none;
}

.pl-page-links a[aria-current="page"] {
    background: var(--pl-gold);
    border-color: var(--pl-gold);
    color: var(--pl-ink);
}

/* ------------------------------------------------------------ お問い合わせのフォーム
   クラス名は旧 articles.css と同じ（テンプレートとフォーム部品 front/forms.py の cf-* を変えないため）。
   play/page.html は articles.css を読まないので、ここで羊皮紙に合わせて描き直す。 */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contact-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-field > label,
.contact-turnstile-label {
    margin: 0;
    font-weight: 700;
    font-size: 15px;
    color: var(--pl-ink);
}

.contact-req {
    display: inline-block;
    margin-left: 6px;
    padding: 0 7px;
    background: var(--pl-red-deep);
    color: var(--pl-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;
    vertical-align: 2px;
}

.cf-input {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-ink-soft);
    border-radius: 0;
    box-shadow: inset 0 2px 0 var(--pl-parch-dark);
    color: var(--pl-ink);
    font-family: var(--pl-round);
    font-size: 16px;
    line-height: 1.6;
}

.cf-input::placeholder {
    color: var(--pl-ink-soft);
    opacity: 0.8;
}

.cf-input:focus {
    outline: 3px solid var(--pl-blue-light);
    outline-offset: 0;
    border-color: var(--pl-navy-deep);
}

textarea.cf-input {
    resize: vertical;
    min-height: 160px;
}

.contact-field--check {
    gap: 2px;
}

.contact-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    /* タップ領域44px */
    padding: 10px 0;
    font-weight: 700;
    color: var(--pl-ink);
    cursor: pointer;
}

.contact-check input[type="checkbox"] {
    flex: none;
    width: 22px;
    height: 22px;
    margin: 3px 0 0;
    accent-color: var(--pl-blue);
}

.contact-check a {
    color: var(--pl-blue);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.contact-hint {
    margin: 0;
    color: var(--pl-ink-soft);
    font-size: 13px;
    line-height: 1.7;
}

.contact-field-error {
    margin: 0;
    color: var(--pl-red-deep);
    font-size: 14px;
    font-weight: 700;
}

.contact-form-error {
    padding: 10px 14px;
    border: 2px solid var(--pl-red-deep);
    background: var(--pl-parch-light);
    color: var(--pl-red-deep);
    font-weight: 700;
}

.contact-form-error ul {
    margin: 0;
    padding-left: 1.2em;
}

/* 送信ボタン: 行き止まりページの行き先ボタン（play-gone.css の .pl-gone-btn--main）と同じ作り */
.contact-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 4px;
    padding: 10px 28px;
    background: var(--pl-blue);
    color: var(--pl-white);
    border: 3px solid var(--pl-navy-deep);
    border-radius: 0;
    box-shadow: 0 4px 0 var(--pl-navy-deep);
    font-family: var(--pl-round);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    cursor: pointer;
}

.contact-submit:hover,
.contact-submit:focus-visible {
    background: var(--pl-blue-light);
    outline: none;
}

.contact-submit:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 var(--pl-navy-deep);
}

.contact-submit--back {
    margin-top: 18px;
}

/* ハニーポット（bot 対策）。画面の外へ出す。**消さない**（消すと隠し欄が見えて、人が埋めて送れなくなる） */
.contact-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Cloudflare Turnstile（鍵があるときだけ描かれる）。300x65 の iframe */
.contact-turnstile .cf-turnstile {
    /* 読み込み中に高さが0→65pxへ跳ねて送信ボタンが動くのを防ぐ */
    min-height: 65px;
}

.contact-turnstile iframe {
    max-width: 100%;
}

/* ------------------------------------------------------------ 仕事・キャリアの入口（/career/）のリンクの札 */

/* .pl-page-sec ul（字下げ）と .pl-page-body a:not([class])（下線）に勝つよう、親を1段書く */
.pl-page-sec .career-hub-list {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.pl-page-sec .career-hub-list li + li {
    margin-top: 0;
}

.pl-page-body .career-hub-list a {
    display: block;
    padding: 12px 16px;
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-parch-dark);
    color: var(--pl-ink);
    text-decoration: none;
}

.pl-page-body .career-hub-list a:hover,
.pl-page-body .career-hub-list a:focus-visible {
    border-color: var(--pl-wood-light);
    outline: none;
}

.career-hub-list strong {
    display: block;
    color: var(--pl-blue);
    font-size: 17px;
    font-weight: 900;
    line-height: 1.6;
}

.career-hub-list span {
    display: block;
    color: var(--pl-ink-soft);
    font-size: 14px;
    line-height: 1.75;
}

/* ------------------------------------------------------------ よくある質問 */

.pl-faq {
    display: grid;
    gap: 10px;
}

.pl-faq-item {
    background: var(--pl-parch-light);
    border: 2px solid var(--pl-parch-dark);
}

.pl-faq-item[open] {
    border-color: var(--pl-wood-light);
}

.pl-faq-item summary {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    list-style: none;
    font-weight: 700;
    line-height: 1.6;
    color: var(--pl-ink);
    cursor: pointer;
}

.pl-faq-item summary::-webkit-details-marker {
    display: none;
}

/* 開閉の印（＋／－）。右端に置く */
.pl-faq-item summary::after {
    content: "+";
    flex: none;
    margin-left: auto;
    font-weight: 900;
    font-size: 18px;
    line-height: 1.4;
    color: var(--pl-wood);
}

.pl-faq-item[open] summary::after {
    content: "−";
}

.pl-faq-item summary:focus-visible {
    outline: 3px solid var(--pl-blue-light);
    outline-offset: -3px;
}

.pl-faq-answer {
    margin: 0;
    padding: 0 14px 14px;
    color: var(--pl-ink);
}

.pl-page-foot {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 2px dashed var(--pl-parch-dark);
    text-align: center;
}

.pl-page-foot p {
    margin: 0 0 14px;
}

/* ------------------------------------------------------------ 幅 */

@media (min-width: 720px) {
    .pl-page-body {
        padding: 28px 36px 36px;
    }
}

@media (max-width: 480px) {
    .pl-page {
        padding-block: 22px 40px;
    }

    /* Turnstile の iframe（300px）が 375px 幅で羊皮紙の内側に収まる余白（351 − 枠32 − 余白16 = 303px） */
    .pl-page-body {
        padding: 12px 8px 18px;
        font-size: 15.5px;
    }

    .pl-page-sec h2 {
        font-size: 18px;
    }

    .contact-submit {
        width: 100%;
    }

    .pl-page-links a {
        font-size: 13px;
    }
}