@charset "utf-8";

/* ==========================================================================
   ビジネスフリーローン LP
   PC: 1440px / コンテンツ幅 1080px      SP: 390px / コンテンツ幅 368px
   ブレイクポイント 767px（master.min.css と同じ）
   ========================================================================== */

/* --------------------------------------------------
   ■ 上下中央の視覚補正について
   和文フォント（Windows のメイリオ等）は、フォントが確保する上下の高さ
   （ascent 32px / descent 13px @30px）に対して、実際に描かれる文字の
   高さ（上25px / 下2px）が小さく、行の箱の「下側」に約4px 余ります。
   そのため padding を上下同じにすると、文字が上に寄って見えます。
   このファイルでは、罫線や背景で箱が見える要素だけ、上下の padding を
   約 0.07em ずらして文字の見た目を中央にそろえています（高さは変えない）。
   数値は Chrome + メイリオでの実測に基づきます。
   -------------------------------------------------- */

/* --------------------------------------------------
   モーダル表示時のガタつき防止
   共通CSSは .modal-expanded body{position:fixed} でスクロールを止めるが、
   その瞬間にページのスクロールバーが消え、表示領域が約15px広がる。
   結果、本文・右サイドの固定ナビ・追従CTAが右にずれて「崩れた」ように見える。
   scrollbar-gutter でスクロールバーぶんの幅を常に確保し、消えても動かないようにする。
   -------------------------------------------------- */
html {
    scrollbar-gutter: stable;
}

/* --------------------------------------------------
   共通
   -------------------------------------------------- */
/* NOREN では .main-container（最大幅1080px・左右余白20px）の中に入る。
   .main-container 側のスタイルは変えず、こちらを画面幅まで広げて
   メインビジュアル・帯見出し・背景色を全幅のまま保つ */
.uni-freeloan {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    color: #01478f;
    line-height: 1.6;
}

/* 本文の画像は横幅いっぱい。ただし共通アイコン（別窓・PDF）は
   原寸のまま文中に置くので対象外にする */
.uni-freeloan img:not(.icon-pdf):not(.icon-blank):not(.v-middle) {
    display: block;
    width: 100%;
    height: auto;
}

/* 共通CSSが img{vertical-align:bottom} を当てており、
   そのままだと行の下端に沈んで文字と揃わないので中央に合わせる */
.uni-freeloan .icon-pdf,
.uni-freeloan .v-middle {
    position: relative;
    /* vertical-align:middle でも和文の下余白ぶん約0.15em下に残るので持ち上げる */
    top: -.15em;
    display: inline-block;
    margin-left: 6px;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

/* 共通CSS（master.min.css）の余白・リスト装飾を打ち消す。
   :where() は詳細度0なので、以降のクラス指定を上書きしない */
.uni-freeloan :where(h1, h2, p, ul, li) {
    margin: 0;
    padding: 0;
}

.uni-freeloan :where(ul) {
    list-style: none;
}

.uni-inner {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1080px;
    width: 100%;
}

.uni-freeloan a {
    transition: opacity .2s;
}

/* 規定P35「マウスオーバー時にアンダーラインを表示する」に合わせる。
   共通CSSが p a / ul a / ol a / dl a / table a に常時下線を付けているため打ち消す */
.uni-freeloan p a,
.uni-freeloan ul a,
.uni-freeloan ol a,
.uni-freeloan dl a,
.uni-freeloan table a {
    text-decoration: none;
}

.uni-freeloan a:hover {
    opacity: .8;
    text-decoration: underline;
}

/* 画像リンクは下線を出さない */
.uni-btn a:hover,
.uni-doc-btn a:hover,
.uni-tel-num a:hover {
    text-decoration: none;
}

/* リンクの色はここだけで管理する。
   共通CSSは a{color:#008dcb} だが p a:visited / ul a:visited を紫(#a757a8)に
   するため、訪問後に色が変わる。:visited まで書いて詳細度で勝たせて固定する。 */
.uni-freeloan a,
.uni-freeloan a:visited,
.js-modal-content a,
.js-modal-content a:visited {
    color: #008dcb;
}

/* 色が異なるリンク（電話番号は紺、紺ボタンの文字は白） */
.uni-freeloan .uni-tel-num a,
.uni-freeloan .uni-tel-num a:visited {
    color: #01478f;
}

.uni-freeloan .uni-doc-btn a,
.uni-freeloan .uni-doc-btn a:visited {
    color: #fff;
}

/* 画像ボタン（申し込み・シミュレーション）
   親の <p> 側に max-width があるので、block で幅いっぱいにしてよい */
.uni-btn a {
    display: block;
    text-decoration: none;
}

.uni-btn.uni-btn-apply {
    margin: 0 auto;
    max-width: 908px;
}

.uni-btn.uni-btn-sim {
    flex-shrink: 0;
    width: 360px;
}

/* 全面帯見出し（スピーディーにお借り入れ／お問い合わせ）
   1440px より広い画面では画像を引き伸ばして全幅を埋める */
.uni-band img {
    margin: 0 auto;
}

/* --------------------------------------------------
   メインビジュアル
   -------------------------------------------------- */
.uni-mv {
    background: #0047d3;
}

.uni-mv h1 img {
    margin: 0 auto;
}

/* --------------------------------------------------
   申し込みCTA
   -------------------------------------------------- */
.uni-cta {
    padding: 14px 0 20px;
    background: #e6f4ff;
}

.uni-cta-sub {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    max-width: 908px;
}

.uni-link-list {
    display: flex;
    align-items: center;
    margin-left: 44px;
}

/* 矢印は li の擬似要素。flex の align-items で文字と上下中央をそろえる
   （背景画像だと行の高さに追従せず下にずれるため） */
.uni-link-list > li {
    display: flex;
    align-items: center;
    font-size: 20px;
    white-space: nowrap;
}

/* .uni-link-list > li::before {
    position: relative;
    top: -.1em;
    flex-shrink: 0;
    margin-right: 14px;
    width: 10px;
    height: 17px;
    background: url(/shared/images/hojin/free-loan_index_icon_03.svg) no-repeat center / contain;
    content: "";
} */

.uni-link-list > li + li {
    margin-left: 32px;
}

/* 商品概要説明書（注記の下）。文字サイズと矢印は元のまま中央揃えにする */
.uni-link-list.uni-link-list-center {
    justify-content: center;
    margin-top: 18px;
    margin-left: 0;
}

.uni-link-list.uni-link-list-center > li {
    justify-content: center;
}

/* 「＞」を文字の左に出す。共通の .uni-link-list > li::before は
   コメントアウトされているので、この行だけに付ける。
   親の li が display:flex なので ::before は flex アイテムとして
   ブロック化され、width / height が効く */
.uni-link-list.uni-link-list-center > li::before {
    position: relative;
    /* 行ボックスの中央だと和文の下余白ぶん約0.1em下にずれるので持ち上げる */
    top: -.1em;
    flex-shrink: 0;
    margin-right: 14px;
    width: 10px;
    height: 17px;
    background: url(/shared/images/hojin/free-loan_index_icon_03.svg) no-repeat center / contain;
    content: "";
}



/* 金利に関する注記（返済シミュレーションの下） */
.uni-note-list {
    margin: 18px auto 0;
    max-width: 908px;
    font-size: 13px;
    color: #333;
}

.uni-note-list > li + li {
    margin-top: 6px;
}

/* --------------------------------------------------
   4つの特徴
   -------------------------------------------------- */
.uni-features {
    background: #0090ff;
}

.uni-features h2 img {
    margin: 0 auto;
}

/* --------------------------------------------------
   スピーディーにお借り入れ
   -------------------------------------------------- */
.uni-flow {
    margin-top: 54px;
    padding-bottom: 54px;
}

.uni-flow-lead {
    margin: 38px auto 0;
    max-width: 578px;
    /* 和文フォントは descent（文字下の余白）が ink より大きく、
       行の箱の下側に約4px余る。上下の padding を 2px ずらして
       文字の見た目を上下中央にそろえる（合計の高さは 48px のまま） */
    padding: 26px 0 22px;
    border-top: 3px solid #01478f;
    border-bottom: 3px solid #01478f;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.uni-flow-lead em {
    color: #FF0000;
    font-style: normal;
}

.uni-flow-img {
    margin-top: 37px;
}

/* --------------------------------------------------
   同意してお申し込み
   -------------------------------------------------- */
.uni-agree {
    padding: 42px 0 45px;
    background: #e6f4ff;
}

.uni-doc-list {
    display: flex;
    justify-content: center;
    gap: 33px;
}

.uni-doc-list > li {
    width: 400px;
}

.uni-doc-btn a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 74px;
    /* 上下 padding の差 3px = 和文の下余白ぶんの視覚補正（後述の注記参照） */
    padding: 9.5px 38px 6.5px;
    background: #01478f;
    box-shadow: 0 3px 6px rgba(1, 71, 143, .2);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 9px;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
}

.uni-doc-btn a::after {
    position: absolute;
    top: 50%;
    right: 17px;
    margin-top: -1px;
    transform: translateY(-50%);
    width: 11px;
    height: 19px;
    background: url(/shared/images/hojin/free-loan_index_icon_04.svg) no-repeat center / contain;
    content: "";
}

.uni-doc-dl {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
    font-size: 20px;
}

.uni-doc-dl::before {
    position: relative;
    top: -.1em;
    flex-shrink: 0;
    margin-right: 13px;
    width: 10px;
    height: 17px;
    background: url(/shared/images/hojin/free-loan_index_icon_03.svg) no-repeat center / contain;
    content: "";
}



.uni-agree-check {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 39px auto 0;
    max-width: 635px;
    min-height: 50px;
    padding: 4px 22px 4px 28px;
    border: 2px solid #d9e3ed;
    background: #fff;
}

.uni-agree-check input {
    flex-shrink: 0;
    margin: 0 6px 0 0;
    width: 17px;
    height: 17px;
    /* デザインのチェックマークは紺（実測 #01478D） */
    accent-color: #01478f;
}

.uni-agree-check label {
    padding-top: 2px;
    font-size: 15px;
    line-height: 1.4;
    cursor: pointer;
}

.uni-agree-check br {
    display: none;
}

.uni-agree .uni-btn.uni-btn-apply {
    margin-top: 27px;
}

/* --------------------------------------------------
   お問い合わせ
   -------------------------------------------------- */
.uni-contact {
    margin-top: 54px;
    margin-bottom: 96px;
}

.uni-contact .uni-inner {
    padding-top: 47px;
}

/* 左に名前、右に「電話番号枠 + 受付時間」の2列。
   受付時間は電話番号枠と同じ列に置くことで、枠に対して左右中央になる */
.uni-tel {
    display: grid;
    grid-template-columns: auto 630px;
    justify-content: center;
    column-gap: 27px;
}

.uni-tel-name {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding-top: 6px;
    font-size: 34px;
    font-weight: 700;
}

.uni-tel-num {
    grid-column: 2;
    grid-row: 1;
    box-sizing: border-box;
    width: 100%;
    padding: 18px 0;
    border-top: 3px solid #01478f;
    border-bottom: 3px solid #01478f;
}

.uni-tel-num a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    color: #01478f;
    font-size: 48px;
    font-weight: 700;
    /* アイコンと数字の上下中央を揃えるため行間を詰める */
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
}

/* 数字はフォントの下余白ぶん上に寄るので、アイコンの中心に合わせて下げる */
.uni-tel-num .num {
    position: relative;
    top: .042em;
}

.uni-tel-num img {
    flex-shrink: 0;
    width: 99px;
}

.uni-tel-time {
    grid-column: 2;
    grid-row: 2;
    margin-top: 12px;
    font-size: 18px;
    text-align: center;
    color: #333;
}





/* 区切り線は行の上側。各列の最終行だけ下側にも引く */







/* ==========================================================================
   SP（〜767px）
   ========================================================================== */
@media screen and (max-width: 767px) {
    .uni-freeloan .uni-tel-num a img {
        max-width: 65px;
    }

    .uni-inner {
        padding: 0 11px;
    }

    /* CTA */
    .uni-cta {
        padding: 15px 0 22px;
    }

    .uni-cta-sub {
        display: block;
        max-width: none;
    }

    .uni-btn.uni-btn-apply {
        max-width: none;
    }

    .uni-btn.uni-btn-sim {
        width: 100%;
        max-width: 360px;
    }

    .uni-cta .uni-btn.uni-btn-sim {
        margin-top: 18px;
        margin: 18px auto 0;
    }

    /* SPデザインは縦並び */
    .uni-link-list {
        display: block;
        margin: 22px 0 0;
        padding: 0 8px;
    }

    .uni-link-list > li {
        font-size: 17px;
        white-space: normal;
    }

    /* SPデザインの矢印は 7×12px。親の align-items:center で文字と上下中央
       （align-self:flex-start を外したので行の中央に乗る） */
    .uni-link-list > li::before,
    .uni-link-list.uni-link-list-center > li::before,
    .uni-doc-dl::before {
        margin-right: 11px;
        width: 7px;
        height: 12px;
    }

    .uni-link-list > li + li {
        margin: 12px 0 0;
    }

    .uni-note-list {
        margin-top: 24px;
        padding: 0 8px;
        max-width: none;
        font-size: 13px;
        text-align: left;
    }

    /* スピーディーにお借り入れ */
    .uni-flow {
        margin-top: 33px;
        padding-bottom: 42px;
    }

    .uni-flow-lead {
        margin-top: 30px;
        max-width: none;
        padding: 18px 0;
        font-size: 18px;
    }

    .uni-flow-img {
        margin-top: 26px;
        padding: 0 4px;
    }
}

@media screen and (max-width: 767px) {

    /* 同意してお申し込み */
    .uni-agree {
        padding: 34px 0 38px;
    }

    .uni-doc-list {
        display: block;
    }

    .uni-doc-list > li {
        width: auto;
    }

    .uni-doc-list > li + li {
        margin-top: 22px;
    }

    .uni-doc-btn a {
        min-height: 57px;
        padding: 10px 34px;
        font-size: 16px;
        border-radius: 9px;
    }

    .uni-doc-btn a::after {
        right: 14px;
        width: 8px;
        height: 14px;
    }

    .uni-doc-dl {
        margin-top: 15px;
        font-size: 17px;
    }

    .uni-agree-check {
        margin-top: 38px;
        max-width: none;
        min-height: 73px;
        padding: 10px 14px;
        text-align: center;
    }

    .uni-agree-check label {
        font-size: 15px;
        line-height: 1.8;
    }

    .uni-agree-check br {
        display: block;
    }

    .uni-agree .uni-btn.uni-btn-apply {
        margin-top: 12px;
    }
}

@media screen and (max-width: 767px) {

    /* お問い合わせ */
    .uni-contact {
        margin-top: 32px;
        margin-bottom: 40px;
    }

    .uni-contact .uni-inner {
        padding-top: 20px;
    }

    .uni-tel {
        display: block;
    }

    .uni-tel-name {
        padding-top: 0;
        font-size: 22px;
        text-align: center;
    }

    .uni-tel-num {
        margin-top: 19px;
        padding: 14px 0;
    }

    .uni-tel-num a {
        gap: 12px;
        font-size: 32px;
        pointer-events: auto;
    }

    .uni-tel-num img {
        width: 73px;
    }

    .uni-tel-time {
        margin-top: 16px;
        font-size: 15px;
    }
}

@media screen and (max-width: 750px) {
    .uni-tel-num a {
        font-size: 26px;
    }
}

/* --------------------------------------------------
   同意前の申し込みボタン（非活性）
   -------------------------------------------------- */
/* 同意チェック前はグレー画像、チェック後は赤画像に切り替える */
.uni-btn-on {
    display: block;
}

.uni-btn-off {
    display: none;
}

/* 非活性の判定は共通機能が付ける aria-disabled を使う。
   共通CSSの非活性色（.btn-em-03 .item[aria-disabled=true]{background:#999}）に合わせ、
   グレー画像も #999 で作成している */
.uni-btn a[aria-disabled="true"] .uni-btn-off {
    display: block;
}

.uni-btn a[aria-disabled="true"] .uni-btn-on {
    display: none;
}

.uni-btn a[aria-disabled="true"] {
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   中間幅（768〜1119px）
   デザインは1440px想定で、908px/630px/400px などの固定幅を使っている。
   コンテンツ幅1080pxを確保できない画面では、はみ出さないよう可変にする。
   ========================================================================== */
@media screen and (min-width: 768px) and (max-width: 1119px) {

    .uni-inner {
        padding: 0 20px;
    }

    /* 申し込みCTA：デザインどおり1行のまま。折り返さず、幅に応じて縮める */
    .uni-btn.uni-btn-sim {
        flex-shrink: 0;
        /* 908px 基準でのシミュレーションボタンの比率（360/908） */
        width: 39.6%;
        max-width: 360px;
    }

    .uni-link-list {
        flex-wrap: nowrap;
        margin-left: 3%;
    }

    .uni-link-list > li {
        font-size: clamp(16px, 1.75vw, 20px);
    }

    .uni-link-list > li + li {
        margin-left: 3%;
    }

    /* 同意書類ボタン：2列のまま幅を可変に */
    .uni-doc-list {
        gap: 24px;
    }

    .uni-doc-list > li {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
    }

    .uni-doc-btn a {
        padding: 9.5px 34px 6.5px;
        font-size: 17px;
    }

    /* 電話：デザインどおり常に横並び。積まずに文字と枠を縮めて収める */
    .uni-tel {
        grid-template-columns: minmax(0, auto) minmax(0, 630px);
        column-gap: 2.5%;
    }

    .uni-tel-name {
        font-size: clamp(20px, 2.6vw, 34px);
        white-space: nowrap;
    }

    .uni-tel-num a {
        gap: 2.5%;
        font-size: clamp(28px, 3.6vw, 48px);
    }

    .uni-tel-num img {
        width: clamp(58px, 7vw, 99px);
    }

    .uni-tel-time {
        font-size: clamp(14px, 1.6vw, 18px);
    }


}

/* ==========================================================================
   追従CTA
   MV下のCTAが見えている間とフッター到達後は隠す（制御はJS側）
   ========================================================================== */
.uni-fixed-cta {
    position: fixed;
    left: 0;
    bottom: 14px;
    /* 共通CSSの重なり順に合わせる。
       .modal-overlay は表示時に z-index:10 まで下がるため、
       それより小さくしないとモーダルの薄暗い膜より手前に出てしまう。
       右サイドの固定ナビ(.nav-fixed)が z-index:2 なので、それより下に置き、ナビを前面にする。 */
    z-index: 1;
    box-sizing: border-box;
    padding: 0 20px;
    width: 100%;
    pointer-events: none;
    opacity: 1;
    transition: opacity .3s ease-out, transform .3s ease-out;
}

.uni-fixed-cta[hidden] {
    display: block;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    visibility: hidden;
}

.uni-fixed-cta .uni-btn.uni-btn-apply {
    pointer-events: auto;
}

.uni-fixed-cta img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 767px) {
    .uni-fixed-cta {
        bottom: 14px;
        padding: 0 11px;
    }

    .uni-fixed-cta img {
        max-width: 380px;
        margin: 0 auto;
    }

    /* 固定ナビ（共通CSSで下から40px）が追従CTAに重なるので、常にCTAの上の位置に置く。
       CTAは下14px＋高さ最大約112px（幅380px×216/736）なので、余白を足して140px */
    .nav-fixed .nav-fixed-list.is-fixed {
        bottom: 140px;
    }

    /* フッター到達時は共通JSが .is-bottom（フッター直上に配置）へ切り替える。
       共通CSSの差（固定40px→直上22px）と同じ18px差にそろえ、切り替え時に飛ばないようにする */
    .nav-fixed .nav-fixed-list.is-bottom {
        bottom: 122px;
    }
}

/* --------------------------------------------------
   約款モーダル（個人情報の取り扱い／金銭消費貸借契約約款）
   共通CSSは .modal-inner が height:auto で中身なりに伸び、
   オーバーレイ側（.js-modal-content）をスクロールさせる作り。
   約款は縦に長く、読み終えた位置から閉じるボタンまで戻るのに
   大量のスクロールが必要だった。
   枠を画面内に収め、本文（.modal-content）だけをスクロールさせる。
   JS無効時は共通CSSどおりページ内に展開されるので対象外にする。
   -------------------------------------------------- */
[data-script-enabled="true"] .uni-modal-fixed > .modal-inner {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
    max-height: calc(100dvh - 200px);
}

/* 見出しは縮めない */
[data-script-enabled="true"] .uni-modal-fixed > .modal-inner > .modal-head {
    flex-shrink: 0;
}

/* 下部の「閉じる」も縮めない。共通CSSでは inline-flex だが
   flex の子になると幅いっぱいに伸びるので align-self で中央に戻す */
[data-script-enabled="true"] .uni-modal-fixed > .modal-inner > .modal-close {
    flex-shrink: 0;
    align-self: center;
}

/* 本文だけスクロールさせる。
   min-height:0 がないと flex の子は中身より小さくならず、スクロールしない */
[data-script-enabled="true"] .uni-modal-fixed > .modal-inner > .modal-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-width: 767px) {

    /* SPは共通CSSの上下100pxだと枠が狭くなりすぎるので詰める */
    [data-script-enabled="true"] .uni-modal-fixed > .modal-inner {
        margin: 40px auto;
        max-height: calc(100vh - 80px);
        max-height: calc(100dvh - 80px);
    }
}