@charset "UTF-8";
/*
 * service-refinements.css — サービス(公開)ページ UI/UX 補完 (2026-07-13)
 *
 * public/style.css(約10,800行の移植元)で未定義のまま Blade から参照されている
 * クラスを補完し、レイアウト崩れ・体裁不良を解消する。巨大な style.css は直接
 * 触らず、本ファイル(style.css の後に読み込む)で最後勝ちに定義する。
 *
 * 注意: 公開レイアウトも html{font-size:62.5%}(1rem=10px)。remは62.5%縮小されるため
 * font-size / spacing は px 指定を原則とする。色/角丸はデザイントークン準拠。
 * investor-public / investor-auth の両レイアウトで読み込まれる。
 */

/* ============================================================
 * 1. 非ログイン導線アラート (.login-notice) — /funds 等
 *    件数見出し等との重なりを防ぎ、通常フローで見やすく表示
 * ============================================================ */
.login-notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    background: #fff8e1;
    border: 1px solid #ffe6a1;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.7;
    color: #6b5a1f;
}

.login-notice a {
    color: var(--color-brand-dark, #0C8816);
    font-weight: 600;
    text-decoration: underline;
}

.login-notice a:hover {
    opacity: 0.8;
}

/* ============================================================
 * 2. 検索フォームのボタン群 (.btn-search / .btn-clear) — /funds
 *    .more は public/style.css 定義済み。size/色 variant を補完。
 * ============================================================ */
.search-box__btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
}

.search-box__btn .more.btn-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 28px;
    border-radius: 9999px;
    background: var(--color-brand-dark, #0C8816);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.search-box__btn .more.btn-search:hover {
    opacity: 0.85;
}

.search-box__btn .more.btn-clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border-radius: 9999px;
    background: #eef1f1;
    color: #1b2f48;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    border: 1px solid #d6dcdc;
    transition: background-color 0.15s ease;
}

.search-box__btn .more.btn-clear:hover {
    background: #e2e8e8;
}

/* ============================================================
 * 3. 表示切替タブ (.btn-grid / .btn-list) — /funds 件数見出し右
 * ============================================================ */
.new-funds__head--tab {
    display: inline-flex;
    gap: 4px;
}

.more.btn-grid,
.more.btn-list {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-gray-text, #6b7280);
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.more.btn-grid { border-radius: 6px 0 0 6px; }
.more.btn-list { border-radius: 0 6px 6px 0; border-left: none; }

.more.btn-grid.is_active,
.more.btn-list.is_active {
    background: var(--color-dark-blue, #1b2f48);
    color: #fff;
    border-color: var(--color-dark-blue, #1b2f48);
}

/* ============================================================
 * 4. 配当金シミュレーションの入力ラッパ (.wrapInput) — /funds/{id}
 *    .math は flex。各 dd 内の入力枠と "500円" のベースラインを揃える
 * ============================================================ */
.math .wrapInput {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #d6dcdc;
    border-radius: 6px;
}

.math .wrapInput.noBorder {
    border-color: transparent;
    background: transparent;
    padding: 6px 4px;
}

.math .wrapInput input {
    width: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #1b2f48;
}

.math .wrapInput input:focus {
    outline: none;
}

/* dl 各列と結果を縦中央で揃える（"500円" のズレ防止） */
.math {
    align-items: center;
}

.math dl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.math dl dd {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ============================================================
 * 5. FAQ / バナー見出し配下のリード文と セクション (.faq-section 他)
 *    banner-page__main の <p> に位置指定が無く見出しと重なる問題を解消
 * ============================================================ */
.banner-page__main p {
    position: relative;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
}

.banner-page__main p a {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
}

.faq-section {
    margin-bottom: 32px;
}

.faq-section:last-child {
    margin-bottom: 0;
}

/* ============================================================
 * 6. 未ログイン CTA の「新規登録」ボタン体裁 (.more のみ→ボタン化)
 *    /funds/{id} 申込ブロック等。ログインボタン(.btn-primary)に対する
 *    サブ(セカンダリ)ボタンとして見えるようにする
 * ============================================================ */
.btn-box .more:not(.btn-primary):not(.btn-search):not(.btn-clear):not(.btn-grid):not(.btn-list),
.pdf-submit .more:not(.btn-primary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 24px;
    border-radius: 9999px;
    background: #fff;
    color: var(--color-brand-dark, #0C8816);
    border: 1px solid var(--color-brand-dark, #0C8816);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.btn-box .more:not(.btn-primary):not(.btn-search):not(.btn-clear):not(.btn-grid):not(.btn-list):hover,
.pdf-submit .more:not(.btn-primary):hover {
    background: #f0faf4;
}

/* ============================================================
 * 7. お問い合わせフォームのラベル折返し修正
 *    .contact-page__main .form-group__labels は grid 5.2rem 1fr の固定列で
 *    「メールアドレス」「カテゴリ」「お問い合わせ内容」等の長いラベルが
 *    52px に収まらず折り返していた。c-form--stacked(全幅積み上げ)に合わせ
 *    ラベル+必須バッジを1行のflexにする。
 * ============================================================ */
.contact-page__main .form-group__labels {
    display: flex;
    align-items: center;
    gap: 8px;
    grid-template-columns: none;
    line-height: 1.6;
    white-space: nowrap;
    font-weight: 700;
    margin-bottom: 6px;
}

.contact-page__main .form-group__labels .c-form__required {
    flex-shrink: 0;
}

/* ============================================================
 * 8. ページ見出しバナーの体裁 — /news /faq /contact /terms /privacy /tokushoho 等
 *    .banner-page(非 --page)は本来 h1 が position:absolute で中央配置され、
 *    リード <p> は通常フローの左上に来る。このため
 *    (1) タイトルとリードの上下関係が画面幅で変わり (リードがタイトルの上/左に
 *        ずれて見える)、(2) バナー高さ 34.1rem がタイトル(+リード)に対して過大、
 *    という違和感があった。ヒーロー画像 (figure) を持たないテキスト見出しバナーは
 *    全幅で「タイトル + リードを中央に縦積み」し、高さもコンテンツに合わせて圧縮する。
 *    figure を持つ /funds 一覧 (検索バーを負マージンで重ねる高さ 34.1rem 前提) や
 *    --page 変種には影響させない。
 * ============================================================ */
.banner-page:not(.--page):not(:has(.banner-page__main figure)) {
    height: auto;
    min-height: 15rem;
    padding: 2.8rem 1.5rem;
    display: flex;
    align-items: center;
}

.banner-page:not(.--page):not(:has(.banner-page__main figure)) .banner-page__main {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
}

.banner-page:not(.--page):not(:has(.banner-page__main figure)) .banner-page__main h1 {
    position: static;
    top: auto;
    left: auto;
    transform: none;
}

.banner-page:not(.--page):not(:has(.banner-page__main figure)) .banner-page__main h1,
.banner-page:not(.--page):not(:has(.banner-page__main figure)) .banner-page__main p {
    /* 淡色マスコット背景の上でも白文字を視認できるよう軽い影を付与 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
}

.banner-page:not(.--page):not(:has(.banner-page__main figure)) .banner-page__main p {
    margin-top: 0;
    text-align: center;
}

@media (max-width: 768px) {
    .banner-page:not(.--page):not(:has(.banner-page__main figure)) {
        min-height: 9.2rem;
        padding: 20px 12px;
    }

    .banner-page:not(.--page):not(:has(.banner-page__main figure)) .banner-page__main {
        gap: 6px;
    }
}

/* ============================================================
 * 9. 書面確認モーダル (#pdfModal / #pdfModal2) の表示 — Alpine x-show 対応
 *    Alpine v3 の x-show は要素を「表示」する際、要素の inline display を
 *    削除 (removeProperty) する。モーダル本体は style.css の
 *    .modal-box{display:none} を基底に持つため、inline の display:flex が
 *    除去された瞬間に基底の display:none が露出し、黒背景 (.modal-backdrop)
 *    だけが出て白いモーダル本体が表示されない。ID 指定 (高詳細度) で表示時の
 *    display:flex を担保し、x-show=false 時は Alpine が付与する inline
 *    display:none が優先されて隠れる。/funds/{id} と申込フォームで共用。
 *    併せて .modal-box の width:100%/max-width:80.4rem を打ち消し、全画面
 *    (inset:0) のセンタリングコンテナとして中央にモーダルを表示する。
 * ============================================================ */
#pdfModal,
#pdfModal2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: none;
}