/**
 * トップページ（LP）専用スタイル。
 *
 * lp.php はテーマのマークアップを使わない自己完結HTMLで、テーマCSSは
 * repoton_dequeue_foreign_styles() で断っている。ただし管理バー（admin-bar）は
 * 管理者閲覧時に残すため、リセットは .rlp の内側だけに閉じてある。
 * 変数も :root ではなく .rlp スコープに置き、他画面へ漏らさない。
 */

body.rlp-body { margin: 0; background: #1089EF; }

.rlp {
    --rlp-blue: #1089EF;
    --rlp-deep: #0A6BC2;
    --rlp-ink: #0B1B2B;
    --rlp-paper: #F4F8FC;
    --rlp-sub: #5D6B79;
    --rlp-line: #E2E8F0;
    --rlp-pale: #EAF4FE;

    font-family: 'Noto Sans JP', 'Inter', sans-serif;
    color: #fff;
    background: var(--rlp-blue);
    line-height: 1.8;
    font-feature-settings: "palt";
    overflow-x: clip;
}
.rlp, .rlp *, .rlp *::before, .rlp *::after { margin: 0; padding: 0; box-sizing: border-box; }
.rlp img { max-width: 100%; height: auto; }

/* ヘッダーは assets/header.css（templates/parts/header.php）に移した。ヘルプと共有している */

/* ===== ヒーロー ===== */
.rlp-hero { padding: 8vh max(28px, 5vw) 12vh; position: relative; overflow: hidden; }
.rlp-hero h1 {
    font-size: clamp(3rem, 10.5vw, 8.2rem);
    font-weight: 900; line-height: 1.22; letter-spacing: 0.01em;
}
.rlp-out { color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,0.85); }
.rlp-hero-row {
    margin-top: 6vh;
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 30px; flex-wrap: wrap;
}
.rlp-hero p { font-size: clamp(0.95rem, 1.8vw, 1.15rem); font-weight: 700; max-width: 34em; }
.rlp-cta {
    display: inline-flex; align-items: center; gap: 14px;
    text-decoration: none; font-weight: 900; font-size: 1.1rem;
    color: var(--rlp-blue); background: #fff;
    border-radius: 999px; padding: 18px 40px;
    transition: gap 0.2s;
}
.rlp-cta:hover { gap: 22px; }
.rlp-cta svg { width: 20px; height: 20px; }
/**
 * ヒーロー右下の透かし。手描きマスコットの白抜き版（mascot-white.png）を薄く敷く。
 * 元の mascot.png は背景が不透明な白なので、青地にそのまま置くと白い四角になる。
 * 明度からアルファを起こした白抜きPNGを別アセットとして持たせている。
 * マスコットの絵を差し替えるときは mascot-white.png も作り直すこと。
 */
.rlp-bigr {
    position: absolute; right: 1vw; bottom: -4vh;
    width: clamp(200px, 26vw, 400px); aspect-ratio: 1 / 1;
    background: url(mascot-white.png) right bottom / contain no-repeat;
    opacity: 0.14;
    pointer-events: none; user-select: none;
}

/* ===== 機能を流す帯 ===== */
.rlp-tick {
    background: var(--rlp-deep);
    border-top: 1px solid rgba(255,255,255,0.25);
    padding: 15px 0; overflow: hidden;
}
.rlp-tick-track { display: flex; width: max-content; animation: rlp-slide 26s linear infinite; }
.rlp-tick span {
    font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,0.9);
    padding: 0 30px; white-space: nowrap; letter-spacing: 0.05em;
}
.rlp-tick span:nth-child(2n) { color: rgba(255,255,255,0.45); }
@keyframes rlp-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== 実際の画面 ===== */
.rlp-shot { background: var(--rlp-paper); color: var(--rlp-ink); padding: 100px max(28px, 5vw) 30px; }
.rlp-shot-in { max-width: 1000px; margin: 0 auto; }
.rlp-shot h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); font-weight: 900; line-height: 1.5; margin-bottom: 50px; }
.rlp-shot h2 b { color: var(--rlp-blue); }
.rlp-app {
    background: #fff; border: 1px solid var(--rlp-line); border-radius: 20px; overflow: hidden;
    box-shadow: 0 40px 90px -30px rgba(11,27,43,0.35);
}
.rlp-app-top {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px; border-bottom: 1px solid var(--rlp-line);
    font-size: 0.85rem; font-weight: 700;
}
.rlp-app-top img { width: 22px; height: 22px; border-radius: 6px; }
.rlp-pill {
    margin-left: auto; font-size: 0.68rem; font-weight: 700;
    color: var(--rlp-blue); background: var(--rlp-pale);
    border-radius: 999px; padding: 3px 12px;
}
.rlp-app-body { display: flex; min-height: 360px; }
.rlp-app-nav {
    width: 200px; flex-shrink: 0;
    border-right: 1px solid var(--rlp-line); padding: 16px 12px;
    font-size: 0.74rem; font-weight: 700; color: #7A8B99;
}
.rlp-nav-h { font-size: 0.64rem; letter-spacing: 0.08em; color: #A5B4C0; padding: 8px 12px 4px; }
.rlp-nav-i { padding: 8px 12px; border-radius: 9px; margin-bottom: 2px; }
.rlp-nav-i.on { background: var(--rlp-pale); color: var(--rlp-blue); }
.rlp-app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rlp-app-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
    padding: 14px 18px; border-bottom: 1px solid var(--rlp-line);
}
.rlp-cell { border-radius: 8px; background: #F2F6FA; height: 38px; }
.rlp-cell.f, .rlp-cell.g { background: var(--rlp-pale); position: relative; }
.rlp-cell.f::after { content: ""; position: absolute; inset: 6px 8px; border-radius: 5px; background: rgba(16,137,239,0.4); }
.rlp-cell.g::after { content: ""; position: absolute; inset: 6px 8px; border-radius: 5px; background: rgba(16,137,239,0.15); }
.rlp-app-chat { flex: 1; padding: 20px; display: flex; flex-direction: column; gap: 13px; }
.rlp-bub { border-radius: 12px; padding: 11px 16px; font-size: 0.8rem; line-height: 1.8; max-width: 78%; }
.rlp-bub.u { align-self: flex-end; background: var(--rlp-blue); color: #fff; font-weight: 700; }
.rlp-bub.a { align-self: flex-start; background: #F2F6FA; }
.rlp-src {
    display: inline-block; margin-top: 7px;
    font-size: 0.64rem; font-weight: 700; color: var(--rlp-blue);
    background: var(--rlp-pale); border-radius: 999px; padding: 2px 11px;
}
.rlp-app-in { margin: 0 20px 18px; height: 46px; border: 1.5px solid var(--rlp-line); border-radius: 12px; }

/* ===== 機能の3行 ===== */
.rlp-panel { background: var(--rlp-paper); color: var(--rlp-ink); padding: 100px max(28px, 5vw) 110px; }
.rlp-panel-in { max-width: 1100px; margin: 0 auto; }
.rlp-panel h2 { font-size: clamp(1.8rem, 4.4vw, 3rem); font-weight: 900; line-height: 1.5; margin-bottom: 60px; }
.rlp-panel h2 b { color: var(--rlp-blue); }
.rlp-row {
    display: grid; grid-template-columns: 90px 1fr auto; gap: 24px; align-items: center;
    padding: 30px 6px; border-top: 2px solid var(--rlp-ink);
    transition: background 0.2s, padding-left 0.2s;
}
.rlp-row:last-child { border-bottom: 2px solid var(--rlp-ink); }
.rlp-row:hover { background: rgba(16,137,239,0.06); padding-left: 18px; }
.rlp-no { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--rlp-blue); }
.rlp-tt { font-size: clamp(1.1rem, 2.6vw, 1.6rem); font-weight: 900; }
.rlp-dd { font-size: 0.85rem; font-weight: 500; color: var(--rlp-sub); max-width: 340px; text-align: right; }

/* ===== クロージング ===== */
.rlp-last { background: var(--rlp-paper); padding: 0 max(28px, 5vw) 120px; }
.rlp-last-in {
    max-width: 1100px; margin: 0 auto;
    background: var(--rlp-blue); border-radius: 28px; padding: 80px 40px;
    text-align: center; position: relative; overflow: hidden;
}
/* クロージングの青いカードの右下にも同じ透かしを置く */
.rlp-last-in::after {
    content: ""; position: absolute; right: 6px; bottom: -14px;
    width: clamp(120px, 15vw, 200px); aspect-ratio: 1 / 1;
    background: url(mascot-white.png) right bottom / contain no-repeat;
    opacity: 0.18; pointer-events: none;
}
.rlp-last h2 { position: relative; color: #fff; font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 900; margin-bottom: 30px; }
.rlp-last-cta {
    position: relative;
    display: inline-block; text-decoration: none; font-weight: 900; font-size: 1.05rem;
    color: var(--rlp-blue); background: #fff; border-radius: 999px; padding: 17px 46px;
}
.rlp-last small { position: relative; display: block; margin-top: 16px; font-size: 0.78rem; color: rgba(255,255,255,0.75); }

/* ===== フッター ===== */
.rlp-foot {
    background: var(--rlp-paper); color: var(--rlp-sub);
    padding: 0 max(28px, 5vw) 30px;
    display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between;
    font-size: 0.74rem;
}
.rlp-foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.rlp-foot a { color: var(--rlp-sub); text-decoration: none; }
.rlp-foot a:hover { color: var(--rlp-ink); }

@media (max-width: 700px) {
    .rlp-row { grid-template-columns: 50px 1fr; }
    .rlp-dd { grid-column: 2; text-align: left; max-width: none; }
    .rlp-app-nav { display: none; }
    /* 画面が狭いと透かしの主張が強くなるので、小さく薄くする */
    .rlp-bigr { width: 150px; right: -8px; bottom: -2vh; opacity: 0.11; }
    .rlp-last-in::after { width: 104px; opacity: 0.15; }
}

/**
 * テーマ側のJSが body 直下に注入する要素の保険。
 * CSSをdequeueしているため素のdivが居座り、フッター下に空白の帯として出てしまう。
 * スクリプト自体もLPでは外しているが、将来別のJSが増えても崩れないようにしておく。
 */
body.rlp-body > .baguetteBox-overlay,
body.rlp-body > #baguetteBox-overlay { display: none; }

/* 動きを減らす設定の利用者には帯を止める */
@media (prefers-reduced-motion: reduce) {
    .rlp-tick-track { animation: none; }
}