/* ========================================================== Rinto — 共通スタイルシート 配置先: wp-content/themes/swell-child/assets/css/rinto.css 読み込み: 各PHPテンプレートの 内に以下を追加 ========================================================== */ /* ────────────────────────────────────────────── CSS変数 ────────────────────────────────────────────── */ :root { --bg: #f5f5f5; --white: #ffffff; --text: #242422; --muted: #707070; --footer-heading: #a4a4a4; --border: #e6e6e6; --dark: #1a1a1a; --dark2: #1f1f1f; --accent: #242422; --badge-bg: #ebebeb; --serif: 'Noto Serif JP', serif; --sans: 'Noto Sans JP', sans-serif; } /* ────────────────────────────────────────────── リセット・ベース ────────────────────────────────────────────── */ .rinto-page *, .rinto-page *::before, .rinto-page *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body.rinto-page { font-family: var(--sans); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.8; -webkit-font-smoothing: antialiased; } .rinto-page img { max-width: 100%; height: auto; display: block; } .rinto-page a { color: inherit; } /* SWELLのデフォルト要素を非表示 */ body.rinto-page .site-header, body.rinto-page .site-footer, body.rinto-page #page, body.rinto-page #content, body.rinto-page .site-main { display: none !important; } /* ────────────────────────────────────────────── ヘッダー ────────────────────────────────────────────── */ .rp-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: var(--bg); border-bottom: 1px solid var(--border); } .rp-logo { font-family: var(--sans); font-size: 18px; font-weight: 500; color: var(--text); text-decoration: none; letter-spacing: 0.06em; } .rp-logo img, .logo img { height: 20px !important; width: auto !important; display: block !important; max-width: none !important; } /* ────────────────────────────────────────────── グローバルナビ（PC） ────────────────────────────────────────────── */ .rp-nav { display: flex; align-items: center; gap: 28px; } .rp-nav a { font-size: 13px; color: var(--text); text-decoration: none; letter-spacing: 0.02em; transition: opacity .2s; } .rp-nav a:hover { opacity: .5; } /* ドロップダウン */ .rp-nav-item { position: relative; } .rp-nav-item > button { font-size: 13px; color: var(--text); letter-spacing: 0.02em; transition: opacity .2s; background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; font-family: inherit; } .rp-nav-item > button:hover { opacity: .5; } .rp-nav-chevron { font-size: 9px; transition: transform .25s; display: inline-block; } .rp-nav-item:hover .rp-nav-chevron { transform: rotate(180deg); } .rp-nav-item::after { content: ''; position: absolute; top: 100%; left: -10px; right: -10px; height: 20px; } .rp-nav-dropdown { display: none; position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); background: var(--bg); border: 1px solid var(--border); min-width: 210px; z-index: 1001; box-shadow: 0 4px 16px rgba(0,0,0,.08); } .rp-nav-item:hover .rp-nav-dropdown { display: block; } .rp-nav-dropdown a { display: block; padding: 11px 18px; font-size: 12px; color: var(--text) !important; text-decoration: none; border-bottom: 1px solid var(--border); transition: background .15s; opacity: 1 !important; letter-spacing: 0.02em; } .rp-nav-dropdown a:last-child { border-bottom: none; } .rp-nav-dropdown a:hover { background: var(--border); } /* ────────────────────────────────────────────── ハンバーガー・モバイルナビ ────────────────────────────────────────────── */ .rp-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } .rp-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: all .3s; } .rp-mobile-nav { display: none; position: fixed; inset: 60px 0 0 0; background: var(--bg); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: 28px; } .rp-mobile-nav.open { display: flex; } .rp-mobile-nav a { font-size: 18px; color: var(--text); text-decoration: none; letter-spacing: 0.04em; } .rp-mobile-accordion { display: flex; flex-direction: column; align-items: center; } .rp-mobile-accordion-btn { font-size: 18px; color: var(--text); letter-spacing: 0.04em; background: none; border: none; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 8px; } .rp-mobile-accordion.open .rp-mobile-accordion-btn .rp-nav-chevron { transform: rotate(180deg); } .rp-mobile-sub-nav { display: none; flex-direction: column; align-items: center; gap: 16px; padding-top: 16px; } .rp-mobile-accordion.open .rp-mobile-sub-nav { display: flex; } .rp-mobile-sub-nav a { font-size: 14px; color: var(--muted); text-decoration: none; letter-spacing: 0.03em; } /* ────────────────────────────────────────────── ボタン（共通） ────────────────────────────────────────────── */ /* ヘッダー内LINEボタン */ .rp-btn-line { display: inline-flex; align-items: center; gap: 6px; background: #06C755; color: #fff !important; font-size: 12px; font-weight: 500; padding: 8px 16px; text-decoration: none; border-radius: 3px; letter-spacing: 0.02em; transition: opacity .2s; } .rp-btn-line:hover { opacity: .85; color: #fff !important; } /* ヘッダー内お問い合わせボタン */ .rp-btn-contact { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--text); color: var(--text); font-size: 12px; font-weight: 500; padding: 8px 16px; text-decoration: none; letter-spacing: 0.02em; transition: opacity .2s; } .rp-btn-contact:hover { opacity: .5; } /* CTAセクション用ボタン */ .rp-btn-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--dark); color: #fff !important; font-size: 13px; padding: 14px 28px; text-decoration: none; letter-spacing: 0.04em; transition: opacity .2s; } .rp-btn-primary:hover { opacity: .8; color: #fff !important; } .rp-btn-secondary { display: inline-flex; align-items: center; gap: 10px; background: #06C755; color: #fff !important; font-size: 13px; padding: 14px 28px; text-decoration: none; border-radius: 3px; letter-spacing: 0.04em; transition: opacity .2s; } .rp-btn-secondary:hover { opacity: .85; color: #fff !important; } .rp-btn-cta-line { display: inline-flex; align-items: center; gap: 8px; background: #06C755; color: #fff !important; font-size: 13px; font-weight: 500; padding: 14px 32px; text-decoration: none; border-radius: 3px; letter-spacing: 0.02em; transition: opacity .2s; } .rp-btn-cta-line:hover { opacity: .85; } .rp-btn-cta-contact { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--text); color: var(--text) !important; font-size: 13px; font-weight: 500; padding: 14px 32px; text-decoration: none; letter-spacing: 0.02em; transition: opacity .2s; } .rp-btn-cta-contact:hover { opacity: .5; } /* ────────────────────────────────────────────── 共通レイアウト ────────────────────────────────────────────── */ .rp-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; } .rp-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); letter-spacing: 0.12em; margin-bottom: 20px; } .rp-label::before { content: '/'; opacity: .6; } .rp-heading { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 38px); font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; } .rp-section { padding: 100px 0; border-top: 1px solid var(--border); } .rp-section-lead { font-size: 13px; color: var(--muted); margin-top: 12px; max-width: 560px; line-height: 2; } .rp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .65s ease, transform .65s ease; } .rp-reveal.visible { opacity: 1; transform: none; } .rp-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 36px; list-style: none; } /* リンクと区切り文字は折り返さない・縮まない */ .rp-breadcrumb a, .rp-breadcrumb span:not(:last-child) { white-space: nowrap; flex-shrink: 0; } /* 最後の要素（タイトル）は折り返しOK */ .rp-breadcrumb span:last-child { flex-shrink: 1; } .rp-breadcrumb a { color: var(--muted); text-decoration: none; } .rp-breadcrumb a:hover { color: var(--text); } /* ────────────────────────────────────────────── ヒーロー（共通ベース） ────────────────────────────────────────────── */ .rp-hero { padding: 80px 0 0; } .rp-hero-en { font-family: var(--serif); font-size: 12px; letter-spacing: 0.16em; color: var(--accent); margin-bottom: 16px; } .rp-hero-en::before { content: '/'; opacity: .6; margin-right: 7px; } .rp-hero-title { font-family: var(--serif); font-size: clamp(28px, 4vw, 48px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 12px; } .rp-hero-tagline { font-family: var(--serif); font-size: clamp(16px, 2vw, 22px); font-weight: 700; color: var(--accent); margin-bottom: 20px; line-height: 1.5; } .rp-hero-desc { font-size: 14px; color: var(--muted); line-height: 2; max-width: 560px; margin-bottom: 32px; } .rp-hero-campaign { display: inline-block; background: var(--dark); color: #fff; font-size: 13px; font-weight: 500; padding: 12px 24px; letter-spacing: 0.04em; line-height: 1.6; margin-bottom: 40px; } .rp-hero-campaign strong { font-size: 16px; display: block; margin-top: 4px; } .rp-hero-img { margin-top: 48px; border: 1px solid var(--border); } /* ────────────────────────────────────────────── ケーススタディ（実績） ────────────────────────────────────────────── */ .rp-case-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); } .rp-case-card { background: var(--white); } .rp-case-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .rp-case-body { padding: 24px 20px; } .rp-case-type { font-size: 11px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 8px; } .rp-case-result { font-size: 14px; font-weight: 500; line-height: 1.6; } /* ────────────────────────────────────────────── 理由（Reason） ────────────────────────────────────────────── */ .rp-reason-list { margin-top: 56px; border-top: 1px solid var(--border); } .rp-reason-row { display: grid; grid-template-columns: 200px 1fr; gap: 48px; padding: 40px 0; border-bottom: 1px solid var(--border); align-items: start; } .rp-reason-tag { font-size: 11px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 10px; } .rp-reason-name { font-size: 15px; font-weight: 500; line-height: 1.6; } .rp-reason-body { font-size: 13px; color: var(--muted); line-height: 2; } .rp-reason-stat { font-family: var(--serif); font-size: clamp(36px, 5vw, 60px); font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 8px; letter-spacing: -0.03em; } .rp-reason-stat-label { font-size: 12px; color: var(--muted); } /* ────────────────────────────────────────────── サービス内容（Feature） ────────────────────────────────────────────── */ .rp-feature-list { margin-top: 56px; border-top: 1px solid var(--border); } .rp-feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding: 60px 0; border-bottom: 1px solid var(--border); align-items: center; } .rp-feature-row.reverse { direction: rtl; } .rp-feature-row.reverse > * { direction: ltr; } .rp-feature-num { font-size: 11px; color: var(--accent); letter-spacing: 0.12em; margin-bottom: 12px; font-family: var(--serif); } .rp-feature-name { font-size: clamp(16px, 2vw, 20px); font-weight: 700; line-height: 1.4; margin-bottom: 16px; font-family: var(--serif); } .rp-feature-body { font-size: 13px; color: var(--muted); line-height: 2; } .rp-feature-img img { width: 100%; border: 1px solid var(--border); } /* ────────────────────────────────────────────── 料金プラン ────────────────────────────────────────────── */ .rp-plan-box { margin-top: 48px; border: 1px solid var(--border); padding: 48px; } .rp-plan-badge { display: inline-block; font-size: 11px; color: var(--accent); border: 1px solid var(--accent); padding: 4px 14px; letter-spacing: 0.08em; margin-bottom: 24px; } .rp-plan-price-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 32px; flex-wrap: wrap; } .rp-plan-price { font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; } .rp-plan-price-unit { font-size: 14px; color: var(--muted); font-family: var(--sans); font-weight: 400; } .rp-plan-note { font-size: 12px; color: var(--muted); } .rp-plan-table { width: 100%; border-collapse: collapse; font-size: 13px; } .rp-plan-table tr { border-bottom: 1px solid var(--border); } .rp-plan-table tr:first-child { border-top: 1px solid var(--border); } .rp-plan-table td { padding: 14px 8px; vertical-align: middle; } .rp-plan-table td:first-child { color: var(--muted); width: 60%; } .rp-plan-check { color: var(--accent); font-weight: 500; margin-right: 6px; } .rp-campaign-box { margin-top: 24px; background: var(--dark); color: #fff; padding: 32px 48px; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .rp-campaign-label { font-size: 12px; opacity: .6; letter-spacing: 0.08em; margin-bottom: 6px; } .rp-campaign-text { font-size: 14px; line-height: 1.6; } .rp-campaign-price { font-family: var(--serif); font-size: clamp(28px, 3.5vw, 40px); font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; } .rp-campaign-price small { font-family: var(--sans); font-size: 13px; font-weight: 400; opacity: .7; } .rp-guarantee { margin-top: 16px; font-size: 12px; color: var(--muted); border: 1px solid var(--border); padding: 12px 16px; line-height: 1.8; } /* ────────────────────────────────────────────── ワークフロー（進め方） ────────────────────────────────────────────── */ .rp-wf-list { margin-top: 56px; border-top: 1px solid var(--border); } .rp-wf-row { display: grid; grid-template-columns: 100px 1fr; gap: 48px; padding: 40px 0; border-bottom: 1px solid var(--border); align-items: start; } .rp-wf-num { font-family: var(--serif); font-size: 11px; color: var(--accent); letter-spacing: 0.14em; padding-top: 4px; } .rp-wf-name { font-size: 15px; font-weight: 500; margin-bottom: 10px; line-height: 1.5; } .rp-wf-body { font-size: 13px; color: var(--muted); line-height: 2; } .rp-wf-note { display: inline-block; margin-top: 10px; font-size: 11px; color: var(--text); background: var(--badge-bg); padding: 3px 10px; letter-spacing: 0.04em; } /* ────────────────────────────────────────────── CTA セクション ────────────────────────────────────────────── */ .rp-cta-wrap { padding: 80px 0 100px; } .rp-cta-box { border: 1px solid var(--border); padding: 64px; text-align: center; } .rp-cta-box .rp-label { justify-content: center; } .rp-cta-box .rp-label::before { display: none; } .rp-cta-heading { font-family: var(--serif); font-size: clamp(22px, 2.8vw, 32px); font-weight: 700; line-height: 1.4; margin-bottom: 16px; } .rp-cta-desc { font-size: 13px; color: var(--muted); line-height: 2; margin-bottom: 36px; } .rp-cta-btns { display: flex; align-items: center; justify-content: center; gap: 16px; } /* ────────────────────────────────────────────── フッター ────────────────────────────────────────────── */ .rp-footer { background: var(--dark); padding: 64px 0 40px; color: rgba(255,255,255,.7); } .rp-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 40px; display: flex; justify-content: space-between; align-items: flex-start; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.1); } .rp-footer-logo { font-size: 18px; font-weight: 500; color: #fff; letter-spacing: 0.06em; margin-bottom: 16px; } .rp-footer-logo img, .footer-logo img { height: 18px !important; width: auto !important; display: block !important; max-width: none !important; } .rp-footer-address { font-size: 12px; line-height: 1.8; color: rgba(255,255,255,.5); margin-bottom: 24px; } .rp-social-link { display: inline-block; margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.5); text-decoration: none; letter-spacing: 0.06em; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 2px; transition: color .2s; } .rp-social-link:hover { color: #fff; } .rp-footer-nav { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .rp-footer-nav a { font-size: 12px; color: rgba(255,255,255,.5); text-decoration: none; letter-spacing: 0.04em; transition: color .2s; } .rp-footer-nav a:hover { color: rgba(255,255,255,.9); } .rp-footer-copy { max-width: 1200px; margin: 32px auto 0; padding: 0 40px; font-size: 11px; color: rgba(255,255,255,.3); letter-spacing: 0.06em; } /* ────────────────────────────────────────────── レスポンシブ ────────────────────────────────────────────── */ @media (max-width: 1024px) { .rp-header { padding: 0 20px; } .rp-nav { display: none; } .rp-hamburger { display: flex; } .rp-inner { padding: 0 24px; } .rp-feature-row { grid-template-columns: 1fr; gap: 32px; } .rp-feature-row.reverse { direction: ltr; } .rp-reason-row { grid-template-columns: 1fr; gap: 16px; } .rp-campaign-box { flex-direction: column; gap: 16px; } .rp-plan-box { padding: 32px 24px; } .rp-cta-box { padding: 48px 24px; } .rp-footer-inner { padding: 0 24px 48px; } .rp-footer-copy { padding: 0 24px; } } @media (max-width: 768px) { .rp-section { padding: 60px 0; } .rp-case-grid { grid-template-columns: 1fr; } .rp-wf-row { grid-template-columns: 80px 1fr; gap: 24px; } } @media (max-width: 480px) { .rp-cta-btns { flex-direction: column; } .rp-footer-inner { flex-direction: column; gap: 36px; } .rp-footer-nav { align-items: flex-start; } .rp-wf-row { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; } }