/**
 * トップページ（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; }
/* ヒーロー右下にあったマスコット透かし(.rlp-bigr)はCTAと重なって見づらいため撤去（2026-08-13）。
   クロージング青カードの透かし(.rlp-last-in::after)は残している。mascot-white.png の作り方はそちらのコメント参照 */

/* ===== 機能を流す帯 ===== */
.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);
}
/* 本物のワークスペースのスクショ（Retina 2x・2560x1396）。枠(.rlp-app)は角丸と影だけ・偽UIは描かない */
.rlp-app-shot { display: block; width: 100%; height: auto; }

/* ===== 機能の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-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; }
}