@charset "UTF-8"; /* ========================================================= J-TRIP × あと払い（ペイディ）10% キャッシュバックキャンペーン LP paidy_campaign_lp.css — クラスprefix: paidy-camp- - スコープ：8 post ID × .paidy-camp-lp 35530（沖縄）／31265（北海道）／16808（関東）／16636（関西） 19138（九州）／16469（南西）／15696（中四国）／23984（総合TOP） - SP優先（375px / iPhone SE）／タブレット〜1000px ／ PC 1001px〜 - エリアカラーはで切替 - 共催色：Paidy ピンクはヘッダーロゴ周辺のみ。本文はエリアカラー。 ========================================================= */ @font-face{ font-family:'JTRIP-Light'; src:url('http://www.jtrip.co.jp/J-TRIP-Light.otf') format('opentype'); font-display:swap; } @font-face{ font-family:'JTRIP-Medium'; src:url('http://www.jtrip.co.jp/J-TRIP-Medium.otf') format('opentype'); font-display:swap; } .wrapper{ background-color:#fff; } /* ---------- スコープ前置きエイリアス ---------- */ .postid-35530 .paidy-camp-lp, .postid-31265 .paidy-camp-lp, .postid-16808 .paidy-camp-lp, .postid-16636 .paidy-camp-lp, .postid-19138 .paidy-camp-lp, .postid-16469 .paidy-camp-lp, .postid-15696 .paidy-camp-lp, .postid-23984 .paidy-camp-lp, .postid-35530 .paidy-camp-lp *, .postid-31265 .paidy-camp-lp *, .postid-16808 .paidy-camp-lp *, .postid-16636 .paidy-camp-lp *, .postid-19138 .paidy-camp-lp *, .postid-16469 .paidy-camp-lp *, .postid-15696 .paidy-camp-lp *, .postid-23984 .paidy-camp-lp * { box-sizing: border-box; } /* ---------- 1. ベース（5色トークン：エリア既定=総合TOP）---------- */ body { --pc-main: #D80C18; --pc-dark: #A80913; --pc-light: #ED9297; --pc-bg: #FBE7E8; --pc-bg2: #F6D6D9; --pc-border: #E66169; --pc-text: #111111; --pc-muted: #6B6B6B; --pc-soft: #FAF7F5; --pc-line: #E5E5E5; /* Paidy 共催色（ロゴ周辺のみ使用） */ --pc-paidy: #FF407D; --pc-mincho: "游明朝", "YuMincho", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳＰ明朝", "MS PMincho", serif; --pc-ui: "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", Arial, Helvetica, sans-serif; color: var(--pc-text); font-family: var(--pc-mincho); font-size: 15px; line-height: 1.8; background-color: #fff; overflow-x: hidden; word-break: normal; } /* ---------- 2. エリアテーマ（data-area で塗り替え）---------- */ [data-area="okinawa"] .paidy-camp-lp { --pc-main:#E62E8B; --pc-dark:#B3246C; --pc-light:#F4A1CB; --pc-bg:#FCEAF3; --pc-bg2:#F7D5E6; --pc-border:#EF77B4; } [data-area="hokkaido"] .paidy-camp-lp { --pc-main:#0081CC; --pc-dark:#00659F; --pc-light:#8CC6E8; --pc-bg:#E6F2FA; --pc-bg2:#CFE5F5; --pc-border:#59ADDE; } [data-area="kanto"] .paidy-camp-lp { --pc-main:#45B035; --pc-dark:#348628; --pc-light:#ABDBA4; --pc-bg:#ECF7EB; --pc-bg2:#D6EDD3; --pc-border:#86CC7C; } [data-area="kansai"] .paidy-camp-lp { --pc-main:#7E9802; --pc-dark:#5C7102; --pc-light:#C8DE5B; --pc-bg:#F4F8E0; --pc-bg2:#E7EFC0; --pc-border:#A8C13D; } [data-area="chushikoku"] .paidy-camp-lp { --pc-main:#9E9500; --pc-dark:#7F7800; --pc-light:#EBE68C; --pc-bg:#F9F7DC; --pc-bg2:#EFEBB7; --pc-border:#D2C940; } [data-area="kyushu"] .paidy-camp-lp { --pc-main:#F39800; --pc-dark:#C06A00; --pc-light:#FAD18C; --pc-bg:#FEF5E6; --pc-bg2:#FCE6C2; --pc-border:#F7BC59; } [data-area="nansei"] .paidy-camp-lp { --pc-main:#EA5541; --pc-dark:#B74233; --pc-light:#F6B2AA; --pc-bg:#FDEEEC; --pc-bg2:#FAD7D2; --pc-border:#F19084; } /* ---------- 3. 共通プリミティブ ---------- */ .paidy-camp-lp img { display:block; max-width:100%; height:auto; object-fit:cover; } .paidy-camp-lp a { color:inherit; text-decoration:none; } .paidy-camp-lp h1, .paidy-camp-lp h2, .paidy-camp-lp h3, .paidy-camp-lp h4, .paidy-camp-lp p, .paidy-camp-lp ul, .paidy-camp-lp ol, .paidy-camp-lp dl { margin:0; padding:0; } .paidy-camp-lp ul, .paidy-camp-lp ol { list-style:none; } .paidy-camp-lp .jFont { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; letter-spacing:0.04em; font-feature-settings:'palt'; } .paidy-camp-ui, .paidy-camp-ui * { font-family: var(--pc-ui); } .paidy-camp-lp .paidy-camp-wrap { width:100%; max-width:1120px; margin-left:auto; margin-right:auto; padding-left:16px; padding-right:16px; } /* ---------- 4. ファーストビュー（画像＋下部テキストブロック構成）---------- */ .paidy-camp-fv { position:relative; padding:0; margin:0; } .paidy-camp-fv__inner { max-width:1120px; margin:0 auto; padding:24px 16px 0; } .paidy-camp-fv__media { border-radius:24px; overflow:hidden; background:var(--pc-bg); margin-bottom:32px; } .paidy-camp-fv__media img { width:100%; height:auto; display:block;object-fit:cover; } .paidy-camp-fv__body { display:flex; flex-direction:column; gap:18px; padding:0 8px 16px; text-align:center; align-items:center; } .paidy-camp-fv__eyebrow { display:inline-flex; align-items:center; gap:10px; padding:8px 18px; background:var(--pc-bg); color:var(--pc-dark); border-radius:9999px; font-family:var(--pc-ui); font-size:13px; font-weight:700; letter-spacing:0.08em; } .paidy-camp-fv__eyebrow .dot { width:6px; height:6px; border-radius:50%; background:var(--pc-main); } .paidy-camp-fv__period { display:inline-flex; align-items:baseline; gap:10px; padding:8px 18px; border:1px solid var(--pc-border); border-radius:12px; background:#fff; } .paidy-camp-fv__period-label { font-family:var(--pc-ui); font-size:11px; letter-spacing:0.2em; color:var(--pc-muted); } .paidy-camp-fv__period-date { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; font-size:18px; color:var(--pc-text); letter-spacing:0.04em; } .paidy-camp-fv__title { font-family:var(--pc-mincho); font-weight:700; font-size:34px; line-height:1.5; color:var(--pc-text); text-wrap:pretty; max-width:780px; } .paidy-camp-fv__title .num { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; font-size:1.4em; color:var(--pc-main); letter-spacing:0; padding:0 .02em; } .paidy-camp-fv__title .strong { color:var(--pc-main); } .paidy-camp-fv__sub { font-family:var(--pc-mincho); font-size:15px; line-height:1.9; color:var(--pc-text); max-width:560px; } .paidy-camp-fv__cta { margin-top:8px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; } .paidy-camp-fv__micro { font-family:var(--pc-ui); font-size:12px; color:var(--pc-muted); letter-spacing:0.04em; } /* ---------- 6. ボタン ---------- */ .paidy-camp-lp .paidy-camp-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:56px; padding:14px 36px; border-radius:9999px; font-size:16px; font-weight:700; font-family:var(--pc-ui); letter-spacing:0.04em; text-align:center; border:1.5px solid var(--pc-main); white-space:normal; word-break:keep-all; transition:opacity .2s, background-color .2s; } .paidy-camp-lp .paidy-camp-btn:hover { opacity:0.88; } .paidy-camp-lp .paidy-camp-btn:active { transform:scale(0.98); opacity:0.92; } .paidy-camp-lp .paidy-camp-btn--primary { background:var(--pc-main); color:#fff; } .paidy-camp-lp .paidy-camp-btn--primary:hover { background:var(--pc-dark); opacity:1; } .paidy-camp-lp .paidy-camp-btn--ghost { background:#fff; color:var(--pc-dark); } .paidy-camp-lp .paidy-camp-btn--ghost:hover { background:var(--pc-bg); opacity:1; } .paidy-camp-lp .paidy-camp-btn--on-color { background:#fff; color:var(--pc-dark); border-color:#fff; } .paidy-camp-lp .paidy-camp-btn--on-color:hover { background:rgba(255,255,255,0.92); } .paidy-camp-lp .paidy-camp-btn__arrow { font-family:var(--pc-ui); font-weight:700; } /* ---------- 7. セクション共通 ---------- */ .paidy-camp-lp .paidy-camp-section { width:100%; max-width:1120px; margin:0 auto; padding:80px 16px; } .paidy-camp-lp .paidy-camp-section--soft { background:var(--pc-bg); max-width:none; } .paidy-camp-lp .paidy-camp-section--soft > .paidy-camp-section__inner { max-width:1120px; margin:0 auto; } .paidy-camp-lp .paidy-camp-section-heading { text-align:center; margin-bottom:48px; } .paidy-camp-lp .paidy-camp-section-heading__sub { color:var(--pc-main); font-size:13px; margin-bottom:14px; letter-spacing:0.24em; } .paidy-camp-lp .paidy-camp-section-heading__title { color:var(--pc-text); font-size:30px; line-height:1.5; font-weight:700; text-wrap:pretty; font-family:var(--pc-mincho); } .paidy-camp-lp .paidy-camp-section-heading__title .num { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; color:var(--pc-main); padding:0 .04em; } .paidy-camp-lp .paidy-camp-section-heading__lead { font-size:15px; line-height:1.95; margin:16px auto 0; max-width:680px; text-wrap:pretty; } /* ---------- 8. 概要 3 カード ---------- */ .paidy-camp-lp .paidy-camp-points { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; } .paidy-camp-lp .paidy-camp-point { background:#fff; border-radius:24px; padding:40px 28px 36px; box-shadow:0 8px 24px rgba(0,0,0,0.05); border:1px solid var(--pc-line); display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; } .paidy-camp-lp .paidy-camp-point__label { display:inline-block; padding:6px 18px; border-radius:9999px; background:var(--pc-bg); color:var(--pc-dark); font-family:var(--pc-ui); font-size:12px; font-weight:700; letter-spacing:0.16em; } .paidy-camp-lp .paidy-camp-point__big { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; color:var(--pc-main); font-size:62px; line-height:1; letter-spacing:0; display:flex; align-items:baseline; justify-content:center; gap:4px; } .paidy-camp-lp .paidy-camp-point__big .unit { font-size:28px; } .paidy-camp-lp .paidy-camp-point__big .yen { font-size:22px; font-family:var(--pc-mincho); color:var(--pc-text); } .paidy-camp-lp .paidy-camp-point__title { font-family:var(--pc-mincho); font-size:18px; font-weight:700; color:var(--pc-text); line-height:1.6; } .paidy-camp-lp .paidy-camp-point__note { font-family:var(--pc-ui); font-size:12px; color:var(--pc-muted); line-height:1.7; } .paidy-camp-lp .paidy-camp-point__date { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; color:var(--pc-main); font-size:30px; line-height:1.2; letter-spacing:0.02em; } .paidy-camp-lp .paidy-camp-point__date small { font-size:14px; color:var(--pc-text); font-family:var(--pc-mincho); margin-left:4px; } /* ---------- 9. 3 ステップ ---------- */ .paidy-camp-lp .paidy-camp-steps { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; position:relative; } .paidy-camp-lp .paidy-camp-step { background:#fff; border-radius:24px; border:1px solid var(--pc-line); padding:36px 28px 32px; display:flex; flex-direction:column; gap:14px; position:relative; } .paidy-camp-lp .paidy-camp-step__no { display:flex; align-items:baseline; gap:8px; color:var(--pc-main); } .paidy-camp-lp .paidy-camp-step__no-cap { font-family:var(--pc-ui); font-size:12px; letter-spacing:0.2em; font-weight:700; } .paidy-camp-lp .paidy-camp-step__no-num { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; font-size:54px; line-height:1; letter-spacing:0; } .paidy-camp-lp .paidy-camp-step__line { height:1px; background:var(--pc-bg2); margin:2px 0 8px; } .paidy-camp-lp .paidy-camp-step__title { font-family:var(--pc-mincho); font-size:19px; font-weight:700; color:var(--pc-text); line-height:1.55; } .paidy-camp-lp .paidy-camp-step__text { font-family:var(--pc-mincho); font-size:14px; line-height:1.85; color:var(--pc-text); } .paidy-camp-lp .paidy-camp-step__tag { display:inline-block; align-self:flex-start; margin-top:auto; padding:6px 12px; border-radius:6px; background:var(--pc-bg); color:var(--pc-dark); font-family:var(--pc-ui); font-size:11px; font-weight:700; letter-spacing:0.08em; } /* ---------- 10. ペイディとは ---------- */ .paidy-camp-lp .paidy-camp-about { background:var(--pc-bg); border-radius:24px; padding:48px 44px; display:grid; grid-template-columns: 1.2fr 1fr; gap:36px; align-items:center; } .paidy-camp-lp .paidy-camp-about__sub { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; color:var(--pc-main); font-size:13px; letter-spacing:0.24em; margin-bottom:10px; } .paidy-camp-lp .paidy-camp-about__title { font-family:var(--pc-mincho); font-size:26px; font-weight:700; color:var(--pc-text); line-height:1.55; margin-bottom:16px; } .paidy-camp-lp .paidy-camp-about__text { font-family:var(--pc-mincho); font-size:15px; line-height:1.95; color:var(--pc-text); margin-bottom:20px; } .paidy-camp-lp .paidy-camp-about__link { display:inline-flex; align-items:center; gap:8px; font-family:var(--pc-ui); font-size:14px; font-weight:700; color:var(--pc-main); text-decoration:underline; text-underline-offset:4px; } .paidy-camp-lp .paidy-camp-about__visual { background:#fff; border-radius:20px; padding:32px 28px; display:flex; flex-direction:column; gap:14px; border:1px solid var(--pc-line); } .paidy-camp-lp .paidy-camp-about__brand { display:flex; align-items:center; gap:10px; font-family:var(--pc-ui); font-weight:700; color:var(--pc-paidy); font-size:18px; letter-spacing:0.04em; } .paidy-camp-lp .paidy-camp-about__brand .mark { width:10px; height:10px; border-radius:50%; background:var(--pc-paidy); } .paidy-camp-lp .paidy-camp-about__list { display:flex; flex-direction:column; gap:8px; font-family:var(--pc-mincho); font-size:14px; line-height:1.7; color:var(--pc-text); } .paidy-camp-lp .paidy-camp-about__list li { position:relative; padding-left:18px; } .paidy-camp-lp .paidy-camp-about__list li::before { content:""; position:absolute; left:0; top:.7em; width:8px; height:1px; background:var(--pc-main); } /* ---------- 11. リピート CTA（フルワイド帯）---------- */ .paidy-camp-lp .paidy-camp-repeat { background:var(--pc-main); color:#fff; } .paidy-camp-lp .paidy-camp-repeat__inner { max-width:1120px; margin:0 auto; padding:72px 16px; text-align:center; display:flex; flex-direction:column; gap:24px; align-items:center; } .paidy-camp-lp .paidy-camp-repeat__sub { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; font-size:13px; letter-spacing:0.28em; opacity:0.92; } .paidy-camp-lp .paidy-camp-repeat__title { font-family:var(--pc-mincho); font-size:34px; font-weight:700; line-height:1.5; text-wrap:pretty; } .paidy-camp-lp .paidy-camp-repeat__text { font-family:var(--pc-mincho); font-size:15px; line-height:1.9; max-width:560px; opacity:0.96; } .paidy-camp-lp .paidy-camp-repeat__badge { display:inline-flex; align-items:center; gap:10px; padding:10px 22px; border-radius:9999px; background:rgba(255,255,255,0.16); border:1.5px solid rgba(255,255,255,0.55); color:#fff; font-family:var(--pc-ui); font-size:13px; font-weight:700; letter-spacing:0.04em; backdrop-filter:blur(2px); } .paidy-camp-lp .paidy-camp-repeat__badge .check { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#fff; color:var(--pc-main); font-weight:900; font-size:13px; line-height:1; } .paidy-camp-lp .paidy-camp-repeat__hint { font-family:var(--pc-ui); font-size:12.5px; color:rgba(255,255,255,0.92); letter-spacing:0.02em; margin-top:-4px; } /* ---------- 12. 注意事項 ---------- */ .paidy-camp-lp .paidy-camp-notes { background:var(--pc-soft); } .paidy-camp-lp .paidy-camp-notes__inner { max-width:1120px; margin:0 auto; padding:64px 16px; } .paidy-camp-lp .paidy-camp-notes__title { font-family:var(--pc-mincho); font-size:20px; font-weight:700; color:var(--pc-text); margin-bottom:24px; text-align:center; } .paidy-camp-lp .paidy-camp-notes__title small { display:block; font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; font-size:11px; color:var(--pc-main); letter-spacing:0.24em; margin-bottom:8px; } .paidy-camp-lp .paidy-camp-notes__list { max-width:840px; margin:0 auto; background:#fff; border:1px solid var(--pc-line); border-radius:16px; padding:28px 28px 28px 56px; display:flex; flex-direction:column; gap:10px; font-family:var(--pc-ui); font-size:13px; line-height:1.8; color:var(--pc-text); counter-reset: pc-note; list-style:decimal; } .paidy-camp-lp .paidy-camp-notes__list li { padding-left:4px; } .paidy-camp-lp .paidy-camp-notes__list li::marker { font-family:'JTRIP-Medium','JTRIP-Light',Georgia,serif; color:var(--pc-main); font-weight:700; } .paidy-camp-lp .paidy-camp-notes__list a { color:var(--pc-main); text-decoration:underline; } .paidy-camp-lp .paidy-camp-notes__sponsor { margin-top:20px; text-align:center; font-family:var(--pc-ui); font-size:12px; color:var(--pc-muted); } /* ---------- 13. レスポンシブ（タブレット / SP）---------- */ @media screen and (max-width: 1000px) { .paidy-camp-fv__title { font-size:28px; } .paidy-camp-lp .paidy-camp-points { grid-template-columns:repeat(3, 1fr); gap:16px; } .paidy-camp-lp .paidy-camp-point__big { font-size:52px; } .paidy-camp-lp .paidy-camp-steps { grid-template-columns:1fr; } .paidy-camp-lp .paidy-camp-about { grid-template-columns:1fr; padding:36px 28px; gap:24px; } } @media screen and (max-width: 767px) { .paidy-camp-lp { font-size:14px; } .paidy-camp-lp .paidy-camp-fv__inner { padding:12px 12px 0; } .paidy-camp-fv__media { border-radius:16px; margin-bottom:24px; } .paidy-camp-fv__body { padding:0 4px 8px; gap:14px; } .paidy-camp-fv__eyebrow { font-size:11px; padding:6px 14px; } .paidy-camp-fv__title { font-size:22px; line-height:1.55; } .paidy-camp-fv__title .num { font-size:1.35em; } .paidy-camp-fv__sub { font-size:14px; } .paidy-camp-fv__period { padding:6px 14px; } .paidy-camp-fv__period-date { font-size:15px; } .paidy-camp-fv__cta { flex-direction:column; gap:10px; width:100%; } .paidy-camp-lp .paidy-camp-btn { width:100%; min-height:52px; padding:12px 24px; font-size:15px; } .paidy-camp-fv__micro { font-size:11px; } .paidy-camp-lp .paidy-camp-section { padding:56px 16px; } .paidy-camp-lp .paidy-camp-section-heading { margin-bottom:32px; } .paidy-camp-lp .paidy-camp-section-heading__title { font-size:22px; } .paidy-camp-lp .paidy-camp-section-heading__lead { font-size:14px; } .paidy-camp-lp .paidy-camp-points { grid-template-columns:1fr; gap:14px; } .paidy-camp-lp .paidy-camp-point { padding:32px 22px 28px; } .paidy-camp-lp .paidy-camp-point__big { font-size:54px; } .paidy-camp-lp .paidy-camp-point__date { font-size:26px; } .paidy-camp-lp .paidy-camp-step { padding:28px 22px; } .paidy-camp-lp .paidy-camp-step__no-num { font-size:44px; } .paidy-camp-lp .paidy-camp-step__title { font-size:17px; } .paidy-camp-lp .paidy-camp-about { padding:32px 22px; gap:20px; } .paidy-camp-lp .paidy-camp-about__title { font-size:21px; } .paidy-camp-lp .paidy-camp-about__visual { padding:24px 20px; } .paidy-camp-lp .paidy-camp-repeat__inner { padding:56px 16px; } .paidy-camp-lp .paidy-camp-repeat__title { font-size:24px; } .paidy-camp-lp .paidy-camp-repeat__text { font-size:14px; } .paidy-camp-lp .paidy-camp-repeat__badge { font-size:12px; padding:8px 14px; gap:8px; line-height:1.5; text-align:left; } .paidy-camp-lp .paidy-camp-repeat__badge .check { width:20px; height:20px; flex-shrink:0; } .paidy-camp-lp .paidy-camp-repeat__hint { font-size:11.5px; } .paidy-camp-lp .paidy-camp-notes__inner { padding:48px 16px; } .paidy-camp-lp .paidy-camp-notes__list { padding:24px 20px 24px 44px; font-size:12.5px; } }