/* お問い合わせ (旧 inquiry.php + page/inquiry.css)。
 * フォーム行 (.reg-row / .reg-input / .reg-value / .reg-error) は register.css を併読みして
 * shop 共通のフォーム様式に揃える。ここには本画面固有のものだけ書く。
 * モバイルファースト + @media (width >= 1000px) は既存 shop CSS の慣例。 */

.inquiry-page {
    /* .site-main の上パディング (--shop-main-pad-block) を打ち消し、パンくず帯をヘッダ直下へ
     * (help / product-detail / feature / search など他ページと同じ) */
    margin-top: calc(-1 * var(--shop-main-pad-block));
    padding-block: 0 32px;
}

/* ===== パンくず (help / review と同型) ===== */
.inq-breadcrumb {
    margin-bottom: 24px;
    padding-block: 10px;
    background: var(--shop-head-bg);
    font-size: 0.8rem;
    color: var(--shop-muted);
}

.inq-breadcrumb-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.inq-breadcrumb-item {
    color: var(--shop-muted);
    text-decoration: none;
}

a.inq-breadcrumb-item:hover {
    color: var(--genre-color);
    text-decoration: underline;
}

.inq-breadcrumb-item[aria-current="page"] {
    color: var(--shop-text);
}

/* ===== ページ見出し (旧 inquiry_title 踏襲: 和文 + 欧文 + リード文 + FAQ 導線) ===== */
.inq-title {
    padding-bottom: 20px;
    margin-bottom: 24px;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

.inq-title-main {
    font-size: 1.5rem;
    font-weight: 700;
    color: #434343;
}

.inq-title-sub {
    margin-bottom: 12px;
    font-size: 0.8rem;
    color: #9e9e9e;
}

.inq-lead {
    line-height: 1.8;
}

/* リード文は 3 段落 (本番踏襲)。p の margin は共通 reset で 0 のため段落間だけ空ける。 */
.inq-lead + .inq-lead {
    margin-top: 1em;
}

.inq-faq {
    margin-top: 1rem;
}

/* FAQ 導線の赤リンク (旧 .inquiry .faq-link) */
.inq-faq-link {
    color: #ce3f3f;
}

.inq-required-note {
    font-size: 0.75rem;
    font-weight: 400;
}

/* ===== ボタン列 (旧 section.navi: 上下 40px・中央寄せ) ===== */
.inq-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin-block: 40px;
}

.inq-actions-note {
    flex-basis: 100%;
    font-size: 0.85rem;
    text-align: center;
}

/* ===== 送信完了 ===== */
.inq-complete {
    padding-block: 24px;
    text-align: center;
}

.inq-complete-title {
    margin-bottom: 12px;
    font-size: 1.3rem;
    font-weight: 700;
}

.inq-complete-note {
    line-height: 1.9;
}

@media (width >= 1000px) {
    .inq-actions-note {
        flex-basis: auto;
        text-align: left;
    }
}