<div id=”rc-chintai-page” style=”position:relative;width:100%;min-height:100vh;”>
<style>
/* CSS Reset for scoped container */
#rc-chintai-page, #rc-chintai-page *, #rc-chintai-page *::before, #rc-chintai-page *::after {
margin: 0;
padding: 0;
box-sizing: border-box !important;
}
/* Google Fonts */
@import url(‘https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Noto+Serif+JP:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;600&display=swap’);
/* CSS Tokens */
#rc-chintai-page {
–beige: #f8f4eb;
–beige-dark: #ede8dc;
–cream: #f5f0e5;
–dark: #1a1819;
–dark-light: #2a2627;
–gold: #bea976;
–gold-light: #d0be8e;
–gold-dim: rgba(190, 169, 118, 0.15);
–gold-border: rgba(190, 169, 118, 0.3);
–text-dark: #3a3530;
–text-on-dark: #f8f4eb;
–text-muted: #8a8078;
–text-muted-on-dark: rgba(248, 244, 235, 0.5);
–white: #fff;
–ff-display: ‘Cormorant Garamond’, serif;
–ff-serif: ‘Noto Serif JP’, serif;
–ff-sans: ‘Noto Sans JP’, sans-serif;
–section-pad: clamp(100px, 15vw, 200px);
–content-max: 1100px;
–ease-main: cubic-bezier(0.72, 0, 0.29, 0.99);
–ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}
/* Reset & Base */
#rc-chintai-page * {
margin: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
}
#rc-chintai-page {
font-family: var(–ff-sans) !important;
color: var(–text-dark) !important;
background: var(–beige) !important;
line-height: 1.6 !important;
overflow-x: hidden !important;
width: 100% !important;
position: relative !important;
}
/* Header */
#rc-chintai-page .hd {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 1000 !important;
background: var(–beige) !important;
border-bottom: 1px solid var(–gold-border) !important;
}
#rc-chintai-page .hd-main {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 20px 40px !important;
max-width: var(–content-max) !important;
margin: 0 auto !important;
}
#rc-chintai-page .hd-logo {
font-family: var(–ff-display) !important;
font-size: clamp(18px, 3vw, 28px) !important;
font-weight: 600 !important;
color: var(–text-dark) !important;
text-decoration: none !important;
letter-spacing: 0.05em !important;
}
#rc-chintai-page .hd-toggle {
display: none !important;
flex-direction: column !important;
gap: 6px !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 8px !important;
}
#rc-chintai-page .hd-toggle span {
width: 24px !important;
height: 2px !important;
background: var(–text-dark) !important;
transition: all 0.3s ease !important;
}
#rc-chintai-page .topbar {
display: flex !important;
gap: 0 !important;
padding: 0 40px !important;
max-width: var(–content-max) !important;
margin: 0 auto !important;
border-top: 1px solid var(–gold-border) !important;
overflow-x: auto !important;
}
#rc-chintai-page .topbar-btn {
flex: 1 !important;
min-width: 140px !important;
padding: 16px 20px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
background: none !important;
border: none !important;
color: var(–text-muted) !important;
text-decoration: none !important;
font-size: 12px !important;
font-family: var(–ff-sans) !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
border-bottom: 2px solid transparent !important;
position: relative !important;
}
#rc-chintai-page .topbar-btn:hover {
color: var(–gold) !important;
}
#rc-chintai-page .topbar-btn.active {
color: var(–gold) !important;
border-bottom-color: var(–gold) !important;
}
#rc-chintai-page .topbar-btn svg {
width: 16px !important;
height: 16px !important;
stroke: currentColor !important;
fill: none !important;
stroke-width: 1.2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
/* Responsive Header */
@media (max-width: 768px) {
#rc-chintai-page .hd-main {
padding: 16px 20px !important;
}
#rc-chintai-page .hd-toggle {
display: flex !important;
}
#rc-chintai-page .topbar {
display: none !important;
padding: 0 !important;
flex-direction: column !important;
border-top: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
background: var(–beige) !important;
border-top: 1px solid var(–gold-border) !important;
}
#rc-chintai-page .topbar.active {
display: flex !important;
}
#rc-chintai-page .topbar-btn {
flex: none !important;
width: 100% !important;
min-width: auto !important;
border-bottom: 1px solid var(–gold-border) !important;
border-left: 3px solid transparent !important;
justify-content: flex-start !important;
padding: 12px 20px !important;
}
#rc-chintai-page .topbar-btn.active {
border-left-color: var(–gold) !important;
border-bottom-color: var(–gold-border) !important;
}
}
/* Compass Cursor — Refined Luxury Design */
#rc-chintai-page .compass {
position: fixed !important;
pointer-events: none !important;
z-index: 99999 !important;
width: 96px !important;
height: 96px !important;
transform: translate(-50%, -50%) !important;
opacity: 0 !important;
transition: opacity 0.6s cubic-bezier(0.72, 0, 0.29, 0.99) !important;
will-change: left, top !important;
}
#rc-chintai-page .compass.visible {
opacity: 1 !important;
}
#rc-chintai-page .compass.on-link {
opacity: 1 !important;
}
#rc-chintai-page .compass-ring {
position: absolute !important;
inset: 0 !important;
border: 1px solid rgba(42, 34, 24, 0.25) !important;
border-radius: 50% !important;
transition: transform 0.5s cubic-bezier(0.72, 0, 0.29, 0.99), border-color 0.4s !important;
}
#rc-chintai-page .compass.on-link .compass-ring {
transform: scale(1.2) !important;
border-color: rgba(42, 34, 24, 0.45) !important;
}
#rc-chintai-page .compass-ring-inner {
position: absolute !important;
inset: 8px !important;
border: 0.5px solid rgba(42, 34, 24, 0.15) !important;
border-radius: 50% !important;
transition: border-color 0.4s !important;
}
#rc-chintai-page .compass-ticks {
position: absolute !important;
inset: 0 !important;
transition: transform 0.15s ease-out !important;
}
#rc-chintai-page .compass-tick {
position: absolute !important;
transition: background 0.4s !important;
}
#rc-chintai-page .compass-tick.n {
top: 1px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 1.5px !important;
height: 9px !important;
background: #3a3020 !important;
opacity: 0.6 !important;
}
#rc-chintai-page .compass-tick.s {
bottom: 1px !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 1.5px !important;
height: 7px !important;
background: #3a3020 !important;
opacity: 0.4 !important;
}
#rc-chintai-page .compass-tick.e {
right: 1px !important;
top: 50% !important;
transform: translateY(-50%) !important;
height: 1.5px !important;
width: 7px !important;
background: #3a3020 !important;
opacity: 0.4 !important;
}
#rc-chintai-page .compass-tick.w {
left: 1px !important;
top: 50% !important;
transform: translateY(-50%) !important;
height: 1.5px !important;
width: 7px !important;
background: #3a3020 !important;
opacity: 0.4 !important;
}
#rc-chintai-page .compass-tick.ne {
top: 14px !important;
right: 14px !important;
width: 5px !important;
height: 1px !important;
background: #3a3020 !important;
opacity: 0.2 !important;
transform: rotate(-45deg) !important;
}
#rc-chintai-page .compass-tick.nw {
top: 14px !important;
left: 14px !important;
width: 5px !important;
height: 1px !important;
background: #3a3020 !important;
opacity: 0.2 !important;
transform: rotate(45deg) !important;
}
#rc-chintai-page .compass-tick.se {
bottom: 14px !important;
right: 14px !important;
width: 5px !important;
height: 1px !important;
background: #3a3020 !important;
opacity: 0.2 !important;
transform: rotate(45deg) !important;
}
#rc-chintai-page .compass-tick.sw {
bottom: 14px !important;
left: 14px !important;
width: 5px !important;
height: 1px !important;
background: #3a3020 !important;
opacity: 0.2 !important;
transform: rotate(-45deg) !important;
}
#rc-chintai-page .compass-inner {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 6px !important;
height: 6px !important;
transform: translate(-50%, -50%) !important;
background: rgba(42, 34, 24, 0.25) !important;
border: 1px solid rgba(42, 34, 24, 0.35) !important;
border-radius: 50% !important;
transition: all 0.5s cubic-bezier(0.72, 0, 0.29, 0.99) !important;
}
#rc-chintai-page .compass.on-link .compass-inner {
transform: translate(-50%, -50%) scale(1.6) !important;
background: rgba(42, 34, 24, 0.15) !important;
}
#rc-chintai-page .compass-needle {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 2px !important;
height: 30px !important;
transform: translate(-50%, -100%) rotate(0deg) !important;
transform-origin: bottom center !important;
transition: transform 0.15s ease-out !important;
}
#rc-chintai-page .compass-needle::before {
content: ” !important;
position: absolute !important;
bottom: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 0 !important;
border-left: 4px solid transparent !important;
border-right: 4px solid transparent !important;
border-bottom: 30px solid #8b4513 !important;
opacity: 0.8 !important;
transition: border-bottom-color 0.4s !important;
}
#rc-chintai-page .compass-needle-s {
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 2px !important;
height: 22px !important;
transform: translate(-50%, 0) rotate(0deg) !important;
transform-origin: top center !important;
transition: transform 0.15s ease-out !important;
}
#rc-chintai-page .compass-needle-s::before {
content: ” !important;
position: absolute !important;
top: 0 !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 0 !important;
height: 0 !important;
border-left: 3px solid transparent !important;
border-right: 3px solid transparent !important;
border-top: 22px solid rgba(42, 34, 24, 0.18) !important;
transition: border-top-color 0.4s !important;
}
#rc-chintai-page .compass-label {
position: absolute !important;
font-family: var(–ff-display) !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-shadow: 0 0 4px rgba(248, 244, 235, 0.8) !important;
transition: color 0.4s, text-shadow 0.4s !important;
}
#rc-chintai-page .compass-label.cl-n {
top: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 11px !important;
color: #8b4513 !important;
}
#rc-chintai-page .compass-label.cl-s {
bottom: 10px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 8px !important;
color: #3a3020 !important;
opacity: 0.55 !important;
}
#rc-chintai-page .compass-label.cl-e {
right: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 8px !important;
color: #3a3020 !important;
opacity: 0.55 !important;
}
#rc-chintai-page .compass-label.cl-w {
left: 10px !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 8px !important;
color: #3a3020 !important;
opacity: 0.55 !important;
}
#rc-chintai-page .compass.on-dark .compass-ring {
border-color: rgba(190, 169, 118, 0.3) !important;
}
#rc-chintai-page .compass.on-dark.on-link .compass-ring {
border-color: rgba(190, 169, 118, 0.5) !important;
}
#rc-chintai-page .compass.on-dark .compass-ring-inner {
border-color: rgba(190, 169, 118, 0.15) !important;
}
#rc-chintai-page .compass.on-dark .compass-tick {
background: var(–gold) !important;
}
#rc-chintai-page .compass.on-dark .compass-needle::before {
border-bottom-color: var(–gold) !important;
opacity: 0.9 !important;
}
#rc-chintai-page .compass.on-dark .compass-needle-s::before {
border-top-color: rgba(190, 169, 118, 0.2) !important;
}
#rc-chintai-page .compass.on-dark .compass-inner {
border-color: rgba(190, 169, 118, 0.5) !important;
background: rgba(190, 169, 118, 0.2) !important;
}
#rc-chintai-page .compass.on-dark.on-link .compass-inner {
background: rgba(190, 169, 118, 0.15) !important;
}
#rc-chintai-page .compass.on-dark .compass-label {
text-shadow: 0 0 4px rgba(26, 24, 25, 0.6) !important;
}
#rc-chintai-page .compass.on-dark .compass-label.cl-n {
color: var(–gold) !important;
}
#rc-chintai-page .compass.on-dark .compass-label.cl-s, #rc-chintai-page .compass.on-dark .compass-label.cl-e, #rc-chintai-page .compass.on-dark .compass-label.cl-w {
color: rgba(190, 169, 118, 0.6) !important;
}
@media(hover:none) {
#rc-chintai-page .compass {
display: none !important;
}
}
@media(max-width:768px) {
#rc-chintai-page .compass {
display: none !important;
}
}
/* Content */
#rc-chintai-page main {
margin-top: 120px !important;
position: relative !important;
}
#rc-chintai-page .section {
padding: var(–section-pad) 40px !important;
max-width: var(–content-max) !important;
margin: 0 auto !important;
}
#rc-chintai-page .section.beige {
background: var(–beige) !important;
}
#rc-chintai-page .section.dark {
background: var(–dark) !important;
color: var(–text-on-dark) !important;
}
/* Page Header */
#rc-chintai-page .page-header {
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 24px !important;
}
#rc-chintai-page .page-header-icon {
width: 80px !important;
height: 80px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: var(–gold-dim) !important;
border-radius: 50% !important;
}
#rc-chintai-page .page-header-icon svg {
width: 48px !important;
height: 48px !important;
stroke: var(–gold) !important;
fill: none !important;
stroke-width: 1 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
#rc-chintai-page .page-header h1 {
font-family: var(–ff-display) !important;
font-size: clamp(32px, 6vw, 64px) !important;
font-weight: 600 !important;
color: var(–text-dark) !important;
letter-spacing: 0.02em !important;
}
#rc-chintai-page .page-header .subtitle {
font-family: var(–ff-display) !important;
font-size: clamp(16px, 3vw, 24px) !important;
color: var(–gold) !important;
font-weight: 400 !important;
letter-spacing: 0.1em !important;
}
#rc-chintai-page .page-header .description {
font-family: var(–ff-serif) !important;
font-size: clamp(14px, 2vw, 18px) !important;
color: var(–text-muted) !important;
max-width: 600px !important;
line-height: 1.8 !important;
}
/* Service Overview */
#rc-chintai-page .service-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
gap: 32px !important;
margin-top: 48px !important;
}
#rc-chintai-page .service-card {
background: var(–dark-light) !important;
border: 1px solid var(–gold-border) !important;
padding: 40px !important;
border-radius: 8px !important;
text-align: center !important;
transition: all 0.4s var(–ease-out) !important;
opacity: 0 !important;
transform: translateY(20px) !important;
}
#rc-chintai-page .service-card.revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
#rc-chintai-page .service-card:hover {
border-color: var(–gold) !important;
box-shadow: 0 8px 32px rgba(190, 169, 118, 0.15) !important;
}
#rc-chintai-page .service-card-icon {
width: 64px !important;
height: 64px !important;
margin: 0 auto 24px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(190, 169, 118, 0.1) !important;
border-radius: 50% !important;
}
#rc-chintai-page .service-card-icon svg {
width: 40px !important;
height: 40px !important;
stroke: var(–gold) !important;
fill: none !important;
stroke-width: 1.2 !important;
}
#rc-chintai-page .service-card h3 {
font-family: var(–ff-serif) !important;
font-size: 20px !important;
font-weight: 600 !important;
color: var(–text-on-dark) !important;
margin-bottom: 16px !important;
}
#rc-chintai-page .service-card p {
font-family: var(–ff-sans) !important;
font-size: 14px !important;
color: var(–text-muted-on-dark) !important;
line-height: 1.7 !important;
}
/* Flow Section */
#rc-chintai-page .flow-container {
margin-top: 48px !important;
}
#rc-chintai-page .flow-steps {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
gap: 24px !important;
}
#rc-chintai-page .flow-step {
text-align: center !important;
padding: 32px 24px !important;
background: var(–gold-dim) !important;
border-radius: 8px !important;
border: 1px solid var(–gold-border) !important;
position: relative !important;
opacity: 0 !important;
transform: translateY(20px) !important;
transition: all 0.4s var(–ease-out) !important;
}
#rc-chintai-page .flow-step.revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
#rc-chintai-page .flow-step::before {
content: attr(data-step) !important;
display: inline-block !important;
width: 40px !important;
height: 40px !important;
background: var(–gold) !important;
color: var(–dark) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-weight: 700 !important;
margin-bottom: 16px !important;
font-family: var(–ff-sans) !important;
}
#rc-chintai-page .flow-step h3 {
font-family: var(–ff-serif) !important;
font-size: 18px !important;
font-weight: 600 !important;
color: var(–text-dark) !important;
margin-top: 12px !important;
}
#rc-chintai-page .flow-step p {
font-family: var(–ff-sans) !important;
font-size: 13px !important;
color: var(–text-muted) !important;
margin-top: 8px !important;
}
/* Message Section */
#rc-chintai-page .message-content {
text-align: center !important;
max-width: 800px !important;
margin: 0 auto !important;
}
#rc-chintai-page .message-content h2 {
font-family: var(–ff-display) !important;
font-size: clamp(28px, 5vw, 48px) !important;
font-weight: 600 !important;
color: var(–text-on-dark) !important;
margin-bottom: 24px !important;
letter-spacing: 0.02em !important;
opacity: 0 !important;
transform: translateY(20px) !important;
transition: all 0.6s var(–ease-out) !important;
}
#rc-chintai-page .message-content h2.revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
#rc-chintai-page .message-content p {
font-family: var(–ff-serif) !important;
font-size: clamp(14px, 2vw, 18px) !important;
color: var(–text-muted-on-dark) !important;
line-height: 1.9 !important;
opacity: 0 !important;
transform: translateY(20px) !important;
transition: all 0.6s var(–ease-out) 0.1s !important;
}
#rc-chintai-page .message-content p.revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* CTA Section */
#rc-chintai-page .cta-box {
text-align: center !important;
padding: 48px 40px !important;
background: linear-gradient(135deg, var(–gold-dim) 0%, transparent 100%) !important;
border: 1px solid var(–gold-border) !important;
border-radius: 12px !important;
margin-top: 32px !important;
}
#rc-chintai-page .cta-box h2 {
font-family: var(–ff-display) !important;
font-size: clamp(24px, 4vw, 36px) !important;
color: var(–text-dark) !important;
margin-bottom: 20px !important;
opacity: 0 !important;
transform: translateY(20px) !important;
transition: all 0.6s var(–ease-out) !important;
}
#rc-chintai-page .cta-box h2.revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
#rc-chintai-page .cta-button {
display: inline-block !important;
padding: 16px 48px !important;
background: var(–gold) !important;
color: var(–dark) !important;
text-decoration: none !important;
border: 2px solid var(–gold) !important;
border-radius: 4px !important;
font-family: var(–ff-serif) !important;
font-size: 16px !important;
font-weight: 600 !important;
cursor: pointer !important;
letter-spacing: 0.05em !important;
opacity: 0 !important;
transform: translateY(20px) !important;
transition: all 0.6s var(–ease-out) 0.2s !important;
}
#rc-chintai-page .cta-button.revealed {
opacity: 1 !important;
transform: translateY(0) !important;
}
#rc-chintai-page .cta-button:hover {
background: var(–dark) !important;
color: var(–gold) !important;
}
/* Scroll to Form Button */
#rc-chintai-page .scroll-to-form-btn {
display: inline-block !important;
padding: 14px 40px !important;
background: var(–gold) !important;
color: var(–dark) !important;
border: 2px solid var(–gold) !important;
border-radius: 4px !important;
font-family: var(–ff-serif) !important;
font-size: 15px !important;
font-weight: 600 !important;
cursor: pointer !important;
letter-spacing: 0.05em !important;
transition: all 0.3s ease !important;
margin-top: 8px !important;
}
#rc-chintai-page .scroll-to-form-btn:hover {
background: var(–dark) !important;
color: var(–gold) !important;
}
/* Contact Form Section */
#rc-chintai-page .contact-form-section {
background: var(–beige) !important;
padding: var(–section-pad) 40px !important;
}
#rc-chintai-page .contact-form-wrapper {
max-width: var(–content-max) !important;
margin: 0 auto !important;
}
#rc-chintai-page .contact-form-title {
font-family: var(–ff-display) !important;
font-size: clamp(28px, 4vw, 40px) !important;
color: var(–text-dark) !important;
text-align: center !important;
margin-bottom: 12px !important;
}
#rc-chintai-page .contact-form-subtitle {
font-family: var(–ff-serif) !important;
font-size: clamp(13px, 2vw, 16px) !important;
color: var(–text-muted) !important;
text-align: center !important;
margin-bottom: 48px !important;
}
#rc-chintai-page .contact-form {
max-width: 640px !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 24px !important;
}
#rc-chintai-page .form-group {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
#rc-chintai-page .form-group label {
font-family: var(–ff-serif) !important;
font-size: 14px !important;
font-weight: 600 !important;
color: var(–text-dark) !important;
letter-spacing: 0.03em !important;
}
#rc-chintai-page .form-group label .required {
color: #c44 !important;
font-size: 12px !important;
margin-left: 6px !important;
}
#rc-chintai-page .form-group input,
#rc-chintai-page .form-group textarea {
font-family: var(–ff-sans) !important;
font-size: 15px !important;
padding: 14px 16px !important;
border: 1px solid var(–gold-border) !important;
border-radius: 6px !important;
background: var(–white) !important;
color: var(–text-dark) !important;
outline: none !important;
transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
#rc-chintai-page .form-group input:focus,
#rc-chintai-page .form-group textarea:focus {
border-color: var(–gold) !important;
box-shadow: 0 0 0 3px var(–gold-dim) !important;
}
#rc-chintai-page .form-group input::placeholder,
#rc-chintai-page .form-group textarea::placeholder {
color: var(–text-muted) !important;
font-size: 14px !important;
}
#rc-chintai-page .form-group textarea {
resize: vertical !important;
min-height: 140px !important;
}
#rc-chintai-page .form-submit-btn {
display: inline-block !important;
padding: 16px 48px !important;
background: var(–gold) !important;
color: var(–dark) !important;
border: 2px solid var(–gold) !important;
border-radius: 4px !important;
font-family: var(–ff-serif) !important;
font-size: 16px !important;
font-weight: 600 !important;
cursor: pointer !important;
letter-spacing: 0.05em !important;
transition: all 0.3s ease !important;
align-self: center !important;
margin-top: 8px !important;
}
#rc-chintai-page .form-submit-btn:hover {
background: var(–dark) !important;
color: var(–gold) !important;
}
/* Footer */
#rc-chintai-page .footer {
background: var(–dark) !important;
color: var(–text-muted-on-dark) !important;
padding: 60px 40px 40px !important;
border-top: 1px solid var(–gold-border) !important;
margin-top: 60px !important;
}
#rc-chintai-page .footer-content {
max-width: var(–content-max) !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
gap: 40px !important;
margin-bottom: 40px !important;
}
#rc-chintai-page .footer-section h3 {
font-family: var(–ff-serif) !important;
font-size: 16px !important;
font-weight: 600 !important;
color: var(–text-on-dark) !important;
margin-bottom: 16px !important;
}
#rc-chintai-page .footer-section ul {
list-style: none !important;
}
#rc-chintai-page .footer-section ul li {
margin-bottom: 8px !important;
}
#rc-chintai-page .footer-section a {
color: var(–text-muted-on-dark) !important;
text-decoration: none !important;
transition: color 0.3s ease !important;
font-size: 14px !important;
}
#rc-chintai-page .footer-section a:hover {
color: var(–gold) !important;
}
#rc-chintai-page .footer-bottom {
border-top: 1px solid var(–gold-border) !important;
padding-top: 24px !important;
text-align: center !important;
font-size: 12px !important;
}
/* Responsive */
@media (max-width: 1024px) {
#rc-chintai-page .hd-main {
padding: 16px 24px !important;
}
#rc-chintai-page .topbar {
padding: 0 24px !important;
}
#rc-chintai-page .section {
padding: var(–section-pad) 24px !important;
}
#rc-chintai-page main {
margin-top: 110px !important;
}
}
@media (max-width: 768px) {
#rc-chintai-page main {
margin-top: 140px !important;
}
#rc-chintai-page .section {
padding: 60px 20px !important;
}
#rc-chintai-page .page-header h1 {
font-size: clamp(28px, 5vw, 40px) !important;
}
#rc-chintai-page .service-grid {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
#rc-chintai-page .flow-steps {
grid-template-columns: 1fr !important;
}
#rc-chintai-page .cta-box {
padding: 32px 24px !important;
margin-top: 24px !important;
}
#rc-chintai-page .footer-content {
grid-template-columns: 1fr !important;
gap: 32px !important;
}
}
@media (max-width: 480px) {
#rc-chintai-page .hd-main {
padding: 12px 16px !important;
}
#rc-chintai-page .section {
padding: 40px 16px !important;
}
#rc-chintai-page .page-header-icon {
width: 60px !important;
height: 60px !important;
}
#rc-chintai-page .page-header-icon svg {
width: 36px !important;
height: 36px !important;
}
#rc-chintai-page .page-header h1 {
font-size: 24px !important;
}
#rc-chintai-page .service-card {
padding: 24px !important;
}
#rc-chintai-page .flow-step {
padding: 24px 16px !important;
}
#rc-chintai-page .cta-box {
padding: 24px 16px !important;
}
#rc-chintai-page .footer {
padding: 40px 16px 24px !important;
}
}
</style>
<!– Compass Cursor –>
<div class=”compass” id=”compass”>
<div class=”compass-ring”></div>
<div class=”compass-ring-inner”></div>
<div class=”compass-ticks”>
<div class=”compass-tick n”></div>
<div class=”compass-tick s”></div>
<div class=”compass-tick e”></div>
<div class=”compass-tick w”></div>
<div class=”compass-tick ne”></div>
<div class=”compass-tick nw”></div>
<div class=”compass-tick se”></div>
<div class=”compass-tick sw”></div>
</div>
<div class=”compass-needle” id=”compassNeedle”></div>
<div class=”compass-needle-s” id=”compassNeedleS”></div>
<div class=”compass-inner”></div>
<span class=”compass-label cl-n”>N</span>
<span class=”compass-label cl-s”>S</span>
<span class=”compass-label cl-e”>E</span>
<span class=”compass-label cl-w”>W</span>
</div>
<!– Header –>
<header class=”hd” id=”hd”>
<div class=”hd-main”>
<a href=”realize-club-v4.html” class=”hd-logo”>Realize Club</a>
<button class=”hd-toggle” id=”menuBtn” aria-label=”メニュー”>
<span></span><span></span><span></span>
</button>
</div>
<div class=”topbar” id=”topbar”>
<a href=”hoken.html” class=”topbar-btn”>
<svg viewBox=”0 0 16 16″ stroke=”currentColor” fill=”none”><path d=”M8 2.5C6.5 1 3.5 1 2 3.5S3 8 8 13c5-5 7-7.5 6-9.5S9.5 1 8 2.5z”/></svg>
<span>保険</span>
</a>
<a href=”chintai.html” class=”topbar-btn active”>
<svg viewBox=”0 0 16 16″><rect x=”1.5″ y=”6″ width=”5.5″ height=”9″ rx=”0.5″ stroke=”currentColor” fill=”none”/><rect x=”9″ y=”3″ width=”5.5″ height=”12″ rx=”0.5″ stroke=”currentColor” fill=”none”/><path d=”M3 8.5h2M3 11h2″ stroke=”currentColor”/><path d=”M10.5 5.5h2M10.5 8h2M10.5 10.5h2″ stroke=”currentColor”/></svg>
<span>賃貸</span>
</a>
<a href=”myhome.html” class=”topbar-btn”>
<svg viewBox=”0 0 16 16″><path d=”M2 14V7l6-5 6 5v7H2z” stroke=”currentColor” fill=”none”/><path d=”M6 14v-4h4v4″ stroke=”currentColor” fill=”none”/></svg>
<span>マイホーム</span>
</a>
<a href=”konkatsu_coming_soon1.html” class=”topbar-btn”>
<svg viewBox=”0 0 16 16″><circle cx=”8″ cy=”3″ r=”1.8″ stroke=”currentColor” fill=”none”/><circle cx=”5.2″ cy=”5″ r=”1.6″ stroke=”currentColor” fill=”none”/><circle cx=”10.8″ cy=”5″ r=”1.6″ stroke=”currentColor” fill=”none”/><circle cx=”6″ cy=”7.5″ r=”1.4″ stroke=”currentColor” fill=”none”/><circle cx=”10″ cy=”7.5″ r=”1.4″ stroke=”currentColor” fill=”none”/><path d=”M6.5 9.5L8 14.5 9.5 9.5″ stroke=”currentColor” fill=”none”/><path d=”M5.5 11.5h5″ stroke=”currentColor”/></svg>
<span>婚活・育児</span>
</a>
<a href=”kaigo.html” class=”topbar-btn”>
<svg viewBox=”0 0 16 16″><path d=”M5 4.5c0-2 1.5-3 3-3s3 1 3 3c0 1.8-1.8 2.8-3 2.8″ stroke=”currentColor” fill=”none”/><line x1=”8″ y1=”7.3″ x2=”8″ y2=”13.5″ stroke=”currentColor”/><path d=”M6 13.5h4″ stroke=”currentColor”/></svg>
<span>介護</span>
</a>
<a href=”mycar-coming-soon1.html” class=”topbar-btn”>
<svg viewBox=”0 0 16 16″><path d=”M1 10h14″ stroke=”currentColor”/><path d=”M3 10l1-4h8l1 4″ stroke=”currentColor” fill=”none”/><rect x=”1″ y=”10″ width=”14″ height=”2″ rx=”0.5″ stroke=”currentColor” fill=”none”/><circle cx=”4.5″ cy=”12″ r=”1″ stroke=”currentColor” fill=”none”/><circle cx=”11.5″ cy=”12″ r=”1″ stroke=”currentColor” fill=”none”/></svg>
<span>マイカー</span>
</a>
</div>
</header>
<!– Main Content –>
<main>
<!– Page Header Section –>
<section class=”section beige”>
<div class=”page-header”>
<div class=”page-header-icon”>
<svg viewBox=”0 0 48 48″ xmlns=”http://www.w3.org/2000/svg”>
<rect x=”4″ y=”16″ width=”17″ height=”26″ rx=”1″/><rect x=”27″ y=”6″ width=”17″ height=”36″ rx=”1″/><path d=”M9 22h3M15 22h3M9 28h3M15 28h3M9 34h3M15 34h3″/><path d=”M32 12h3M38 12h3M32 18h3M38 18h3M32 24h3M38 24h3M32 30h3M38 30h3″/><rect x=”10″ y=”37″ width=”5″ height=”5″ rx=”0.5″/><rect x=”33″ y=”37″ width=”5″ height=”5″ rx=”0.5″/>
</svg>
</div>
<h1>賃貸相談窓口</h1>
<p class=”subtitle”>Rental Consultation</p>
<p class=”description”>マンション・アパート・戸建てなど、あなたのライフスタイルに合った理想の住まい探しを、専門スタッフが丁寧にサポートいたします。</p>
<button class=”scroll-to-form-btn” onclick=”document.querySelector(‘#rc-chintai-page #contactForm’).scrollIntoView({behavior:’smooth’})”>無料相談を申し込む</button>
</div>
</section>
<!– Message Section –>
<section class=”section dark”>
<div class=”message-content”>
<h2>理想の住まいとの出会いを、確かなサポートで。</h2>
<p>住まい選びは、暮らしの基盤を決める大切な決断です。私たちは、お客様の理想やライフスタイルを丁寧にお聞きし、最適な物件をご紹介いたします。豊富な情報と経験で、安心の住まい探しをお手伝いします。</p>
</div>
</section>
<!– Contact Form Section –>
<section class=”contact-form-section” id=”contactForm”>
<div class=”contact-form-wrapper”>
<h2 class=”contact-form-title”>賃貸のご相談</h2>
<p class=”contact-form-subtitle”>下記フォームにご記入の上、お気軽にお問い合わせください。</p>
<form class=”contact-form” id=”inquiryForm”>
<div class=”form-group”>
<label>会社名</label>
<input type=”text” name=”company” placeholder=”例：株式会社○○”>
</div>
<div class=”form-group”>
<label>氏名 <span class=”required”>※必須</span></label>
<input type=”text” name=”name” placeholder=”例：山田 太郎” required>
</div>
<div class=”form-group”>
<label>都道府県 <span class=”required”>※必須</span></label>
<input type=”text” name=”prefecture” placeholder=”例：東京都” required>
</div>
<div class=”form-group”>
<label>市町村名 <span class=”required”>※必須</span></label>
<input type=”text” name=”city” placeholder=”例：新宿区” required>
</div>
<div class=”form-group”>
<label>メールアドレス <span class=”required”>※必須</span></label>
<input type=”email” name=”email” placeholder=”例：example@mail.com” required>
</div>
<div class=”form-group”>
<label>電話番号</label>
<input type=”tel” name=”phone” placeholder=”例：090-1234-5678″>
</div>
<div class=”form-group”>
<label>相談内容 <span class=”required”>※必須</span></label>
<textarea name=”message” placeholder=”ご希望のエリア・間取り・予算など、お気軽にご記入ください。” required></textarea>
</div>
<button type=”submit” class=”form-submit-btn”>送信する</button>
</form>
</div>
</section>
</main>
<!– Footer –>
<footer class=”footer”>
<div class=”footer-content”>
<div class=”footer-section”>
<h3>Realize Club</h3>
<ul>
<li><a href=”realize-club-v4.html”>ホーム</a></li>
<li><a href=”#”>お問い合わせ</a></li>
</ul>
</div>
<div class=”footer-section”>
<h3>サービス</h3>
<ul>
<li><a href=”hoken.html”>保険相談</a></li>
<li><a href=”chintai.html”>賃貸サポート</a></li>
<li><a href=”myhome.html”>マイホーム</a></li>
<li><a href=”konkatsu_coming_soon1.html”>婚活・育児</a></li>
<li><a href=”kaigo.html”>介護支援</a></li>
<li><a href=”mycar-coming-soon1.html”>カー購入</a></li>
</ul>
</div>
<div class=”footer-section”>
<h3>その他</h3>
<ul>
<li><a href=”privacy-policy.html”>プライバシー</a></li>
<li><a href=”利用規約.html”>利用規約</a></li>
</ul>
</div>
</div>
<div class=”footer-bottom”>
<p>© 2026 Realize Club. All rights reserved.</p>
</div>
</footer>
<script>
(function() {
var containerEl = document.getElementById(‘rc-chintai-page’);
// Mobile Menu Toggle
var menuBtn = containerEl.querySelector(‘#menuBtn’);
var topbar = containerEl.querySelector(‘#topbar’);
menuBtn.addEventListener(‘click’, () => {
topbar.classList.toggle(‘active’);
});
containerEl.querySelectorAll(‘.topbar-btn’).forEach(btn => {
btn.addEventListener(‘click’, () => {
topbar.classList.remove(‘active’);
});
});
// Compass Cursor
(function(){
var compass = containerEl.querySelector(‘.compass’);
var needle = containerEl.querySelector(‘#compassNeedle’);
var needleS = containerEl.querySelector(‘#compassNeedleS’);
var ticks = compass.querySelector(‘.compass-ticks’);
if(!compass) return;
var cx=0,cy=0,tx=0,ty=0,prevX=0,prevY=0;
var angle=0,targetAngle=0;
var visible=false;
var isTouch=’ontouchstart’ in window;
if(isTouch) return;
document.documentElement.style.cursor=’none’;
var cs=document.createElement(‘style’);
cs.textContent=’#rc-chintai-page a,#rc-chintai-page button,.service-card,.flow-step,.ft-nav a,.hd-toggle,.hd-logo,.topbar-btn{cursor:none!important}’;
document.head.appendChild(cs);
document.addEventListener(‘mousemove’,function(e){
tx=e.clientX;ty=e.clientY;
if(!visible){visible=true;compass.classList.add(‘visible’);cx=tx;cy=ty}
});
document.addEventListener(‘mouseleave’,function(){visible=false;compass.classList.remove(‘visible’)});
document.addEventListener(‘mouseenter’,function(){visible=true;compass.classList.add(‘visible’)});
document.addEventListener(‘mouseover’,function(e){
var el=e.target.closest(‘a,button,.service-card’);
if(el) compass.classList.add(‘on-link’);
else compass.classList.remove(‘on-link’);
});
var darkBgSections = containerEl.querySelectorAll(‘.section.dark,.footer’);
function checkBg(){
var isDark=false;
for(var i=0;i<darkBgSections.length;i++){
var r=darkBgSections[i].getBoundingClientRect();
if(cy>=r.top && cy<=r.bottom){isDark=true;break}
}
compass.classList.toggle(‘on-dark’,isDark);
}
function tick(){
var ease=0.12;
cx+=(tx-cx)*ease;cy+=(ty-cy)*ease;
compass.style.left=cx+’px’;compass.style.top=cy+’px’;
var dx=cx-prevX,dy=cy-prevY;
var speed=Math.sqrt(dx*dx+dy*dy);
if(speed>0.5) targetAngle=Math.atan2(dx,-dy)*180/Math.PI;
var diff=targetAngle-angle;
while(diff>180) diff-=360;
while(diff<-180) diff+=360;
angle+=diff*0.08;
needle.style.transform=’translate(-50%,-100%) rotate(‘+angle+’deg)’;
needleS.style.transform=’translate(-50%,0) rotate(‘+angle+’deg)’;
ticks.style.transform=’rotate(‘+angle*0.3+’deg)’;
checkBg();
prevX=cx;prevY=cy;
requestAnimationFrame(tick);
}
tick();
})();
// Scroll Reveal Animation
var revealElements = containerEl.querySelectorAll(
‘.service-card, .flow-step, .message-content h2, .message-content p’
);
var observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add(‘revealed’);
}
});
}, { threshold: 0.1, rootMargin: ‘0px 0px -50px 0px’ });
revealElements.forEach((el) => {
observer.observe(el);
});
// CTA Button Click
// Google Apps Script URL
var GAS_URL = ‘https://script.google.com/macros/s/AKfycbzEvNXLP667X5ZpBNWqALRz2bzEM4rqG3X-Eb1t-IzARiGZhYhLythiSDphG7X8dGVxqA/exec’;
// Inquiry Form Submit（hidden iframe + form POST）
var inquiryForm = containerEl.querySelector(‘#inquiryForm’);
inquiryForm.addEventListener(‘submit’, function(e) {
e.preventDefault();
var orig = this;
var submitBtn = orig.querySelector(‘.form-submit-btn’);
submitBtn.textContent = ‘送信中…’;
submitBtn.disabled = true;
var iframe = document.createElement(‘iframe’);
iframe.name = ‘gas_iframe_’ + Date.now();
iframe.style.display = ‘none’;
document.body.appendChild(iframe);
iframe.addEventListener(‘load’, function() {
alert(‘お問い合わせありがとうございます。\n内容を確認の上、担当者よりご連絡いたします。’);
orig.reset();
submitBtn.textContent = ‘送信する’;
submitBtn.disabled = false;
document.body.removeChild(iframe);
});
var hf = document.createElement(‘form’);
hf.method = ‘POST’;
hf.action = GAS_URL;
hf.target = iframe.name;
hf.style.display = ‘none’;
var fields = {
source: ‘賃貸相談’,
company: orig.company.value,
name: orig.name.value,
prefecture: orig.prefecture.value,
city: orig.city.value,
email: orig.email.value,
phone: orig.phone.value,
message: orig.message.value
};
Object.keys(fields).forEach(function(key) {
var input = document.createElement(‘input’);
input.type = ‘hidden’;
input.name = key;
input.value = fields[key];
hf.appendChild(input);
});
document.body.appendChild(hf);
hf.submit();
document.body.removeChild(hf);
});
})();
</script>
賃貸相談窓口
Rental Consultation
マンション・アパート・戸建てなど、あなたのライフスタイルに合った理想の住まい探しを、専門スタッフが丁寧にサポートいたします。
賃貸のご相談
下記フォームにご記入の上、お気軽にお問い合わせください。