<div id=”rc-kaigo-page” style=”position:relative;width:100%;min-height:100vh;overflow:hidden;”>
<style>
@import url(‘https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Noto+Sans+JP:wght@400;500;600&display=swap’);
/* ====== CSS RESET scoped to rc-kaigo-page ====== */
#rc-kaigo-page * { margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; }
#rc-kaigo-page { font-family: “Yu Gothic”, “Yu Gothic UI”, “Meiryo”, “Hiragino Sans”, sans-serif !important; }
/* ====== Realize Club Topbar ====== */
#rc-kaigo-page .rc-hd {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 10000 !important;
background: #f8f4eb !important;
border-bottom: 1px solid rgba(190,169,118,0.3) !important;
font-family: ‘Noto Sans JP’, sans-serif !important;
width: 100% !important;
}
#rc-kaigo-page .rc-hd-main {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: 14px 40px !important;
max-width: 1200px !important;
margin: 0 auto !important;
}
#rc-kaigo-page .rc-hd-logo {
font-family: ‘Cormorant Garamond’, serif !important;
font-size: clamp(16px, 2.5vw, 24px) !important;
font-weight: 600 !important;
color: #1a1819 !important;
text-decoration: none !important;
letter-spacing: 0.05em !important;
}
#rc-kaigo-page .rc-hd-toggle {
display: none !important;
flex-direction: column !important;
gap: 5px !important;
background: none !important;
border: none !important;
cursor: pointer !important;
padding: 8px !important;
}
#rc-kaigo-page .rc-hd-toggle span {
width: 22px !important;
height: 2px !important;
background: #1a1819 !important;
transition: all 0.3s ease !important;
}
#rc-kaigo-page .rc-topbar {
display: flex !important;
gap: 0 !important;
padding: 0 40px !important;
max-width: 1200px !important;
margin: 0 auto !important;
border-top: 1px solid rgba(190,169,118,0.3) !important;
overflow-x: auto !important;
width: 100% !important;
}
#rc-kaigo-page .rc-topbar-btn {
flex: 1 !important;
min-width: 120px !important;
padding: 12px 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
background: none !important;
border: none !important;
color: #8a8078 !important;
text-decoration: none !important;
font-size: 11px !important;
font-family: ‘Noto Sans JP’, sans-serif !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
border-bottom: 2px solid transparent !important;
}
#rc-kaigo-page .rc-topbar-btn:hover {
color: #bea976 !important;
}
#rc-kaigo-page .rc-topbar-btn.active {
color: #bea976 !important;
border-bottom-color: #bea976 !important;
}
#rc-kaigo-page .rc-topbar-btn svg {
width: 14px !important;
height: 14px !important;
stroke: currentColor !important;
fill: none !important;
stroke-width: 1.2 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
}
@media (max-width: 768px) {
#rc-kaigo-page .rc-hd-main { padding: 12px 16px !important; }
#rc-kaigo-page .rc-hd-toggle { display: flex !important; }
#rc-kaigo-page .rc-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: #f8f4eb !important;
border-top: 1px solid rgba(190,169,118,0.3) !important;
}
#rc-kaigo-page .rc-topbar.active { display: flex !important; }
#rc-kaigo-page .rc-topbar-btn {
flex: none !important;
width: 100% !important;
min-width: auto !important;
border-bottom: 1px solid rgba(190,169,118,0.3) !important;
border-left: 3px solid transparent !important;
justify-content: flex-start !important;
padding: 10px 16px !important;
}
#rc-kaigo-page .rc-topbar-btn.active { border-left-color: #bea976 !important; border-bottom-color: rgba(190,169,118,0.3) !important; }
}
/* ====== PHOTO LAYERS ====== */
/* Layer 1: Sakura (starts visible, fades out) */
#rc-kaigo-page .photo-sakura {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 2 !important;
background: url(‘kaigo-bg.jpg’) center center / cover no-repeat !important;
opacity: 0 !important;
animation: sakuraIn 2s ease-out 0.3s forwards, sakuraOut 2s ease-in-out 3.5s forwards !important;
}
@keyframes sakuraIn {
0% { opacity: 0; transform: scale(1.04); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes sakuraOut {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* Layer 2: Couple (fades in as sakura fades out) */
#rc-kaigo-page .photo-couple {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 1 !important;
background: url(‘kaigo-couple.jpg’) center center / cover no-repeat !important;
opacity: 0 !important;
animation: coupleIn 2s ease-in-out 3.5s forwards !important;
}
@keyframes coupleIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
/* Overlay for text readability (stays throughout) */
#rc-kaigo-page .photo-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
z-index: 3 !important;
background: linear-gradient(180deg,
rgba(0,0,0,0.40) 0%,
rgba(0,0,0,0.12) 30%,
rgba(0,0,0,0.05) 50%,
rgba(0,0,0,0.12) 70%,
rgba(0,0,0,0.45) 100%
) !important;
pointer-events: none !important;
}
/* ====== TITLE — always visible ====== */
#rc-kaigo-page .title-area {
position: absolute !important;
top: 90px !important;
left: 0 !important;
right: 0 !important;
z-index: 20 !important;
text-align: center !important;
padding: 10px 20px !important;
width: 100% !important;
}
#rc-kaigo-page .title {
font-family: “Yu Gothic”, “Meiryo”, sans-serif !important;
font-weight: 900 !important;
font-size: 3.4rem !important;
color: #fff !important;
letter-spacing: 0.15em !important;
display: inline-block !important;
text-shadow: 0 2px 12px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3) !important;
}
#rc-kaigo-page .title-underline {
width: 120px !important;
height: 3px !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), rgba(255,255,255,0.9), rgba(255,255,255,0.6), transparent) !important;
margin: 12px auto 0 !important;
border-radius: 2px !important;
}
/* ====== 近日公開予定 (appears after crossfade to couple — BOTTOM) ====== */
#rc-kaigo-page .notice-area {
position: absolute !important;
bottom: 12% !important;
left: 0 !important;
right: 0 !important;
z-index: 20 !important;
text-align: center !important;
opacity: 0 !important;
animation: textFadeIn 1.2s ease-out 5.5s forwards !important;
width: 100% !important;
}
#rc-kaigo-page .notice-text {
font-family: “Yu Gothic”, “Meiryo”, sans-serif !important;
font-weight: 900 !important;
font-size: 2.6rem !important;
color: #fff !important;
letter-spacing: 0.2em !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.3) !important;
}
#rc-kaigo-page .notice-dots {
font-family: “Yu Gothic”, “Meiryo”, sans-serif !important;
font-weight: 900 !important;
font-size: 2.6rem !important;
color: rgba(255,255,255,0.7) !important;
letter-spacing: 0.3em !important;
display: inline-block !important;
margin-left: 0.1em !important;
text-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
#rc-kaigo-page .notice-dots span {
display: inline-block !important;
opacity: 0 !important;
}
#rc-kaigo-page .notice-dots span:nth-child(1) {
animation: dotAppear 1.5s ease 6.5s infinite !important;
}
#rc-kaigo-page .notice-dots span:nth-child(2) {
animation: dotAppear 1.5s ease 6.8s infinite !important;
}
#rc-kaigo-page .notice-dots span:nth-child(3) {
animation: dotAppear 1.5s ease 7.1s infinite !important;
}
@keyframes textFadeIn {
0% { opacity: 0; transform: translateY(12px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes dotAppear {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
/* ====== COMING SOON (appears after 近日公開予定) ====== */
#rc-kaigo-page .coming-soon-container {
position: absolute !important;
bottom: 24% !important;
left: 0 !important;
right: 0 !important;
z-index: 20 !important;
text-align: center !important;
pointer-events: none !important;
width: 100% !important;
}
#rc-kaigo-page .coming-soon {
font-family: “Segoe UI”, “Helvetica Neue”, Impact, Arial, sans-serif !important;
font-weight: 900 !important;
font-size: 5.5rem !important;
letter-spacing: 0.2em !important;
color: rgba(255,255,255,0.9) !important;
opacity: 0 !important;
transform: scale(0.8) !important;
animation: stampIn 1.2s cubic-bezier(0.34,1.56,0.64,1) 6.8s forwards !important;
text-shadow: 0 3px 20px rgba(0,0,0,0.4), 0 1px 5px rgba(0,0,0,0.3) !important;
display: inline-block !important;
position: relative !important;
}
#rc-kaigo-page .coming-soon::after {
content: ”;
position: absolute !important;
bottom: -10px !important;
left: 8% !important;
right: 8% !important;
height: 3px !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), rgba(255,255,255,0.5), rgba(255,255,255,0.35), transparent) !important;
border-radius: 2px !important;
opacity: 0 !important;
animation: fadeInLine 0.8s ease 7.8s forwards !important;
}
@keyframes stampIn {
0% { opacity: 0; transform: scale(0.7) translateY(15px); filter: blur(4px); }
60% { opacity: 1; transform: scale(1.04) translateY(-3px); filter: blur(0); }
80% { transform: scale(0.98) translateY(1px); }
100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
@keyframes fadeInLine {
to { opacity: 1; }
}
#rc-kaigo-page .coming-soon-pulse {
animation: subtlePulse 3s ease-in-out infinite !important;
}
@keyframes subtlePulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.82; }
}
/* ====== CORNER ACCENTS ====== */
#rc-kaigo-page .corner-accent {
position: absolute !important;
width: 45px !important;
height: 45px !important;
border: 1px solid rgba(255,255,255,0.12) !important;
z-index: 20 !important;
}
#rc-kaigo-page .corner-tl {
top: 75px !important;
left: 20px !important;
border-right: none !important;
border-bottom: none !important;
}
#rc-kaigo-page .corner-tr {
top: 75px !important;
right: 20px !important;
border-left: none !important;
border-bottom: none !important;
}
#rc-kaigo-page .corner-bl {
bottom: 20px !important;
left: 20px !important;
border-right: none !important;
border-top: none !important;
}
#rc-kaigo-page .corner-br {
bottom: 20px !important;
right: 20px !important;
border-left: none !important;
border-top: none !important;
}
/* ====== BADGE ====== */
#rc-kaigo-page .realize-badge {
position: absolute !important;
bottom: 12px !important;
right: 20px !important;
z-index: 25 !important;
font-size: 0.55rem !important;
color: rgba(255,255,255,0.3) !important;
letter-spacing: 0.2em !important;
font-family: “Segoe UI”, Arial, sans-serif !important;
}
/* ====== RESPONSIVE ====== */
@media (prefers-reduced-motion: reduce) {
#rc-kaigo-page .photo-sakura,
#rc-kaigo-page .photo-couple,
#rc-kaigo-page .coming-soon,
#rc-kaigo-page .notice-area {
animation: none !important;
}
#rc-kaigo-page .photo-sakura { opacity: 0 !important; }
#rc-kaigo-page .photo-couple { opacity: 1 !important; }
#rc-kaigo-page .coming-soon { opacity: 1 !important; transform: scale(1) !important; }
#rc-kaigo-page .notice-area { opacity: 1 !important; }
#rc-kaigo-page .notice-dots span { opacity: 0.5 !important; }
}
@media (max-width: 768px) {
#rc-kaigo-page .title { font-size: 2.2rem !important; }
#rc-kaigo-page .title-area { top: 78px !important; }
#rc-kaigo-page .coming-soon { font-size: 3.2rem !important; }
#rc-kaigo-page .notice-text,
#rc-kaigo-page .notice-dots { font-size: 1.8rem !important; }
#rc-kaigo-page .notice-area { bottom: 10% !important; }
#rc-kaigo-page .coming-soon-container { bottom: 22% !important; }
}
@media (max-width: 480px) {
#rc-kaigo-page .title { font-size: 1.6rem !important; }
#rc-kaigo-page .title-area { top: 70px !important; }
#rc-kaigo-page .coming-soon { font-size: 2.2rem !important; }
#rc-kaigo-page .notice-text,
#rc-kaigo-page .notice-dots { font-size: 1.4rem !important; }
#rc-kaigo-page .notice-area { bottom: 8% !important; }
#rc-kaigo-page .coming-soon-container { bottom: 18% !important; }
}
</style>
<!– Realize Club Topbar –>
<header class=”rc-hd” id=”rcHd”>
<div class=”rc-hd-main”>
<a href=”realize-club-v4.html” class=”rc-hd-logo”>Realize Club</a>
<button class=”rc-hd-toggle” id=”rcMenuBtn” aria-label=”メニュー”><span></span><span></span><span></span></button>
</div>
<div class=”rc-topbar” id=”rcTopbar”>
<a href=”hoken.html” class=”rc-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=”rc-topbar-btn”><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=”rc-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=”rc-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=”rc-topbar-btn active”><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=”rc-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>
<!– Photo Layer 1: Sakura (visible first, then fades out) –>
<div class=”photo-sakura”></div>
<!– Photo Layer 2: Smiling elderly couple (fades in behind sakura) –>
<div class=”photo-couple”></div>
<!– Dark overlay for text readability –>
<div class=”photo-overlay”></div>
<!– Corner accents –>
<div class=”corner-accent corner-tl”></div>
<div class=”corner-accent corner-tr”></div>
<div class=”corner-accent corner-bl”></div>
<div class=”corner-accent corner-br”></div>
<!– Title — always visible –>
<div class=”title-area”>
<h1 class=”title”>介護相談窓口</h1>
<div class=”title-underline”></div>
</div>
<!– 近日公開予定 — appears after couple photo revealed (5.5s) –>
<div class=”notice-area” id=”noticeArea”>
<span class=”notice-text”>近日公開予定</span><span class=”notice-dots”><span>・</span><span>・</span><span>・</span></span>
</div>
<!– COMING SOON — stamps in after notice (6.8s) –>
<div class=”coming-soon-container”>
<div class=”coming-soon” id=”comingSoon”>COMING SOON</div>
</div>
<div class=”realize-badge”>POWERED BY REALIZE OS</div>
<script>
(function(){
// Add pulse to COMING SOON after it fully appears
setTimeout(function(){
var cs = document.getElementById(‘comingSoon’);
if(cs) cs.classList.add(‘coming-soon-pulse’);
}, 8500);
})();
</script>
<script>
(function(){
var btn = document.getElementById(‘rcMenuBtn’);
var tb = document.getElementById(‘rcTopbar’);
if(btn && tb){
btn.addEventListener(‘click’, function(){
tb.classList.toggle(‘active’);
});
document.querySelectorAll(‘.rc-topbar-btn’).forEach(function(b){
b.addEventListener(‘click’, function(){
tb.classList.remove(‘active’);
});
});
}
})();
</script>
</div>