/* ================================================================
   友だち紹介キャンペーン

   /referral/  紹介メッセージを作る（既存会員向け）   → .sg-referral (#rs)
   /invite/    紹介された側のLP                       → .sg-invite (#rf-lp)

   原本: public/04_テキスト素材/referral-share-page…html / referral-campaign-lp…html
   原本はWordPressの固定ページ本文に貼る前提で、自動整形を避けるため
   「空行を入れない・1行に詰める」という制約付きで書かれていた。
   こちらはテーマのCSSファイルなのでその制約は無い（読みやすく整形してある）。

   配色（バナー画像の「青空×ゴールド」に合わせた寒色系）
     ネイビー #0F2A4A ／ ゴールド #F7C600 ／ 淡い水色 #EDF4FB
     赤 #E63946 ／ リンクの青 #1660A8 ／ 補助文字 #5F6B7A ／ 罫線 #DCE7F2
   ================================================================ */

/* ----------------------------------------------------------------
   /referral/ 紹介メッセージを作る
   ---------------------------------------------------------------- */
.sg-referral,
.sg-referral * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.sg-referral {
    max-width: 420px;
    margin: 0 auto;
    padding: 22px 20px 40px;
    background: #fff;
    color: #1B2430;
    line-height: 1.7;
}
.sg-referral h2 {
    font-size: 19px;
    font-weight: 900;
    color: #0F2A4A;
    margin-bottom: 6px;
}
.sg-referral .rs-lead {
    font-size: 13.5px;
    color: #3A4450;
    margin-bottom: 24px;
}
.sg-referral .rs-loading,
.sg-referral .rs-error {
    font-size: 13.5px;
    color: #5A6472;
    text-align: center;
    padding: 32px 0;
    line-height: 1.9;
}
.sg-referral .rs-error { color: #B3202E; }

.sg-referral .rs-field {
    margin-bottom: 20px;
    position: relative;
}

/* 主な利用者が30〜50代のため、項目名と補足は小さくしすぎないこと */
.sg-referral label {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: #0F2A4A;
    margin-bottom: 7px;
}
.sg-referral .rs-hint {
    display: block;
    font-size: 12.5px;
    font-weight: 400;
    color: #5A6472;
    margin-top: 2px;
}

/* font-size を16pxにしているのは、これより小さいとiPhoneで入力時に画面が勝手に拡大されるため */
.sg-referral input,
.sg-referral textarea {
    display: block;
    width: 100%;
    border: 1px solid #B9C2CD;
    border-radius: 6px;
    padding: 12px;
    font-size: 16px;
    font-family: inherit;
    line-height: 1.7;
    background: #fff;
    color: #1B2430;
}
.sg-referral input:focus,
.sg-referral textarea:focus {
    outline: none;
    border-color: #0F2A4A;
    box-shadow: 0 0 0 3px rgba(15, 42, 74, .12);
}
.sg-referral textarea { height: 215px; }

/* 店舗の候補リスト。
   ブラウザ標準の datalist は iPhone で候補が見えにくく使いものにならなかったため自前で作っている */
.sg-referral .rs-sug {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    background: #fff;
    border: 1px solid #B9C2CD;
    border-radius: 6px;
    margin-top: 4px;
    max-height: 230px;
    overflow-y: auto;
    box-shadow: 0 6px 20px rgba(15, 42, 74, .16);
}
.sg-referral .rs-sug.rs-open { display: block; }
.sg-referral .rs-sug div {
    padding: 11px 13px;
    font-size: 14px;
    border-bottom: 1px solid #EDF1F5;
    cursor: pointer;
}
.sg-referral .rs-sug div:last-child { border-bottom: none; }
.sg-referral .rs-sug div:active { background: #EDF4FB; }
.sg-referral .rs-sug .rs-none {
    color: #5A6472;
    font-size: 12.5px;
    cursor: default;
}

.sg-referral .rs-prev {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid #E3E7EC;
}
.sg-referral .rs-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 16px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 900;
    font-family: inherit;
    text-decoration: none;
    margin-top: 12px;
    cursor: pointer;
    background: #06C755;   /* LINEグリーン */
    color: #fff;
}
.sg-referral .rs-btn.rs-off {
    background: #C8CFD8;
    color: #fff;
    pointer-events: none;
}
.sg-referral .rs-sub {
    background: #fff;
    color: #0F2A4A;
    border: 1px solid #B9C2CD;
    font-size: 14px;
    padding: 13px;
}
.sg-referral .rs-msg {
    font-size: 12.5px;
    font-weight: 700;
    color: #1B6B3A;
    text-align: center;
    margin-top: 12px;
    min-height: 20px;
}
.sg-referral .rs-warn { color: #B3202E; }

/* 注意書き。1つの段落に詰め込むと読み飛ばされるため、見出しを付けて箇条書きに分けている */
.sg-referral .rs-note {
    margin-top: 28px;
    background: #F4F6F9;
    border-radius: 6px;
    padding: 16px 18px;
}
.sg-referral .rs-note-t {
    font-size: 13.5px;
    font-weight: 900;
    color: #0F2A4A;
    margin-bottom: 10px;
}
.sg-referral .rs-note li {
    list-style: none;
    font-size: 12.5px;
    line-height: 1.85;
    color: #3A4450;
    padding-left: 15px;
    position: relative;
}
.sg-referral .rs-note li + li { margin-top: 10px; }
.sg-referral .rs-note li::before {
    content: "・";
    position: absolute;
    left: 0;
}
.sg-referral .rs-note b {
    font-weight: 700;
    color: #0F2A4A;
}

/* ?sgdebug=1 で開いたときだけ出る動作確認の表示 */
.sg-referral .rs-debug {
    margin-bottom: 18px;
    background: #FFF8E1;
    border: 1px solid #E6D9A8;
    border-radius: 6px;
    padding: 12px 14px;
    font-size: 11.5px;
    line-height: 1.8;
    color: #4A4030;
    word-break: break-all;
}
.sg-referral .rs-debug strong {
    display: block;
    font-size: 12px;
    margin-bottom: 6px;
    color: #0F2A4A;
}

.sg-referral .rs-count {
    margin-top: 18px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #1B6B3A;
}

/* ----------------------------------------------------------------
   /invite/ 紹介された側のLP
   ---------------------------------------------------------------- */
.sg-invite,
.sg-invite * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.sg-invite {
    max-width: 420px;
    margin: 0 auto;
    background: #EDF4FB;
    color: #0F2A4A;
    -webkit-font-smoothing: antialiased;
}

/* ファーストビュー＝バナー画像。
   imgタグの width/height 属性から高さを先に計算してくれるので、読み込み中に下がガタつかない。
   画像を差し替えたら width/height も直すこと */
.sg-invite .rf-fv {
    display: block;
    width: 100%;
    height: auto;
}

/* キャンペーン期間。画像の下端が空の水色で背景も淡い水色なので、ネイビーのベタで区切る */
.sg-invite .rf-period {
    background: #0F2A4A;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 11px 16px;
    line-height: 1.6;
}
.sg-invite .rf-period strong {
    color: #F7C600;
    font-size: 14px;
    margin-left: 8px;
}

/* CTAエリア。バナーで訴求は済んでいるので、説明文やバッジは挟まず最短でボタンに到達させる */
.sg-invite .rf-cta-area {
    background: #EDF4FB;
    padding: 16px 24px 18px;
    text-align: center;
}
.sg-invite .rf-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 16px;
    background: #E63946;
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: .04em;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .08s ease;
}
.sg-invite .rf-cta:active { transform: scale(.98); }
.sg-invite .rf-cta:focus-visible {
    outline: 3px solid #0F2A4A;
    outline-offset: 2px;
}
.sg-invite .rf-cta-sub {
    font-size: 11.5px;
    color: #5F6B7A;
    margin-top: 8px;
    line-height: 1.7;
}

/* 紹介が紐づいたときだけ出る一言 */
.sg-invite .rf-linked {
    margin: 0 16px;
    background: #E4F3EA;
    border: 1px solid #B7DEC7;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #1B6B3A;
    text-align: center;
    line-height: 1.7;
}

.sg-invite .rf-howto {
    margin: 6px 16px 0;
    background: #FFFFFF;
    border: 1px solid #DCE7F2;
    border-radius: 8px;
    padding: 20px 18px;
}
.sg-invite .rf-howto h2 {
    font-size: 14px;
    font-weight: 900;
    color: #0F2A4A;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.sg-invite .rf-howto h2::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #DCE7F2;
}
.sg-invite .rf-flow { display: grid; gap: 0; }
.sg-invite .rf-flow .rf-f {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 0;
}
.sg-invite .rf-flow .rf-f + .rf-f { border-top: 1px dashed #DCE7F2; }
.sg-invite .rf-flow .rf-num {
    font-size: 18px;
    font-weight: 700;
    color: #0F2A4A;
    background: #FFF3CC;
    border-radius: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sg-invite .rf-flow .rf-t {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    padding-top: 5px;
}
.sg-invite .rf-flow .rf-t small {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #5F6B7A;
    margin-top: 4px;
    line-height: 1.7;
}
.sg-invite .rf-flow .rf-t em {
    font-style: normal;
    color: #E63946;
}

.sg-invite .rf-rule {
    margin: 18px 16px 0;
    background: #FDECC0;
    border-radius: 8px;
    padding: 16px 18px;
}
.sg-invite .rf-rule h2 {
    font-size: 12.5px;
    font-weight: 900;
    color: #0F2A4A;
    margin-bottom: 8px;
}
.sg-invite .rf-rule ul { list-style: none; }
.sg-invite .rf-rule li {
    font-size: 11.5px;
    line-height: 1.8;
    color: #3A4450;
    padding-left: 14px;
    position: relative;
}
.sg-invite .rf-rule li::before {
    content: "・";
    position: absolute;
    left: 0;
}
.sg-invite .rf-rule li.rf-penalty {
    color: #E63946;
    font-weight: 700;
}

.sg-invite .rf-about-title {
    text-align: center;
    font-size: 13px;
    font-weight: 900;
    color: #0F2A4A;
    margin: 24px 24px 0;
    letter-spacing: .04em;
}
.sg-invite .rf-about {
    margin: 10px 16px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sg-invite .rf-about .rf-a {
    background: #FFFFFF;
    border: 1px solid #DCE7F2;
    border-radius: 8px;
    padding: 13px 10px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #0F2A4A;
    line-height: 1.5;
}
.sg-invite .rf-about .rf-a svg {
    display: block;
    width: 26px;
    height: 26px;
    margin: 0 auto 7px;
    color: #1660A8;
}
.sg-invite .rf-about .rf-a small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #5F6B7A;
    margin-top: 5px;
    line-height: 1.4;
}
.sg-invite .rf-about-note {
    text-align: center;
    font-size: 11px;
    color: #5F6B7A;
    margin-top: 10px;
    line-height: 1.7;
    padding: 0 24px;
}
.sg-invite .rf-about-note a {
    color: #1660A8;
    font-weight: 700;
}
.sg-invite .rf-footer {
    text-align: center;
    padding: 26px 24px 30px;
    font-size: 10.5px;
    color: #5F6B7A;
    line-height: 1.8;
}