/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* Warm Color Palette */
--primary-color: #D4A574; /* Warm beige */
--secondary-color: #E8C4A8; /* Light peach */
--accent-color: #B8860B; /* Dark goldenrod */
--text-dark: #4A4A4A; /* Warm dark gray */
--text-light: #7A6A5C; /* Warm light brown */
--bg-warm: #FAF6F0; /* Creamy white */
--bg-light: #FDF8F3; /* Light cream */
--white: #FFFFFF;
--shadow: rgba(212, 165, 116, 0.15);
--shadow-hover: rgba(212, 165, 116, 0.25);
/* Gradients */
--gradient-primary: linear-gradient(135deg, #D4A574 0%, #E8C4A8 100%);
--gradient-secondary: linear-gradient(135deg, #E8C4A8 0%, #F5DEB3 100%);
--gradient-dark: linear-gradient(135deg, #B8860B 0%, #D4A574 100%);
/* Typography */
--font-primary: 'Kiwi Maru', serif;
--font-secondary: 'Kiwi Maru', serif;
/* Spacing */
--spacing-xs: 0.5rem;
--spacing-sm: 1rem;
--spacing-md: 2rem;
--spacing-lg: 4rem;
--spacing-xl: 8rem;
/* Transitions */
--transition-fast: all 0.3s ease;
--transition-medium: all 0.5s ease;
--transition-slow: all 0.8s ease;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font-primary);
font-size: 16px;
line-height: 1.8;
color: var(--text-dark);
background-color: var(--bg-warm);
overflow-x: hidden;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary);
font-weight: 400;
line-height: 1.4;
margin-bottom: var(--spacing-sm);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.8rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
p {
margin-bottom: var(--spacing-sm);
color: var(--text-light);
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition-fast);
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--spacing-md);
}
/* Buttons */
.btn {
display: inline-block;
padding: 12px 30px;
border-radius: 30px;
font-weight: 500;
text-align: center;
transition: var(--transition-fast);
cursor: pointer;
border: none;
font-size: 1rem;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--white);
box-shadow: 0 4px 15px var(--shadow);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px var(--shadow-hover);
}
.btn-secondary {
background: transparent;
color: var(--primary-color);
border: 2px solid var(--primary-color);
}
.btn-secondary:hover {
background: var(--primary-color);
color: var(--white);
}
.btn-outline {
background: transparent;
color: var(--text-dark);
border: 2px solid var(--primary-color);
}
.btn-outline:hover {
background: var(--primary-color);
color: var(--white);
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
width: 100%;
background: rgba(250, 246, 240, 0.95);
backdrop-filter: blur(10px);
z-index: 1000;
padding: 1rem 0;
transition: var(--transition-medium);
border-bottom: 1px solid rgba(212, 165, 116, 0.1);
}
.navbar.scrolled {
background: rgba(250, 246, 240, 0.98);
box-shadow: 0 2px 20px var(--shadow);
}
.nav-container {
max-width: 1300px; /* 1200pxから1300pxに広げて余裕を持たせます */
margin: 0 auto;
padding: 0 var(--spacing-md);
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo h1 {
font-size: 1.1rem; /* 1.2remから少し小さく */
letter-spacing: -0.02em; /* 文字の間隔をわずかに詰めます */
color: var(--primary-color);
margin: 0;
}
.nav-link {
color: var(--text-dark);
font-weight: 500;
padding: 0.5rem 0.8rem; /* 左右の余白を1remから0.8remに微調整 */
border-radius: 20px;
transition: var(--transition-fast);
white-space: nowrap; /* 文字が絶対に改行されないように強制します */
font-size: 0.95rem; /* 文字サイズをほんの少し（16px→15px相当）小さくします */
}
.nav-link:hover {
background: var(--secondary-color);
color: var(--white);
}
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background: var(--primary-color);
margin: 3px 0;
transition: var(--transition-fast);
}
/* Hero Section */
.hero {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(232, 196, 168, 0.2) 100%),
url('data:image/svg+xml,');
background-size: cover;
background-position: center;
transform: scale(1.1);
animation: parallax 20s ease-in-out infinite;
}
@keyframes parallax {
0%, 100% { transform: scale(1.1) translateY(0); }
50% { transform: scale(1.1) translateY(-20px); }
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 800px;
padding: 0 var(--spacing-md);
}
.hero-title {
font-size: 3.5rem;
color: var(--text-dark);
margin-bottom: var(--spacing-sm);
opacity: 0;
animation: fadeInUp 1s ease-out 0.5s forwards;
}
.hero-subtitle {
font-size: 1.5rem;
color: var(--primary-color);
margin-bottom: var(--spacing-md);
opacity: 0;
animation: fadeInUp 1s ease-out 0.7s forwards;
}
.hero-description {
font-size: 1.1rem;
color: var(--text-light);
margin-bottom: var(--spacing-lg);
opacity: 0;
animation: fadeInUp 1s ease-out 0.9s forwards;
}
.hero-buttons {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
opacity: 0;
animation: fadeInUp 1s ease-out 1.1s forwards;
}
.scroll-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
opacity: 0;
animation: fadeInUp 1s ease-out 1.3s forwards;
}
.scroll-arrow {
width: 30px;
height: 30px;
border-right: 2px solid var(--primary-color);
border-bottom: 2px solid var(--primary-color);
transform: rotate(45deg);
animation: bounce 2s infinite;
}
@keyframes fadeInUp {
to {
opacity: 1;
transform: translateY(0);
}
from {
opacity: 0;
transform: translateY(30px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(45deg); }
40% { transform: translateY(-10px) rotate(45deg); }
60% { transform: translateY(-5px) rotate(45deg); }
}
/* Section Styles */
.section {
padding: 100px 0; /* 上下にたっぷり100pxの余白 */
width: 100%;
position: relative;
box-sizing: border-box;
}
.section-header {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.section-title {
color: var(--text-dark);
margin-bottom: var(--spacing-sm);
position: relative;
}
.section-title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--gradient-primary);
margin: var(--spacing-sm) auto 0;
border-radius: 2px;
}
.section-subtitle {
color: var(--text-light);
font-size: 1.1rem;
}
/* Parallax Backgrounds */
.parallax-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
z-index: -1;
}
.parallax-bg-1 {
background: linear-gradient(135deg, rgba(212, 165, 116, 0.1) 0%, rgba(232, 196, 168, 0.2) 100%),
url('data:image/svg+xml,');
}
.parallax-bg-2 {
background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, rgba(212, 165, 116, 0.2) 100%),
url('data:image/svg+xml,');
}
.parallax-bg-3 {
background: linear-gradient(135deg, rgba(232, 196, 168, 0.15) 0%, rgba(245, 222, 179, 0.1) 100%),
url('data:image/svg+xml,');
}
.parallax-bg-4 {
background: linear-gradient(135deg, rgba(212, 165, 116, 0.2) 0%, rgba(232, 196, 168, 0.15) 100%),
url('data:image/svg+xml,');
}
.parallax-bg-5 {
background: linear-gradient(135deg, rgba(184, 134, 11, 0.08) 0%, rgba(212, 165, 116, 0.12) 100%),
url('data:image/svg+xml,');
}
/* About Section */
.about {
background: var(--bg-light);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
align-items: center;
}
.about-text h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.about-features {
display: grid;
gap: var(--spacing-md);
}
.feature-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--white);
border-radius: 15px;
box-shadow: 0 5px 20px var(--shadow);
transition: var(--transition-fast);
}
.feature-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px var(--shadow-hover);
}
.feature-item i {
font-size: 2rem;
color: var(--primary-color);
min-width: 50px;
}
.feature-item h4 {
margin-bottom: 0.5rem;
color: var(--text-dark);
}
.feature-item p {
margin: 0;
font-size: 0.9rem;
}
/* Station Section */
.station {
position: relative;
color: var(--text-dark);
}
.station-content {
max-width: 800px;
margin: 0 auto;
text-align: center;
}
.station-info h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.station-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
}
.detail-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
backdrop-filter: blur(10px);
}
.detail-item i {
font-size: 1.5rem;
color: var(--primary-color);
min-width: 30px;
}
.detail-item h4 {
margin-bottom: 0.25rem;
}
.detail-item p {
margin: 0;
font-size: 0.9rem;
}
/* Staff Section */
.staff {
background: var(--bg-warm);
}
.staff-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
}
.staff-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px var(--shadow);
transition: var(--transition-fast);
}
.staff-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px var(--shadow-hover);
}
.staff-image {
width: 100%;
height: 250px;
overflow: hidden;
}
.staff-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-medium);
}
.staff-card:hover .staff-image img {
transform: scale(1.1);
}
.staff-info {
padding: var(--spacing-md);
text-align: center;
}
.staff-info h3 {
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.staff-title {
color: var(--primary-color);
font-weight: 500;
margin-bottom: 0.25rem;
}
.staff-experience {
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: var(--spacing-sm);
}
.staff-description {
font-size: 0.9rem;
line-height: 1.6;
}
/* Services Section */
.services {
position: relative;
color: var(--text-dark);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.service-card {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
padding: var(--spacing-lg);
text-align: center;
box-shadow: 0 10px 30px var(--shadow);
transition: var(--transition-fast);
backdrop-filter: blur(10px);
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px var(--shadow-hover);
}
.service-icon {
width: 80px;
height: 80px;
margin: 0 auto var(--spacing-md);
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.service-icon i {
font-size: 2rem;
color: var(--white);
}
.service-card h3 {
color: var(--text-dark);
margin-bottom: var(--spacing-md);
}
.service-card ul {
list-style: none;
text-align: left;
margin-bottom: var(--spacing-md);
}
.service-card li {
padding: 0.25rem 0;
color: var(--text-light);
position: relative;
padding-left: 1.5rem;
}
.service-card li::before {
content: '腦駈就';
color: var(--primary-color);
position: absolute;
left: 0;
}
.price {
font-size: 1.2rem;
font-weight: 600;
color: var(--primary-color);
margin-top: var(--spacing-md);
}
.notice {
background: rgba(255, 255, 255, 0.9);
padding: var(--spacing-md);
border-radius: 15px;
backdrop-filter: blur(10px);
}
.notice h4 {
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
}
.notice p {
margin: 0.5rem 0;
font-size: 0.9rem;
}
/* Flow Section */
.flow {
background: var(--bg-light);
}
.flow-content {
max-width: 600px;
margin: 0 auto;
}
.flow-step {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.step-number {
width: 60px;
height: 60px;
background: var(--gradient-primary);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 600;
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.step-content h3 {
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.step-detail {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-top: var(--spacing-sm);
color: var(--primary-color);
font-size: 0.9rem;
}
.flow-arrow {
text-align: center;
margin: var(--spacing-md) 0;
color: var(--primary-color);
font-size: 1.5rem;
}
/* Availability Section */
.availability {
position: relative;
color: var(--text-dark);
}
.availability-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-lg);
}
.availability-status {
background: rgba(255, 255, 255, 0.95);
padding: var(--spacing-lg);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.status-item {
margin-bottom: var(--spacing-lg);
}
.status-item h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
}
.status-indicator {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
font-weight: 600;
}
.status-indicator.available {
color: #4CAF50;
}
.status-indicator i {
font-size: 1.2rem;
}
.emergency-contact {
background: rgba(255, 255, 255, 0.95);
padding: var(--spacing-lg);
border-radius: 20px;
text-align: center;
backdrop-filter: blur(10px);
}
.emergency-contact h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
}
.emergency-phone {
font-size: 1.5rem;
font-weight: 600;
color: var(--primary-color);
margin-top: var(--spacing-sm);
}
.emergency-phone i {
margin-right: var(--spacing-sm);
}
/* FAQ Section */
.faq {
background: var(--bg-warm);
}
.faq-content {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--white);
border-radius: 15px;
margin-bottom: var(--spacing-md);
overflow: hidden;
box-shadow: 0 5px 20px var(--shadow);
transition: var(--transition-fast);
}
.faq-item:hover {
box-shadow: 0 10px 30px var(--shadow-hover);
}
.faq-question {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--spacing-md);
cursor: pointer;
transition: var(--transition-fast);
}
.faq-question:hover {
background: rgba(212, 165, 116, 0.05);
}
.faq-question h3 {
margin: 0;
color: var(--text-dark);
}
.faq-question i {
color: var(--primary-color);
transition: var(--transition-fast);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 var(--spacing-md) var(--spacing-md);
display: none;
}
.faq-answer p {
margin: 0;
color: var(--text-light);
}
/* Recruit Section */
.recruit {
position: relative;
color: var(--text-dark);
}
.recruit-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-lg);
}
.recruit-info {
background: rgba(255, 255, 255, 0.95);
padding: var(--spacing-lg);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.recruit-info h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.job-list {
margin-bottom: var(--spacing-lg);
}
.job-item {
background: rgba(250, 246, 240, 0.8);
padding: var(--spacing-md);
border-radius: 15px;
margin-bottom: var(--spacing-md);
}
.job-item h4 {
color: var(--text-dark);
margin-bottom: var(--spacing-sm);
}
.job-item p {
margin: 0.25rem 0;
font-size: 0.9rem;
}
.benefits ul {
list-style: none;
}
.benefits li {
padding: 0.25rem 0;
color: var(--text-light);
position: relative;
padding-left: 1.5rem;
}
.benefits li::before {
content: '膃・ヮZ
color: var(--primary-color);
position: absolute;
left: 0;
font-weight: 600;
}
.recruit-contact {
background: rgba(255, 255, 255, 0.95);
padding: var(--spacing-lg);
border-radius: 20px;
text-align: center;
backdrop-filter: blur(10px);
}
.recruit-contact h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-sm);
}
.contact-info {
margin: var(--spacing-md) 0;
}
.contact-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
color: var(--text-light);
}
.contact-item i {
color: var(--primary-color);
min-width: 20px;
}
/* News Section */
.news {
background: var(--bg-light);
}
.news-content {
max-width: 800px;
margin: 0 auto;
}
.news-list {
margin-bottom: var(--spacing-lg);
}
.news-item {
background: var(--white);
border-radius: 15px;
padding: var(--spacing-md);
margin-bottom: var(--spacing-md);
box-shadow: 0 5px 20px var(--shadow);
transition: var(--transition-fast);
}
.news-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px var(--shadow-hover);
}
.news-date {
color: var(--primary-color);
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 0.5rem;
}
.news-category {
display: inline-block;
background: var(--gradient-primary);
color: var(--white);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.8rem;
margin-bottom: var(--spacing-sm);
}
.news-title {
color: var(--text-dark);
margin-bottom: var(--spacing-sm);
}
.news-excerpt {
color: var(--text-light);
margin: 0;
font-size: 0.9rem;
}
.news-archive {
text-align: center;
}
/* Contact Section */
.contact {
position: relative;
color: var(--text-dark);
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-lg);
}
.contact-info {
background: rgba(255, 255, 255, 0.95);
padding: var(--spacing-lg);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.contact-info h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.contact-item {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.contact-item i {
color: var(--primary-color);
font-size: 1.2rem;
min-width: 20px;
margin-top: 0.25rem;
}
.contact-item h4 {
margin-bottom: 0.25rem;
color: var(--text-dark);
}
.contact-item p {
margin: 0;
font-size: 0.9rem;
}
.contact-item small {
color: var(--text-light);
font-size: 0.8rem;
}
.contact-form {
background: rgba(255, 255, 255, 0.95);
padding: var(--spacing-lg);
border-radius: 20px;
backdrop-filter: blur(10px);
}
.contact-form h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.form-group {
margin-bottom: var(--spacing-md);
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
color: var(--text-dark);
font-weight: 500;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px 16px;
border: 2px solid rgba(212, 165, 116, 0.3);
border-radius: 10px;
font-family: inherit;
font-size: 1rem;
transition: var(--transition-fast);
background: var(--white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.required {
color: #E74C3C;
}
/* Map Section */
.map-section {
background: var(--bg-warm);
}
.map-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--spacing-lg);
}
.map-container {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px var(--shadow);
}
.map-info {
background: var(--white);
padding: var(--spacing-lg);
border-radius: 20px;
box-shadow: 0 10px 30px var(--shadow);
}
.map-info h3 {
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.access-item {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.access-item i {
color: var(--primary-color);
font-size: 1.2rem;
min-width: 20px;
margin-top: 0.25rem;
}
.access-item h4 {
margin-bottom: 0.25rem;
color: var(--text-dark);
}
.access-item p {
margin: 0.25rem 0;
font-size: 0.9rem;
}
/* Instagram Section */
.instagram {
background: var(--bg-light);
}
.instagram-feed {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.instagram-item {
position: relative;
border-radius: 15px;
overflow: hidden;
aspect-ratio: 1;
transition: var(--transition-fast);
}
.instagram-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-medium);
}
.instagram-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(212, 165, 116, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: var(--transition-fast);
}
.instagram-item:hover {
transform: scale(1.05);
}
.instagram-item:hover .instagram-overlay {
opacity: 1;
}
.instagram-overlay i {
font-size: 2rem;
color: var(--white);
}
.instagram-follow {
text-align: center;
}
/* Footer */
.footer {
background: linear-gradient(135deg, var(--text-dark) 0%, #2C2C2C 100%);
color: var(--bg-warm);
padding: var(--spacing-xl) 0 var(--spacing-md);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.footer-section h3 {
color: var(--secondary-color);
margin-bottom: var(--spacing-md);
}
.footer-section p {
color: rgba(250, 246, 240, 0.8);
margin-bottom: var(--spacing-sm);
}
.footer-section ul {
list-style: none;
}
.footer-section li {
margin-bottom: 0.5rem;
}
.footer-section a {
color: rgba(250, 246, 240, 0.8);
transition: var(--transition-fast);
}
.footer-section a:hover {
color: var(--secondary-color);
}
.footer-contact p {
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.footer-contact i {
color: var(--primary-color);
min-width: 16px;
}
.social-links {
display: flex;
gap: var(--spacing-sm);
}
.social-link {
width: 40px;
height: 40px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
transition: var(--transition-fast);
}
.social-link:hover {
background: var(--secondary-color);
transform: translateY(-3px);
}
.footer-bottom {
text-align: center;
padding-top: var(--spacing-md);
border-top: 1px solid rgba(212, 165, 116, 0.3);
color: rgba(250, 246, 240, 0.6);
font-size: 0.9rem;
}
.footer-bottom a {
color: rgba(250, 246, 240, 0.8);
}
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--gradient-primary);
color: var(--white);
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transition: var(--transition-fast);
z-index: 999;
box-shadow: 0 4px 15px var(--shadow);
}
.back-to-top.show {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px var(--shadow-hover);
}
/* Responsive Design */
@media (max-width1024) {
:root {
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--spacing-xl: 4rem;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.5rem; }
.hamburger {
display: flex;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0;
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.2rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.about-content,
.contact-content,
.map-content,
.recruit-content {
grid-template-columns: 1fr;
}
.services-grid,
.staff-grid,
.instagram-feed {
grid-template-columns: 1fr;
}
.station-details {
grid-template-columns: 1fr;
}
.availability-content {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr;
text-align: center;
}
}
@media (max-width: 480px) {
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.section-title {
font-size: 1.8rem;
}
.btn {
padding: 10px 20px;
font-size: 0.9rem;
}
}
/* Additional Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.mb-1 { margin-bottom: var(--spacing-xs); }
.mb-2 { margin-bottom: var(--spacing-sm); }
.mb-3 { margin-bottom: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-lg); }
.mt-1 { margin-top: var(--spacing-xs); }
.mt-2 { margin-top: var(--spacing-sm); }
.mt-3 { margin-top: var(--spacing-md); }
.mt-4 { margin-top: var(--spacing-lg); }
/* Print Styles */
@media print {
.navbar,
.back-to-top,
.scroll-indicator {
display: none;
}
.section {
padding: var(--spacing-md) 0;
}
.hero {
height: auto;
padding: var(--spacing-lg) 0;
}
}
/* --- 1. 全体設定：横揺れと余白を完全に防ぐ --- */
html, body {
margin: 0;
padding: 0;
width: 100%;
overflow-x: hidden; /* 横スクロールを強制禁止 */
}
* {
box-sizing: border-box; /* パディングで横に膨らむのを防ぐ */
/* GPUを強制使用させてチラつきを抑える */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
/* --- 2. Heroセクション：固定(sticky)にする --- */
/* Heroセクションを画面の一番奥に固定 */
/* 追加：親要素が「はみ出し禁止」になっているとstickyは動かないので解除する */
body, main {
overflow: visible !important;
}
/* Hero：画面に張り付く背景 */
.hero {
position: fixed; /* 常に画面に固定 */
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 1; /* 数字を小さくして奥へ */
}
/* About以降の全セクション：Heroの上を滑る「白い紙」にする */
#about, .section {
position: relative;
z-index: 10; /* Hero(1)より大きい数字にして手前へ */
background-color: #fdf8f3; /* ★重要：背景色を必ず塗る。塗らないとHeroが透けます */
width: 100%;
/* margin-top: 100vh; ← もし既に書いてあれば、これが必要です */
}
.hero-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
/* 画像に暗いフィルターをかける（案②の追加） */
.hero-slider::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 5;
transform: translateZ(0); /* チラつき防止 */
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
animation: sliderAnime 15s linear infinite;
}
/* --- 画像パス --- */
.s1 { background-image: url('../image/1.jpg'); }
.s2 { background-image: url('../image/2.jpg'); }
.s3 { background-image: url('../image/3.jpg'); }
.s1 { animation-delay: 0s; }
.s2 { animation-delay: 5s; }
.s3 { animation-delay: 10s; }
@keyframes sliderAnime {
0% { opacity: 0; transform: scale(1); }
10% { opacity: 1; }
33% { opacity: 1; }
45% { opacity: 0; }
100% { opacity: 0; transform: scale(1.15); }
}
.hero-content {
/* 既存の設定... */
position: relative;
z-index: 10;
/* JSでリアルタイムに動かすので、transitionは「なし」か「opacityのみ」にする */
transition: opacity 0.1s linear;
/* 文字が消える時にクリックを邪魔しないようにする設定 */
pointer-events: none;
will-change: opacity, transform;
}
.hero-text {
pointer-events: auto;
color: #fff; /* 文字を白に */
}
#about {
position: relative;
z-index: 20;
background-color: #fdf8f3;
/* 1. ここが重要：Hero画像1枚分（100vh）の余白を作る */
margin-top: 100vh;
/* 2. セクション内の内側の余白（タイトルがくっつかないように） */
padding: 100px 0;
width: 100%;
min-height: 100vh;
/* チラつき防止（念のため継続） */
transform: translateZ(0);
}
/* スライダーの上に暗い膜を置く */
.hero-slider::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* 40%の暗さ。見えにくい場合は0.5に */
z-index: 5; /* 画像(1)と文字(10)の間 */
pointer-events: none;
}
/* タイトルとサブタイトルの文字色と影 */
.hero-title {
color: #ffffff !important;
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); /* 強いボカシ影 */
font-size: 3rem; /* サイズは調整してください */
font-weight: bold;
margin-bottom: 20px;
}
.hero-subtitle {
color: #ffffff !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
font-size: 1.25rem;
font-weight: 500;
}
/* 1. 横分割を解除して縦に並べる */
.about-content {
display: block; /* flexを解除 */
width: 100%;
}
.about-text {
/* 1. 文章の塊自体の幅を決め、左右マージンautoで中央に配置 */
max-width: 700px;
margin: 0 auto 50px; /* 上、左右(中央)、下50px */
/* 2. 中の文字は左寄せにする */
text-align: left;
/* 3. 背景や余白（お好みで調整） */
padding: 20px 30px;
border-radius: 10px;
}
/* もし見出し（h3）だけは真ん中にしたい場合はこれを追加 */
.about-text h3 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
/* 特徴エリア全体を横並びにする */
.about-features {
display: flex;
flex-direction: row; /* 横並び */
justify-content: space-between; /* 均等に配置 */
gap: 20px; /* 項目間の隙間 */
width: 100%;
max-width: 1100px; /* PCで見やすい幅 */
margin: 50px auto 0;
}
/* 各項目の幅を調整 */
.feature-item {
position: relative;
flex: 1; /* 3つの幅を均等にする */
background: #fff;
padding: 50px 20px 30px; /* 上を多めに空けて吹き出しスペースを確保 */
border-radius: 20px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
text-align: center; /* 横並びの時は中央寄せが綺麗です */
}
/* 吹き出しをカードの中央上部に配置 */
.balloon3-right-btm {
position: absolute;
top: -35px; /* 上にはみ出させる */
left: 50%;
transform: translateX(-50%); /* 真ん中に持ってくる */
margin: 0; /* マージンをリセット */
width: 70px;
height: 70px;
/* ...他のスタイル（色、フォントなど）はそのまま... */
}
/* 吹き出しのしっぽ（before）の位置も中央に合わせて微調整 */
.balloon3-right-btm:before {
right: 5px;
bottom: -2px;
}
/* アイコンとタイトルのエリアを縦にする（中央寄せ用） */
.feature-title-area {
flex-direction: column;
justify-content: center;
margin-bottom: 15px;
}
/* 4. POINTラベルのデザイン */
.point-label {
display: inline-block;
background: #e67e22; /* ステーションのテーマ色に合わせて調整してください */
color: #fff;
padding: 4px 12px;
font-size: 0.8rem;
font-weight: bold;
border-radius: 4px;
margin-bottom: 10px;
}
.feature-title-area {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.feature-title-area h4 {
margin: 0;
font-size: 1.25rem;
color: #333;
}
/* あなたが提示してくれたベースコード */
.balloon3-right-btm {
position: absolute; /* 項目の左上に浮かせるために変更 */
top: -20px;
left: -10px;
display: inline-block;
padding: 0;
width: 60px; /* 少し小ぶりに調整（お好みで90pxに戻してOK） */
height: 60px;
line-height: 60px;
text-align: center;
color: #FFF;
font-size: 14px; /* サイズに合わせて調整 */
font-weight: bold;
background: #a58eff;
border-radius: 50%;
box-sizing: border-box;
z-index: 5;
}
.balloon3-right-btm:before {
content: "";
position: absolute;
bottom: -5px; /* サイズに合わせて微調整 */
right: -5px;
border: 10px solid transparent;
border-left: 10px solid #a58eff;
z-index: -1;
transform: rotate(45deg);
}
/* 親要素（カード）に余白を作る */
.feature-item {
position: relative; /* 吹き出しの基準にする */
margin-top: 30px; /* 吹き出しがはみ出す分の余白 */
background: #fff;
padding: 30px 30px 20px 60px; /* 左側に吹き出し用のスペースを空ける */
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
}
/* 1. セクション共通：Hero以外に適用されるようにする */
.section {
padding: 100px 0;
width: 100%;
box-sizing: border-box;
}
/* 2. 中間のパララックス画像専用の設定 */
.parallax-divider {
height: 500px; /* 画像を見せる高さ */
padding: 0;
position: relative;
}
.parallax-divider .parallax-bg {
position: sticky; /* または fixed */
top: 0;
width: 100%;
height: 100vh;
z-index: -1; /* 背景に回す */
}
.parallax-divider img {
width: 100%;
height: 100%;
object-fit: cover;
/* 背景を固定してパララックス効果を出す */
background-attachment: fixed;
}
/* 3. ステーション紹介（ここで初めて白背景にする） */
.station-info-section {
background-color: #fff; /* ここで背景色を指定 */
position: relative;
z-index: 10; /* 画像の上に重なるようにする */
margin-top: 0;
}
/* 4. Heroの文字が白くならないためのガード */
.hero {
background-color: transparent !important;
overflow: hidden;
}
/* 中間のパララックス窓の高さ */
.middle-parallax-container {
height: 500px; /* 画像を見せたい高さ */
width: 100%;
position: relative;
overflow: hidden; /* はみ出し防止 */
z-index: 5;
}
/* 固定背景の設定 */
.parallax-bg-fixed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* ここでHeroとは別の画像を指定 */
background-image: url('image/top.webp');
background-attachment: fixed; /* 画面に固定 */
background-size: cover;
background-position: center;
z-index: -1; /* コンテナの背面に配置 */
}
/* のぞき窓の設定 */
.parallax-window {
height: 100vh;
width: 100%;
position: relative;
z-index: 99; /* Heroより確実に上に来るように大きな数値を設定 */
overflow: hidden;
}
/* 窓の中身（固定背景） */
.parallax-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed; /* 画面に固定 */
background-position: center;
background-size: cover;
background-repeat: no-repeat;
/* Heroの画像が透けないよう、念のため背景色を入れる */
background-color: #fff;
}
/* ステーション紹介（白い壁） */
.station-info-section {
position: relative;
z-index: 100; /* 窓よりもさらに上に重ねる */
background-color: #ffffff; /* ここは必ず透過させない */
padding: 120px 0; /* 上の余白を多めに確保 */
margin-top: -1px; /* 隙間対策 */
padding-top: 150px; /* 100pxから150pxに増量 */
}
/* =============================================== */
/* 📱 スマホ・タブレット用の調整（768px以下） */
/* =============================================== */
@media (max-width: 768px) {
/* --- 1. 全体・セクションの調整 --- */
.section {
padding: 60px 0;
}
.section-title {
font-size: 1.8rem;
}
h3 {
font-size: 1.3rem;
}
/* --- 2. ヘッダー・ナビゲーション（表示と動作を保証） --- */
.navbar {
left: 0 !important;
right: 0 !important;
width: 100% !important;
transform: none !important;
position: fixed;
top: 0;
z-index: 9998; /* メニューより一つ下に設定 */
}
.nav-container {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: center !important;
height: 70px !important;
width: 100% !important;
max-width: 100vw !important;
padding: 0 20px !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.nav-logo {
position: static !important;
flex: 1 !important;
max-width: 70% !important;
text-align: left !important;
}
.nav-logo h1 {
font-size: 1rem !important;
margin: 0 !important;
white-space: nowrap !important;
}
/* ハンバーガー本体 */
.hamburger {
display: flex !important;
flex-direction: column !important;
cursor: pointer !important;
margin-left: auto !important;
position: relative !important;
z-index: 10000 !important; /* メニュー(9999)よりもさらに上に */
visibility: visible !important;
opacity: 1 !important;
gap: 6px;
}
.hamburger .bar {
display: block !important;
width: 30px !important;
height: 3px !important;
background-color: #333 !important;
transition: 0.3s;
}
/* --- 3. Heroエリア（高さを詰め、ボタンを消す） --- */
.hero {
height: 45vh !important;
min-height: 250px !important;
width: 100% !important;
margin-bottom: 0 !important;
padding: 0 !important;
position: relative !important;
overflow: hidden !important;
}
.hero-bg, .hero img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
background-attachment: scroll !important;
}
.hero-content {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 90% !important;
z-index: 2;
}
.hero-content h2 {
font-size: 1.25rem !important;
margin-bottom: 8px !important;
}
.hero-content p {
font-size: 0.85rem !important;
margin-bottom: 0 !important;
}
/* Hero内のボタンを徹底消去 */
.hero-content .hero-btn,
.hero-content .btn,
.hero-content button {
display: none !important;
}
/* --- 4. 訪問看護とは？セクション（隙間をゼロにする） --- */
.about, #about {
margin-top: 0 !important;
padding-top: 20px !important; /* さらに詰めました */
}
.about-features {
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
}
.feature-item {
width: 100%;
max-width: 100%;
padding: 40px 20px 25px;
box-sizing: border-box;
}
/* --- 5. その他の調整 --- */
.parallax-window {
height: 40vh;
}
.content-card {
padding: 25px 15px;
}
.station-details .detail-item {
flex-direction: column;
text-align: center;
}
/* --- メニューの設定をこれ一つに絞る --- */
.nav-menu {
position: fixed !important;
top: 0 !important;
right: -100% !important; /* 右側に隠す */
left: auto !important; /* 左側の設定を完全に消す */
width: 80% !important;
height: 100vh !important;
background-color: #ffffff !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 30px !important;
z-index: 9999 !important;
transition: right 0.4s ease-in-out !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
box-shadow: -10px 0 20px rgba(0,0,0,0.1) !important;
}
/* ボタンが押された時（JavaScriptでactiveがついた時） */
.nav-menu.active {
right: 0 !important; /* 画面に引き出す */
}
.nav-menu a {
font-size: 1.25rem !important;
color: #333 !important;
text-decoration: none !important;
font-weight: bold !important;
}
}
@media (max-width: 768px) {
/* 1. 親要素がメニューを「隠す」のを絶対に防ぐ */
header, .navbar, .nav-container {
overflow: visible !important; /* はみ出し許可 */
position: relative !important;
}
/* 4. メニューの中のリンク（見えないのを防ぐ） */
.nav-menu li {
width: 100%;
text-align: center;
}
/* ナビメニュー：画面全体を覆うように変更 */
.nav-menu {
position: fixed !important;
top: 0 !important;
right: -100vw !important; /* 普段は右の外側に完全に隠す */
width: 100vw !important; /* 画面の横幅いっぱいにする */
height: 100vh !important; /* 画面の高さもいっぱいにする */
background-color: rgba(255, 255, 255, 0.95) !important; /* 少しだけ透ける白 */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
gap: 40px !important;
z-index: 99999 !important;
transition: right 0.3s ease-out !important; /* スライド速度を少しアップ */
}
/* ボタンが押された時：右端を0にする（＝画面にピッタリ収まる） */
.nav-menu.active {
right: 0 !important;
}
/* メニュー内のリンクを特大にして押しやすくする */
.nav-menu a {
font-size: 1.5rem !important;
color: #333 !important;
font-weight: bold !important;
text-decoration: none !important;
padding: 10px !important;
}
/* 5. ハンバーガーボタンを一番手前に */
.hamburger {
display: flex !important;
z-index: 100000 !important;
position: relative !important;
}
/* --- Heroと次のセクションの隙間を消す --- */
.hero { height: 45vh !important; margin-bottom: 0 !important; }
.hero-content .hero-btn { display: none !important; }
.about, #about { margin-top: 0 !important; padding-top: 0 !important; }
}
/* --- 1. PC用の基本設定（メディアクエリの外に書く） --- */
.nav-menu {
display: flex;
flex-direction: row; /* 横並び */
list-style: none;
gap: 20px;
}
/* --- 2. スマホ用の設定（この中だけに縦並びを書く） --- */
@media (max-width: 768px) {
.nav-menu {
flex-direction: column !important; /* スマホの時だけ縦並び */
position: fixed !important;
top: 0 !important;
right: -100vw !important;
width: 100vw !important;
height: 100vh !important;
background-color: #fff !important;
justify-content: center !important;
align-items: center !important;
z-index: 99999 !important;
transition: right 0.3s ease-out !important;
}
.nav-menu.active {
right: 0 !important;
}
}
/* --- POINT 01 などの吹き出し調整 --- */
.feature-item {
position: relative !important;
padding-top: 50px !important; /* 上側に吹き出しが乗るスペースを確保 */
overflow: visible !important; /* はみ出しを許可して切れないようにする */
}
.balloon3-right-btm {
position: absolute !important;
top: -5px !important; /* カードの少し上に浮かせる */
left: 25px !important; /* ★ここを5pxから15pxに増やして内側に寄せる */
width: 75px !important; /* ★サイズを少し大きく（60→70） */
height: 75px !important; /* ★サイズを少し大きく（60→70） */
font-size: 0.9rem !important; /* 文字も少し大きく */
line-height: 1.2 !important;
display: flex !important;
align-items: center;
justify-content: center;
text-align: center;
z-index: 10;
}
/* 吹き出しの中の改行調整（必要であれば） */
.balloon3-right-btm br {
display: block;
margin-bottom: 2px;
}
/* --- ステーション紹介 セクション全体 --- */
.station {
background-color: #fff;
padding: 80px 0;
}
/* PC用：2カラムレイアウト */
.station-grid {
display: flex;
gap: 50px;
align-items: flex-start;
margin-top: 40px;
}
/* 左側画像 */
.station-image {
flex: 1;
}
.station-image img {
width: 100%;
height: auto;
border-radius: 8px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.image-caption {
margin-top: 15px;
color: #666;
font-size: 0.9rem;
text-align: center;
}
/* 右側情報エリア */
.station-info-table {
flex: 1.2;
}
.station-info-table h3 {
color: #2c3e50;
font-size: 1.8rem;
margin-bottom: 20px;
border-bottom: 2px solid #ff9800; /* アクセントカラー */
padding-bottom: 10px;
}
.station-intro-text {
margin-bottom: 30px;
line-height: 1.8;
color: #444;
}
/* 参考サイト風の表組み */
.info-table {
width: 100%;
border-collapse: collapse;
}
.info-table th, .info-table td {
padding: 15px;
border-bottom: 1px solid #eee;
text-align: left;
}
.info-table th {
width: 30%;
background-color: #fcfcfc;
color: #333;
font-weight: bold;
}
.info-table td {
color: #555;
line-height: 1.6;
}
.tel-number {
font-size: 1.2rem;
font-weight: bold;
color: #ff9800;
}
/* スマホ用レスポンシブ */
@media (max-width: 768px) {
.station-grid {
flex-direction: column;
gap: 30px;
}
.station-info-table h3 {
font-size: 1.5rem;
}
.info-table th {
width: 35%;
font-size: 0.9rem;
}
}
/* --- ステーション紹介 新スタイル --- */
.station-container {
margin-top: 40px;
}
/* メッセージ部分（横長に配置） */
.station-message-box {
display: flex;
align-items: center;
background: #fdf8f3; /* 柔らかい背景色 */
padding: 40px;
border-radius: 15px;
margin-bottom: 40px;
gap: 40px;
}
.message-content { flex: 2; }
.message-image { flex: 1; }
.message-image img {
width: 100%;
border-radius: 10px;
}
.message-content h3 {
color: #e67e22;
margin-bottom: 15px;
font-size: 1.5rem;
}
.lead-text {
font-size: 1.25rem;
font-weight: bold;
color: #333;
margin-bottom: 15px;
}
/* 特徴と概要の2カラム */
.station-grid-info {
display: flex;
gap: 30px;
}
.station-features-box, .station-outline-box {
flex: 1;
background: #fff;
padding: 30px;
border: 1px solid #eee;
border-radius: 12px;
}
.station-features-box h3, .station-outline-box h3 {
font-size: 1.3rem;
margin-bottom: 20px;
padding-left: 10px;
border-left: 5px solid #ff9800;
}
/* 特徴リスト */
.feature-list {
list-style: none;
padding: 0;
}
.feature-list li {
display: flex;
gap: 15px;
margin-bottom: 20px;
}
.feature-list i {
color: #ff9800;
font-size: 1.2rem;
margin-top: 4px;
}
/* 概要テーブル */
.outline-table {
width: 100%;
border-collapse: collapse;
}
.outline-table th, .outline-table td {
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
text-align: left;
vertical-align: top;
}
.outline-table th {
width: 100px;
color: #666;
font-size: 0.9rem;
}
/* スマホ用調整 */
@media (max-width: 768px) {
.station-message-box {
flex-direction: column;
padding: 25px;
}
.station-grid-info {
flex-direction: column;
}
.message-content h3 { font-size: 1.3rem; }
.lead-text { font-size: 1.1rem; }
}
/* --- ステーション紹介 統一デザイン --- */
/* 全体の横幅を900pxに固定して中央寄せ */
.station-unified-container {
max-width: 900px;
margin: 0 auto;
padding: 0 20px;
}
/* 各ブロックの共通設定（枠線なし、下余白のみ） */
.station-block {
margin-bottom: 60px;
width: 100%;
}
/* 見出しの統一（オレンジの左線と背景） */
.block-header h3 {
font-size: 1.5rem;
color: #333;
padding: 10px 20px;
border-left: 6px solid #ff9800; /* 共通のアクセントカラー */
background: #fff5e6; /* 薄いオレンジの背景 */
margin-bottom: 25px;
text-align: left;
}
/* メッセージ部分のレイアウト */
.message-layout {
display: flex;
gap: 30px;
align-items: center;
}
.message-text { flex: 2; line-height: 1.8; }
.message-image { flex: 1; }
.message-image img { width: 100%; border-radius: 8px; }
.lead-text {
font-size: 1.2rem;
font-weight: bold;
color: #e67e22;
margin-bottom: 15px;
}
/* リスト形式の統一 */
.feature-list-unified, .service-list-unified {
list-style: none;
padding: 0;
margin: 0;
}
.feature-list-unified li, .service-list-unified li {
padding: 15px 0;
border-bottom: 1px solid #eee; /* 枠線ではなく薄い区切り線 */
display: flex;
align-items: flex-start;
gap: 15px;
font-size: 1.05rem;
color: #444;
}
.feature-list-unified i, .service-list-unified i {
color: #ff9800; /* チェックアイコンもオレンジで統一 */
margin-top: 5px;
}
/* タグのデザイン */
.tag-area { margin-bottom: 15px; }
.tag {
display: inline-block;
background: #ff9800;
color: #fff;
padding: 4px 12px;
border-radius: 4px;
font-size: 0.85rem;
margin-right: 8px;
font-weight: bold;
}
/* スマホ用レスポンシブ */
@media (max-width: 768px) {
.message-layout { flex-direction: column; }
.station-block { margin-bottom: 40px; }
}
/* --- 対応可能サービス：見直し版 --- */
/* 24時間対応などの強調エリア */
.service-highlight-area {
background-color: #fef9f5;
padding: 20px;
border-radius: 8px;
margin-bottom: 30px;
border-left: 4px solid #e67e22;
}
.service-highlight-area p {
color: #e67e22;
font-weight: bold;
margin: 8px 0;
display: flex;
align-items: center;
gap: 10px;
}
/* サービスを2列（2段）で並べる設定 */
.service-grid-unified {
display: grid;
grid-template-columns: repeat(2, 1fr); /* PCで2列 */
gap: 0 40px; /* 縦の隙間0、横の隙間40px */
list-style: none;
padding: 0;
}
.service-grid-unified li {
padding: 12px 0;
border-bottom: 1px solid #eee; /* 横並びになっても下線を引く */
display: flex;
align-items: center;
gap: 12px;
font-size: 1rem;
color: #444;
}
/* チェックアイコン */
.service-grid-unified i {
color: #ff9800;
font-size: 0.9rem;
}
/* スマホでは1列に戻す */
@media (max-width: 768px) {
.service-grid-unified {
grid-template-columns: 1fr; /* スマホは1列 */
}
.service-highlight-area {
padding: 15px;
}
}
/* --- 訪問エリア：デザイン --- */
.area-main {
font-size: 1.3rem;
color: #333;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.area-main::before {
content: "\f3c5"; /* FontAwesomeのマップピン */
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: #e67e22;
}
.area-sub {
font-size: 1.1rem;
color: #555;
margin-bottom: 20px;
padding-left: 28px;
}
.area-notice {
background-color: #f9f9f9;
padding: 15px 20px;
border-radius: 8px;
display: flex;
gap: 15px;
align-items: flex-start;
font-size: 0.9rem;
color: #666;
line-height: 1.6;
}
.area-notice i {
color: #999;
margin-top: 3px;
}
/* --- スタッフ紹介セクション全体 --- */
.staff {
padding: 80px 0;
background-color: #fff;
}
/* A. 所長紹介（1カラム・横長） */
.manager-introduction {
max-width: 900px; /* ステーション紹介と幅を統一 */
margin: 0 auto 60px;
background: #fffaf5;
padding: 40px;
border-radius: 15px;
}
.manager-layout {
display: flex;
gap: 40px;
align-items: center;
}
.manager-image { flex: 1; }
.manager-image img {
width: 100%;
border-radius: 12px;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.manager-message { flex: 1.5; }
.staff-title-tag {
background: #ff9800;
color: #fff;
padding: 4px 12px;
border-radius: 4px;
font-size: 0.85rem;
font-weight: bold;
}
.manager-greeting {
font-size: 1.25rem;
font-weight: bold;
color: #e67e22;
margin: 15px 0;
line-height: 1.4;
}
/* B. スタッフグリッド（2列×2段） */
.staff-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); /* ★ここを2列に設定 */
gap: 30px;
max-width: 900px; /* 幅を統一 */
margin: 0 auto;
}
/* スタッフカード（画像左・テキスト右） */
.staff-card {
display: flex;
align-items: center;
gap: 20px;
background: #fff;
padding: 10px;
}
.staff-image img,
.recruit-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 3px solid #fff5e6;
}
.staff-info {
text-align: left; /* 左寄せで読みやすく */
}
.staff-info h4 {
font-size: 1.2rem;
margin-bottom: 5px;
color: #333;
}
.staff-title {
color: #ff9800;
font-size: 0.85rem;
font-weight: bold;
margin-bottom: 8px;
}
.staff-description {
font-size: 0.9rem;
color: #666;
line-height: 1.5;
}
/* C. 4人目（募集枠）の特殊デザイン */
.recruit-card {
border: 2px dashed #ff9800;
background: #fffdfb;
border-radius: 12px;
}
.recruit-placeholder {
background: #eee;
display: flex;
align-items: center;
justify-content: center;
}
.recruit-placeholder i {
font-size: 2.5rem;
color: #ccc;
}
.recruit-mini-btn {
display: inline-block;
margin-top: 10px;
padding: 4px 12px;
background: #ff9800;
color: #fff;
border-radius: 20px;
font-size: 0.8rem;
text-decoration: none;
}
/* --- スマホ用（1列に戻す） --- */
@media (max-width: 768px) {
.manager-layout { flex-direction: column; text-align: center; }
.staff-grid { grid-template-columns: 1fr; }
.staff-card { flex-direction: column; text-align: center; padding: 20px; }
}
/* 区切り線の調整：上下にしっかり余白を作る */
.staff-divider {
border: none;
border-top: 1px solid #eee;
/* 上に60px、下に80px（ホバーの浮き分を考慮して広め）の余白 */
margin: 60px auto 80px;
max-width: 900px;
clear: both; /* 回り込み防止 */
}
/* スタッフカードのホバー挙動（参考） */
.staff-card {
transition: transform 0.3s, box-shadow 0.3s;
position: relative; /* 重なり順を制御しやすくするため */
z-index: 1;
}
.staff-card:hover {
/* 上に5px浮かせる場合、上のmarginが狭いと線に重なるので注意 */
transform: translateY(-5px);
z-index: 10; /* ホバーしたカードを前面に出す */
}
/* カード全体の設定 */
.staff-card {
transition: transform 0.3s ease;
overflow: visible !important; /* はみ出しを許可 */
padding-top: 30px; /* ★カード内側の「天井」を高くして、画像が動くスペースを作る */
}
/* ホバーでカードごと上に浮かす（サイズは変えない） */
.staff-card:hover {
transform: translateY(-10px); /* 10px上に移動 */
}
/* 画像自体の設定（ホバーで大きくしない） */
.staff-card:hover .staff-image img {
transform: none; /* 大きさはそのまま */
}
/* --- サービス内容セクション --- */
.services {
position: relative;
padding: 100px 0;
}
/* サービスグリッド：PCで3列、スマホで1列 */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1000px;
margin: 0 auto 50px;
}
.service-card {
background: #fff;
padding: 30px 20px;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
text-align: center;
transition: transform 0.3s ease;
}
.service-card:hover {
transform: translateY(-5px);
}
.service-icon {
font-size: 2.5rem;
color: #ff9800; /* オレンジに統一 */
margin-bottom: 20px;
}
.service-card h3 {
font-size: 1.3rem;
color: #333;
margin-bottom: 10px;
position: relative;
padding-bottom: 10px;
}
.service-card h3::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: #ff9800;
}
.service-summary {
font-size: 0.9rem;
color: #e67e22;
font-weight: bold;
margin-bottom: 15px;
}
.service-card ul {
list-style: none;
padding: 0;
text-align: left;
}
.service-card ul li {
font-size: 0.95rem;
color: #666;
padding: 8px 0;
border-bottom: 1px dashed #eee;
display: flex;
align-items: flex-start;
}
.service-card ul li::before {
content: "・";
color: #ff9800;
font-weight: bold;
margin-right: 5px;
}
/* 料金についての注意書きボックス */
.notice-box {
max-width: 900px;
margin: 0 auto;
background: #fdfdfd;
border: 1px solid #eee;
padding: 30px;
border-radius: 8px;
}
.notice-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
color: #e67e22;
}
.notice-box h4 { margin: 0; }
.notice-box p {
font-size: 0.95rem;
color: #666;
line-height: 1.8;
margin-bottom: 10px;
}
/* レスポンシブ */
@media (max-width: 992px) {
.services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.services-grid { grid-template-columns: 1fr; }
}
.service-card ul {
list-style: none;
padding: 0;
margin: 15px 0 0 0;
text-align: left;
}
.service-card ul li {
font-size: 0.95rem;
color: #666;
padding: 8px 0 8px 1.2em; /* 左側に「点」の分のスペースをあらかじめ空ける */
border-bottom: 1px dashed #eee;
position: relative; /* 点を配置する基準にする */
line-height: 1.5;
}
/* 点の部分を絶対配置（重ならない場所）に固定する */
.service-card ul li::before {
content: "";
position: absolute;
left: 0; /* 左端から0の位置に固定 */
top: 1.1em; /* 上から文字の高さに合わせて調整 */
width: 6px;
height: 6px;
background-color: #ff9800;
border-radius: 50%;
transform: translateY(-50%); /* 垂直中央に微調整 */
}
.service-card {
background: #fff;
padding: 30px 25px; /* 左右の余白を少し広めに */
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
/* text-align: center; ←これを削除または left に変更 */
text-align: left;
transition: transform 0.3s ease;
}
/* アイコンだけは中央または左お好みで（ここでは左揃えに合わせます） */
.service-icon {
font-size: 2.5rem;
color: #ff9800;
margin-bottom: 20px;
text-align: left; /* 左に配置 */
}
/* タイトルを真ん中に寄せる */
.service-card h3 {
font-size: 1.3rem;
color: #333;
margin-bottom: 10px;
position: relative;
padding-bottom: 10px;
text-align: center; /* 文字を真ん中に */
}
/* 下線を真ん中に配置する */
.service-card h3::after {
content: "";
position: absolute;
bottom: 0;
left: 50%; /* ★まず左から50%の位置（中央）に持ってくる */
transform: translateX(-50%); /* ★自分の幅の半分だけ左に戻して、ピッタリ中央に */
width: 40px;
height: 2px;
background: #ff9800;
}
/* 説明文（ここが今回気になっていた場所ですね） */
.service-summary {
font-size: 0.9rem;
color: #e67e22;
font-weight: bold;
margin-bottom: 15px;
line-height: 1.6;
text-align: left; /* 確実に左揃え */
}
/* 1. 上の3列カードの幅を確認 */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
max-width: 1000px; /* ここを1000pxに */
margin: 0 auto 50px;
}
/* 2. 下の料金案内ボックスの幅を修正 */
.notice-box {
max-width: 1000px; /* ★ここを900pxから1000pxに修正！ */
margin: 0 auto;
background: #fdfdfd;
border: 1px solid #eee;
padding: 30px;
border-radius: 8px;
box-sizing: border-box; /* パディングで幅が広がらないように */
}
/* --- 利用までの流れ：縦線タイムライン形式 --- */
.flow {
background-color: #fffaf5;
padding: 100px 0;
}
.flow-timeline {
max-width: 850px;
margin: 0 auto;
position: relative;
padding-left: 60px; /* 線と番号のための余白 */
}
/* 縦に貫く線 */
.flow-timeline::before {
content: "";
position: absolute;
left: 20px;
top: 0;
bottom: 0;
width: 3px;
background: #ff9800;
opacity: 0.2;
}
.flow-item {
position: relative;
margin-bottom: 40px;
}
/* ステップ番号（円） */
.flow-number {
position: absolute;
left: -60px;
top: 0;
width: 44px;
height: 44px;
background: #ff9800;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
z-index: 2;
box-shadow: 0 0 0 8px #fffaf5; /* 背景色で線を隠して浮き上がらせる */
}
.flow-card {
background: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.flow-card h3 {
font-size: 1.3rem;
color: #333;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.flow-card h3 i {
color: #ff9800;
font-size: 1.1rem;
}
/* 役割分担の罫線リスト（ボタンに見えないデザイン） */
.flow-roles {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #eee; /* シンプルな区切り線 */
}
.role-line {
display: flex;
font-size: 0.95rem;
margin-bottom: 12px;
line-height: 1.6;
}
.role-line:last-child {
margin-bottom: 0;
}
.role-line span {
flex: 0 0 110px; /* 「主治医」などの幅を固定 */
font-weight: bold;
color: #e67e22;
display: inline-block;
}
.role-line div {
flex: 1;
color: #555;
position: relative;
padding-left: 15px;
}
/* 説明文の前に小さなドット */
.role-line div::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 4px;
height: 4px;
background: #ccc;
border-radius: 50%;
}
/* スマホ対応 */
@media (max-width: 600px) {
.flow-timeline {
padding-left: 45px;
}
.flow-number {
left: -45px;
width: 34px;
height: 34px;
font-size: 1rem;
}
.role-line {
flex-direction: column;
}
.role-line span {
margin-bottom: 4px;
}
}
/* --- 空き状況：視認性重視スタイル --- */
.availability {
position: relative;
padding: 100px 0;
}
.availability-card-refined {
background: #ffffff; /* 確実な白背景 */
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15); /* 浮き出し感を強調 */
max-width: 1000px;
margin: 0 auto;
}
.availability-table-refined {
width: 100%;
border-collapse: collapse;
margin-bottom: 25px;
}
.availability-table-refined th,
.availability-table-refined td {
border: 2px solid #f0f0f0; /* 境界線をハッキリさせる */
padding: 18px 10px;
text-align: center;
font-size: 1.1rem;
color: #333;
}
.availability-table-refined th {
background: #fdf2e9; /* 薄いオレンジ系で優しく強調 */
color: #8a5a3a;
font-weight: bold;
}
.job-label {
background: #fffaf5;
font-weight: bold;
color: #e67e22;
width: 160px;
}
/* 記号の視認性を最大化 */
.status-ok { color: #2ecc71; font-weight: bold; font-size: 1.4rem; }
.status-few { color: #f1c40f; font-weight: bold; font-size: 1.4rem; }
.status-ng { color: #e74c3c; font-weight: bold; font-size: 1.4rem; }
.calendar-info {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eee;
padding-top: 20px;
}
.status-legend {
display: flex;
gap: 20px;
}
.status-legend b {
margin-right: 5px;
}
.update-text {
font-size: 0.85rem;
color: #999;
}
/* 土日の色（白背景で見やすい濃いめの色） */
.availability-table-refined th.sat { color: #2980b9; }
.availability-table-refined th.sun { color: #c0392b; }
/* --- FAQ 究極の安定版 --- */
.faq {
background-color: #f9f9f9;
padding: 100px 0;
}
.faq-list {
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: #fff;
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
/* クリックエリアを確実にする設定 */
.faq-item summary {
padding: 20px 25px;
cursor: pointer;
font-weight: bold;
display: flex; /* 横並び */
align-items: center;
list-style: none; /* 三角を消す */
outline: none;
}
/* Safari向けの三角消し */
.faq-item summary::-webkit-details-marker {
display: none;
}
.q-prefix {
color: #ff9800;
font-size: 1.4rem;
margin-right: 15px;
}
.q-text {
flex: 1;
color: #333;
line-height: 1.4;
}
/* 開閉アイコン（自作） */
.faq-icon {
width: 12px;
height: 12px;
border-right: 2px solid #ccc;
border-bottom: 2px solid #ccc;
transform: rotate(45deg); /* 下矢印 */
transition: transform 0.3s;
margin-left: 10px;
}
/* 開いたときの変化 */
.faq-item[open] {
border-color: #ff9800;
}
.faq-item[open] .faq-icon {
transform: rotate(-135deg); /* 上矢印 */
margin-top: 5px;
}
/* 中身のテキスト */
.faq-content {
padding: 0 25px 25px 60px; /* 左側にQの分だけ余白 */
color: #666;
line-height: 1.8;
}
/* --- 求人セクション：お問い合わせ無しVer --- */
.recruit {
position: relative;
padding: 120px 0;
color: #fff;
text-align: center;
}
.recruit-message {
max-width: 800px;
margin: 0 auto 60px;
}
.message-tag {
display: inline-block;
background: #ff9800;
padding: 4px 15px;
border-radius: 20px;
font-size: 0.9rem;
font-weight: bold;
margin-bottom: 20px;
}
.message-title {
font-size: 2.2rem;
line-height: 1.5;
margin-bottom: 25px;
text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.message-text {
font-size: 1.1rem;
line-height: 2;
opacity: 0.9;
}
/* 2カラムレイアウト */
.recruit-content-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
max-width: 1000px;
margin: 0 auto;
text-align: left;
}
.recruit-card {
background: #ffffff; /* 白背景で可読性を最大に */
padding: 40px;
border-radius: 15px;
color: #333;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}
.recruit-card h3 {
font-size: 1.4rem;
color: #e67e22;
margin-bottom: 25px;
border-bottom: 2px solid #ffefe0;
padding-bottom: 10px;
}
.job-box {
margin-bottom: 20px;
padding: 15px;
background: #fffaf5;
border-radius: 10px;
}
.job-badge {
display: inline-block;
font-size: 0.75rem;
background: #eee;
padding: 2px 8px;
border-radius: 4px;
margin-bottom: 5px;
}
.job-box h4 { margin: 0 0 5px; font-size: 1.1rem; }
.job-desc { font-size: 0.85rem; color: #666; margin-bottom: 5px; }
.job-pay { font-weight: bold; color: #333; font-size: 0.9rem; margin: 0; }
.benefit-list {
list-style: none;
padding: 0;
}
.benefit-list li {
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
font-size: 0.95rem;
}
.benefit-list i { color: #ff9800; }
.recruit-status {
margin-top: 20px;
font-size: 0.9rem;
color: #888;
font-style: italic;
text-align: center;
}
@media (max-width: 850px) {
.recruit-content-grid { grid-template-columns: 1fr; }
.message-title { font-size: 1.6rem; }
}
/* 求人セクション内のジャンプボタン */
.recruit-action {
margin-top: 25px;
text-align: center;
}
.recruit-status {
margin-bottom: 15px;
font-size: 0.85rem;
color: #888;
}
.recruit-jump-btn {
display: inline-block;
background: #e67e22; /* 柔らかいオレンジ */
color: #fff;
padding: 12px 30px;
border-radius: 50px;
text-decoration: none;
font-weight: bold;
font-size: 1rem;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}
.recruit-jump-btn:hover {
background: #d35400;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(230, 126, 34, 0.4);
}
/* スムーススクロールを有効にする（まだ設定していない場合） */
html {
scroll-behavior: smooth;
}
/* --- アクセス・お問い合わせ統合セクション --- */
.contact-access {
position: relative;
padding: 100px 0;
background: #fdfaf7; /* 優しい背景色 */
}
.contact-access-wrapper {
display: flex;
gap: 40px;
max-width: 1100px;
margin: 0 auto;
flex-wrap: wrap;
}
/* 左側：インフォメーション */
.info-side, .form-side {
flex: 1;
min-width: 350px;
}
.info-card {
background: #fff;
padding: 35px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
height: 100%;
}
.info-card h3 {
color: #e67e22;
margin-bottom: 25px;
font-size: 1.4rem;
}
.detail-item {
display: flex;
gap: 15px;
margin-bottom: 15px;
font-size: 0.95rem;
}
.detail-item i { color: #ff9800; margin-top: 4px; }
.map-embed {
margin: 25px 0;
border-radius: 10px;
overflow: hidden;
border: 1px solid #eee;
}
.access-guide h4 {
font-size: 1rem;
margin-bottom: 10px;
}
.access-guide p {
font-size: 0.9rem;
color: #666;
margin-bottom: 5px;
}
/* 右側：フォーム */
.contact-form-refined {
background: #fff;
padding: 35px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.contact-form-refined h3 {
margin-bottom: 25px;
font-size: 1.4rem;
text-align: center;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
font-size: 0.9rem;
}
.form-group label span { color: #e74c3c; }
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
}
.submit-btn {
width: 100%;
background: #333;
color: #fff;
padding: 15px;
border: none;
border-radius: 6px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
.submit-btn:hover {
background: #ff9800;
}
/* スマホ対応 */
@media (max-width: 768px) {
.contact-access-wrapper { flex-direction: column; }
.info-side, .form-side { min-width: 100%; }
}
/* --- アクセス・お問い合わせ：高さ統一版 --- */
.contact-access-wrapper {
display: flex;
gap: 30px;
max-width: 1100px;
margin: 0 auto;
align-items: stretch; /* これで左右のカード自体の高さを強制的に揃える */
flex-wrap: wrap;
}
.info-side, .form-side {
flex: 1;
min-width: 350px;
display: flex; /* 追加：カード自体をFlexコンテナにする */
}
.info-card, .contact-form-refined {
background: #fff;
padding: 35px;
border-radius: 12px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
width: 100%; /* 横幅いっぱい */
display: flex; /* 追加：中身を縦に並べる */
flex-direction: column;
}
/* 左側のカード内の中身のバランス調整 */
.office-table {
border-top: 1px solid #eee;
margin-bottom: 20px;
}
/* 地図を少し大きくするか、余白で調整してフォームに高さを合わせる */
.map-embed {
margin-top: auto; /* これを入れると、上のテーブルとの間に余白を作って下へ押し下げる */
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
}
.access-guide-mini {
background: #f9f9f9;
padding: 15px;
border-radius: 8px;
margin-top: 0; /* 下にピタッと合わせる */
}
/* フォーム側の調整（左と余白感を合わせる） */
.contact-form-refined {
height: 100%;
}
.submit-btn {
margin-top: auto; /* 送信ボタンを一番下に配置して高さを活かす */
}
/* スマホ時は高さを揃える必要がないので解除 */
@media (max-width: 850px) {
.contact-access-wrapper { flex-direction: column; }
.info-side, .form-side { min-width: 100%; }
}
/* 事業所概要テーブルのスタイル */
.office-table {
border-top: 1px solid #eee;
margin-bottom: 20px;
}
.table-row {
display: flex;
border-bottom: 1px solid #eee;
align-items: center;
}
.table-label {
flex: 0 0 100px; /* 左側の幅を固定 */
background: #fffaf5; /* ほんのり色をつけて空白感を消す */
padding: 12px 15px;
font-size: 0.85rem;
font-weight: bold;
color: #e67e22;
}
.table-data {
flex: 1;
padding: 12px 15px;
font-size: 0.9rem;
color: #333;
}
/* アクセス案内をコンパクトに */
.access-guide-mini {
background: #f9f9f9;
padding: 15px;
border-radius: 8px;
}
.access-guide-mini p {
font-size: 0.85rem;
margin: 0;
line-height: 1.8;
color: #666;
}
/* info-card全体の調整 */
.info-card {
display: flex;
flex-direction: column;
justify-content: space-between; /* 縦の空白も均等に */
}
/* --- アクセス・お問い合わせ：入力欄拡大版 --- */
.contact-access-wrapper {
display: flex;
gap: 30px;
max-width: 1100px;
margin: 0 auto;
align-items: stretch; /* これで左右の高さを強制一致 */
}
/* 右側のフォーム側を少し広めに (6:4くらい) 設定してゆとりを出す */
.info-side { flex: 4; }
.form-side { flex: 6; }
.contact-form-refined {
background: #fff;
padding: 40px;
border-radius: 15px;
display: flex;
flex-direction: column;
/* ここでフォーム全体の最低の高さをしっかり確保（左より長くする） */
min-height: 700px;
}
/* お問い合わせ内容のグループを最大限に広げる */
.form-group-main {
flex: 1; /* 余っている縦のスペースをすべてこの子が使う */
display: flex;
flex-direction: column;
margin-bottom: 25px;
}
.form-group-main textarea {
flex: 1; /* 親の広さをめいっぱい使って下に伸びる */
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 1rem;
resize: none;
background: #fdfdfd;
}
/* 左側のカードも、右のフォームの長さに合わせて中身を配置 */
.info-card {
height: 100%;
display: flex;
flex-direction: column;
}
.map-embed {
flex: 1; /* 左側も地図を縦に伸ばして、右の長いフォームと高さを合わせる */
min-height: 250px;
margin: 20px 0;
}
.submit-btn {
padding: 20px;
background: #333;
color: #fff;
font-size: 1.1rem;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
}
/* --- アクセス・お問い合わせ：5:5黄金比率版 --- */
.contact-access-wrapper {
display: flex;
gap: 40px; /* 左右の適度なゆとり */
max-width: 1100px;
margin: 0 auto;
align-items: stretch; /* 高さを揃える */
}
/* 左右をピッタリ半分（5:5）に戻す */
.info-side, .form-side {
flex: 1;
min-width: 320px;
}
/* フォームを「縦長で余裕がある」状態に固定 */
.contact-form-refined {
background: #fff;
padding: 35px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
min-height: 650px; /* ここでお好みの「縦の長さ」をキープ */
}
/* お問い合わせ内容（textarea）を広げる */
.form-group-main {
flex: 1; /* 余白をすべて使う */
display: flex;
flex-direction: column;
margin-bottom: 25px;
}
.form-group-main textarea {
flex: 1; /* ボックス自体を縦いっぱいに伸ばす */
width: 100%;
padding: 15px;
border: 1px solid #ddd;
border-radius: 6px;
background: #fdfdfd;
resize: none;
}
/* 左側も右に合わせて自動で引き伸ばされる */
.info-card {
height: 100%;
background: #fff;
padding: 35px;
border-radius: 15px;
display: flex;
flex-direction: column;
}
.office-table {
margin-bottom: 20px;
}
/* 右が伸びた分、地図も少し大きくして余白を埋める */
.map-embed {
flex: 1; /* 地図が縦に伸びて左側の空白を埋める */
min-height: 200px;
margin: 20px 0;
}
/* スマホ対応：縦並びにする */
@media (max-width: 850px) {
.contact-access-wrapper { flex-direction: column; }
.contact-form-refined { min-height: 500px; } /* スマホでは長すぎないように */
}
/* Hero：背景色のみ */
.hero-minimal {
height: 60vh;
background-color: #fff5eb; /* 優しいベージュ・オレンジ系 */
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.hero-content h1 {
color: #e67e22;
font-size: 2.5rem;
}
/* Footer：ご指定の1行のみ */
.footer {
background: #333;
color: #fff;
padding: 40px 0;
text-align: center;
}
.footer-bottom {
font-size: 0.9rem;
color: #ccc;
}
/* Heroの中の文字を強制的に「見える状態」にする */
.hero-content,
.hero-content h1,
.hero-content p,
.hero-btns {
opacity: 1 !important; /* 透明を解除 */
visibility: visible !important; /* 非表示を解除 */
display: block !important; /* 消えていたら表示 */
transform: none !important; /* 変な位置から動かさない */
animation: none !important; /* アニメーションを停止して即表示 */
color: #333 !important; /* 背景が明るいので文字は暗い色に */
}
/* ついでにHero全体の高さや重なりも安定させる */
#hero, .hero {
height: 60vh !important;
background-color: #fff5eb !important; /* ひだまり色 */
position: relative !important;
z-index: 1 !important;
}
#hero, .hero {
/* vhは画面の高さに対する割合です。数値を大きくすると広がります */
min-height: 100vh !important;
/* 上下の余白（パディング）を足して、さらにゆとりを持たせます */
padding: 100px 0 !important;
background-color: #fff5eb !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.hero-content h1 {
font-size: 3.5rem !important; /* 文字も少し大きくするとバランスが良いです */
margin-bottom: 20px !important;
}
#hero, .hero {
height: 100vh !important;
min-height: 100vh !important;
margin-bottom: 0 !important; /* 下側の余白をゼロにする */
padding-bottom: 0 !important; /* 下側の内側余白もゼロにする */
display: flex !important;
align-items: center !important; /* 文字を上下の真ん中に置く */
justify-content: center !important;
}
/* 次のセクション（訪問看護とは）の上の余白もチェック */
#about, .about {
margin-top: 0 !important; /* 上側の余白をリセット */
padding-top: 80px !important; /* 代わりに程よいパディングで調整 */
}
/* --- レスポンシブ決定版 --- */
@media screen and (max-width: 768px) {
/* 1. Heroセクションの調整：スマホだと100vhは「間延び」しやすいので調整 */
#hero, .hero {
height: 70vh !important; /* スマホ画面の7割くらいの高さに。100vhだとボタンまで遠くなるため */
min-height: 500px !important; /* それでも潰れすぎないように最低高さを確保 */
padding: 40px 20px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
/* 2. Heroの文字サイズ：スマホで2行になっても綺麗に見えるサイズ */
.hero-content h1 {
font-size: 1.8rem !important; /* 3.5remから縮小 */
line-height: 1.4 !important;
margin-bottom: 15px !important;
}
.hero-content p {
font-size: 1rem !important;
line-height: 1.6 !important;
}
/* 3. ナビゲーション（ロゴ）：スマホで重なりを防ぐ */
.nav-logo h1 {
font-size: 0.95rem !important; /* 現場で「長い！」と言われないサイズ */
}
/* 4. セクション間の余白：スマホでは100pxは広すぎるので半分に */
.section {
padding: 50px 0 !important;
}
/* 5. グリッドレイアウトを強制的に1列にする */
.about-content,
.services-grid,
.staff-grid,
.contact-content,
.map-content {
grid-template-columns: 1fr !important; /* 横並びを解除して縦に並べる */
gap: 30px !important;
}
/* 6. 画像やカードが横に突き抜けるのを防ぐ（横揺れ防止） */
.container {
padding: 0 20px !important;
overflow: hidden !important;
}
/* 7. フッター：指定の1行をスマホでも中央に */
footer p {
font-size: 0.8rem !important; /* 少し小さくして1行に収まりやすく */
padding: 0 10px;
}
}
/* さらに小さい画面（iPhone SEなど）用 */
@media screen and (max-width: 480px) {
.hero-content h1 {
font-size: 1.5rem !important;
}
}
@media screen and (max-width: 1024px) {
/* メニューの入れ物（nav-menu）を画面全体に固定 */
.nav-menu {
position: fixed !important;
top: 0 !important;
right: -100% !important; /* 初期状態は完全に右に隠す */
width: 100% !important; /* スマホの横幅いっぱいに */
height: 100vh !important;
background: rgba(250, 246, 240, 0.98) !important; /* 背景色 */
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
transition: 0.3s ease !important;
z-index: 999 !important;
}
/* ハンバーガーを押した（active）ときに「右端0」にピタッと合わせる */
.nav-menu.active {
right: 0 !important; /* これで右端が画面に揃います */
}
/* 各メニュー項目の調整 */
.nav-item {
margin: 15px 0 !important;
}
.nav-link {
font-size: 1.2rem !important;
display: block !important;
text-align: center !important;
}
}
.nav-container {
padding: 0 15px !important;
width: 100% !important;
}
@media screen and (max-width: 1024px) {
.nav-menu {
/* 幅と位置を強制的に固定 */
width: 100vw !important; /* 画面の横幅100% */
left: auto !important; /* leftの干渉を防ぐ */
right: -100vw !important; /* 初期位置：右側に完全に隠す */
/* 中身をど真ん中に配置 */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding: 0 !important;
}
/* メニューが開いた時 */
.nav-menu.active {
right: 0 !important; /* 右端を0に合わせる ＝ 画面全体を覆う */
}
.nav-item {
width: 100% !important; /* リンクの反応範囲を広げる */
margin: 20px 0 !important;
}
.nav-link {
font-size: 1.5rem !important; /* スマホで押しやすいサイズ */
width: 100%;
}
}
@media screen and (max-width: 1024px) {
.nav-container {
position: static !important; /* 親要素の縛りを解く */
}
}
@media screen and (max-width: 768px) {
/* --- 1. Heroセクションの文字をスマホサイズに --- */
#hero, .hero {
height: auto !important; /* 固定高さをやめて中身に合わせる */
min-height: 80vh !important; /* それでも画面の8割は確保 */
padding: 80px 20px !important; /* 上下にゆとり */
width: 100% !important;
overflow: hidden !important; /* はみ出し防止 */
}
.hero-content {
width: 100% !important;
}
.hero-content h1 {
font-size: 1.8rem !important; /* 3.5remから大幅縮小 */
line-height: 1.4 !important;
word-wrap: break-word !important; /* 長い単語を折り返す */
}
.hero-content p {
font-size: 1rem !important;
margin-top: 15px !important;
}
/* --- 2. メニューを「右端」から「画面全体」へ --- */
.nav-menu {
position: fixed !important;
top: 0 !important;
left: 0 !important; /* 左端を基準にする */
right: auto !important;
width: 100vw !important;
height: 100vh !important;
transform: translateX(100%) !important; /* 最初は右に隠す */
background: #fff5eb !important; /* Heroと同じ色にして統一感 */
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
z-index: 1000 !important;
}
/* メニューが開いた時 */
.nav-menu.active {
transform: translateX(0) !important; /* 左端0まで戻す */
}
/* ロゴがスマホで大きすぎないように */
.nav-logo h1 {
font-size: 1rem !important;
}
}
@media screen and (max-width: 768px) {
/* Heroの中の文字をスマホに最適化 */
.hero-content h1 {
/* 1. サイズを劇的に小さくする */
font-size: 1.6rem !important;
/* 2. 行間を少し広げて読みやすく */
line-height: 1.5 !important;
/* 3. 画面端にぶつからないよう余白を作る */
padding: 0 15px !important;
/* 4. 文字がはみ出さないように自動改行を許可 */
white-space: normal !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
display: block !important;
width: 100% !important;
text-align: center !important;
}
.hero-content p {
font-size: 0.95rem !important;
padding: 0 10px !important;
line-height: 1.6 !important;
}
}
@media screen and (max-width: 768px) {
/* Heroの中身を完全にセンターにリセット */
.hero-content {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important; /* 外側の余白をゼロに */
padding: 0 20px !important; /* 左右に均等な20pxの遊びを作るだけ */
text-align: center !important; /* 文字を中央寄せ */
/* もし以前の設定で左に寄せる命令があった場合を解除 */
position: static !important;
transform: none !important;
left: auto !important;
}
.hero-content h1,
.hero-content p {
width: 100% !important;
margin-left: auto !important; /* 左右均等に */
margin-right: auto !important;
padding: 0 !important;
text-align: center !important; /* 強制的に中央 */
display: block !important;
}
/* ボタンがある場合も中央に */
.hero-btns {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 10px;
width: 100% !important;
margin: 20px 0 0 0 !important;
}
}
@media screen and (max-width: 1024px) {
/* 1. ヘッダー（あるいはナビゲーションの親）を最上部に固定 */
header, .navbar, .nav-container {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 60px !important; /* 高さを指定 */
background: #fff !important; /* 背景を白（またはテーマ色）で塗りつぶす */
z-index: 99999 !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 0 15px !important;
}
/* 2. ボタンをヘッダー内の右端に配置 */
.nav-toggle {
position: relative !important; /* fixedの中にいるので、ここはrelativeでOK */
display: flex !important;
z-index: 100000 !important;
margin: 0 !important;
}
/* 3. 重要：ヘッダーが固定された分、Hero画像が上に潜り込まないように余白を作る */
body {
padding-top: 60px !important;
}
}
.back-to-top {
position: fixed !important;
right: 30px !important; /* 少し内側に */
bottom: 30px !important;
width: 60px !important;
height: 60px !important;
background-color: #D4A574 !important;
color: #fff !important;
border-radius: 50% !important;
display: flex !important; /* 強制表示 */
justify-content: center !important;
align-items: center !important;
z-index: 999999 !important; /* ハンバーガーと同じくらい高く */
text-decoration: none !important;
opacity: 1 !important; /* 透明度を1にする */
visibility: visible !important; /* 可視化 */
box-shadow: 0 4px 15px rgba(0,0,0,0.4) !important;
}
@media screen and (max-width: 1024px) {
/* 1. スタッフ一人ひとりの枠を広げる */
.staff-member {
width: 100% !important;
max-width: 400px !important; /* 広げすぎないよう調整 */
margin: 0 auto 30px !important;
text-align: center;
}
/* 2. 画像を大きく・角丸にする */
.staff-member img {
width: 80% !important; /* 画面幅に対して80%の大きさ */
height: auto !important;
aspect-ratio: 1 / 1; /* 正方形を維持 */
object-fit: cover;
border-radius: 20px !important; /* 20pxで優しい角丸に */
margin-bottom: 15px;
}
}
@media screen and (max-width: 1024px) {
/* 1. 写真を「丸」から「角丸四角」へ強制変換 */
/* imgタグそのものに強力な命令を出します */
.staff-member img,
.next-staff-image img,
[class*="staff"] img {
border-radius: 20px !important; /* 丸(50%)を上書きして20pxの角丸に */
width: 100% !important;
max-width: 300px !important; /* スマホで適切なサイズ */
height: auto !important;
aspect-ratio: 1 / 1 !important; /* 正方形の四角にする */
object-fit: cover !important;
margin: 0 auto 15px !important;
display: block !important;
}
/* 2. 肩書き・名前を左寄せにする */
/* スタッフ情報の親要素を左揃えに固定 */
.staff-member,
.staff-info,
.staff-details,
.next-staff-content {
text-align: left !important;
display: block !important;
padding-left: 10px !important; /* 左端に密着しすぎないよう微調整 */
}
/* 3. 中にあるテキスト要素すべてを左寄せ */
.staff-member *,
.next-staff-content * {
text-align: left !important;
margin-left: 0 !important;
}
}
@media screen and (max-width: 1024px) {
/* 管理者のメッセージエリア全体を左寄せに強制変更 */
.manager-message {
text-align: left !important;
align-items: flex-start !important;
display: block !important; /* flexの場合、中央に寄ってしまうのを防ぐ */
padding: 0 15px !important; /* 画面端にピッタリくっつかないよう少し余白 */
}
/* 「管理者・看護師」のタグを左に */
.staff-title-tag {
display: inline-block !important; /* 横幅いっぱいにせず、中身のサイズに */
margin-left: 0 !important;
margin-right: auto !important;
text-align: left !important;
}
/* 名前（田中 花子）と挨拶文も左に */
.manager-message h3,
.manager-message .manager-greeting,
.manager-text p {
text-align: left !important;
margin-left: 0 !important;
width: 100% !important;
}
/* ローマ字部分（small）の微調整 */
.manager-message h3 small {
display: inline-block;
margin-left: 10px;
}
}
@media screen and (max-width: 1024px) {
/* 管理者やスタッフの画像を角丸四角にする */
.manager-message img,
.staff-member img,
.next-staff-image img {
border-radius: 20px !important; /* 50%（丸）から20px（角丸）へ */
aspect-ratio: 1 / 1 !important; /* 正方形 */
object-fit: cover !important;
width: 100% !important;
max-width: 320px !important; /* スマホで大きすぎないサイズ */
margin: 0 auto 20px !important; /* 画像だけは中央が綺麗です */
display: block !important;
}
}
/* 1. 枠線を点線（丸）にして、高さを揃える準備 */
.recruit-card {
border: 3px dotted #ccc !important; /* 点線を「丸」に、太めにするとより丸く見えます */
display: flex;
flex-direction: column;
height: 100%; /* 親のFlexコンテナ内で高さを一杯に広げます */
background: transparent; /* 背景を透明にすると点線が際立ちます */
box-sizing: border-box;
}
/* 2. アイコン部分を中央に配置し、高さを画像に合わせる */
.staff-image {
display: flex;
justify-content: center; /* 横方向中央 */
align-items: center; /* 縦方向中央 */
aspect-ratio: 1 / 1; /* 他の画像が正方形ならこれを指定。高さが自動で揃います */
background-color: #f9f9f9; /* 薄いグレー背景（お好みで） */
}
/* 3. 中のアイコン自体の調整 */
.recruit-placeholder i {
font-size: 3rem; /* アイコンを大きく */
color: #aaa;
}
/* 4. 下のテキスト部分も中央寄せにする場合 */
.staff-info {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1; /* 残りの高さを埋める */
padding: 15px;
}
@media screen and (max-width: 1024px) {
/* 1. 最初は右側に隠しておく */
.nav-menu {
position: fixed !important;
top: 0;
right: 0;
width: 100% !important;
height: 100vh;
background: #fff !important;
transform: translateX(100%); /* 右に隠す */
transition: 0.3s ease;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
}
/* 2. activeがついたら真ん中に戻す */
.nav-menu.active {
transform: translateX(0) !important;
opacity: 1 !important;
visibility: visible !important;
}
}
/* 1. カード全体のレイアウト（PC・スマホ共通） */
.flow-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important; /* 横方向の中央寄せ */
text-align: center !important; /* 文字の中央寄せ */
padding: 2.5rem 1.5rem !important;
width: 100% !important;
}
/* 2. 丸抜きアイコン（サービス内容と統一） */
.flow-icon {
width: 80px !important;
height: 80px !important;
background-color: #5a8d8d !important; /* メインの緑系 */
color: #fff !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 2rem !important;
margin: 0 auto 1.5rem !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
}
/* 3. タイトルと説明文（お問合せ・ご相談など）を強制中央 */
.flow-card h3,
.flow-card > p {
width: 100% !important;
text-align: center !important;
margin: 0 auto 1rem !important;
}
/* 4. 役割リスト：全体を中央に配置しつつ、中身は左右並びを死守 */
.flow-roles {
display: inline-block !important; /* 塊として扱う */
margin: 1rem auto 0 !important; /* 左右オートで中央へ */
text-align: left !important; /* リスト内部は左揃え */
width: 100% !important;
max-width: 400px; /* 広がりすぎ防止 */
}
.role-line {
display: flex !important; /* 常に左右並び */
flex-direction: row !important; /* スマホでも横並びを強制 */
align-items: flex-start !important;
margin-bottom: 12px !important;
}
/* 左側のラベル（ご家族・本人） */
.role-line span {
background: #b58d6a !important; /* サブの茶系 */
color: #fff !important;
padding: 2px 10px !important;
border-radius: 4px !important;
font-size: 0.8rem !important;
font-weight: bold !important;
margin-right: 15px !important;
flex-shrink: 0 !important; /* 圧縮禁止 */
width: 95px !important; /* 幅固定で縦を揃える */
text-align: center !important;
}
/* 右側の説明テキスト */
.role-line p,
.role-line div {
margin: 0 !important;
font-size: 0.9rem !important;
line-height: 1.5 !important;
flex: 1 !important; /* 残りの幅を全部使う */
}
/* 5. スマホ（レスポンシブ）専用の微調整 */
@media screen and (max-width: 768px) {
.flow-card {
padding: 2rem 1rem !important;
}
.role-line span {
width: 85px !important; /* スマホでは少しスリムに */
margin-right: 10px !important;
font-size: 0.75rem !important;
}
.role-line p {
font-size: 0.85rem !important;
}
}
/* 2. 「お問合せ・ご相談」というテキストそのものを狙い撃ち */
.flow-card h3,
.flow-card p,
.flow-card .flow-text, /* もしクラス名がある場合 */
.flow-card [class*="title"],
.flow-card [class*="desc"] {
width: 100% !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
display: block !important;
}
/* 3. ただし、役割リスト（左右レイアウト）だけは「左揃え」のまま「中央」に置く */
.flow-roles {
display: table !important; /* 塊にする */
margin: 1.5rem auto 0 !important; /* 塊ごと中央へ */
text-align: left !important;
width: auto !important;
}
.role-line {
display: flex !important;
flex-direction: row !important; /* スマホでも横並び */
text-align: left !important;
}
/* カレンダーを包む親要素 */
.calendar-wrapper {
width: 100%;
overflow-x: auto; /* 横スクロールを許可 */
-webkit-overflow-scrolling: touch; /* iPhoneでヌルヌル動くように */
margin-bottom: 1rem;
position: relative;
}
/* カレンダー本体 */
.calendar-table {
min-width: 600px; /* 潰れないように最低幅を確保！ */
width: 100%;
border-collapse: collapse;
}
/* スマホの時だけ「横にスクロールできます」というヒントを出す（お好みで） */
.calendar-wrapper::after {
content: "← 横スクロールできます →";
display: block;
font-size: 0.7rem;
color: #888;
text-align: center;
margin-top: 5px;
}
@media screen and (min-width: 769px) {
.calendar-wrapper::after { display: none; } /* PCでは出さない */
}
/* 1. カレンダーを包むエリア（スクロール可能にする） */
.availability-container {
width: 100%;
overflow-x: auto; /* 横スクロールを出す */
-webkit-overflow-scrolling: touch; /* スマホで滑らかに */
margin-bottom: 1.5rem;
border: 1px solid #eee; /* 枠線で見やすく */
border-radius: 8px;
}
/* 2. カレンダー本体：幅を固定して「ギュッ」となるのを防ぐ */
.availability-table {
min-width: 600px; /* スマホでも600px分は横幅を確保する */
width: 100%;
border-collapse: collapse;
background: #fff;
}
/* 3. 説明書き（凡例）が縦長にならないようにする */
.availability-notes {
display: flex !important;
flex-wrap: wrap !important; /* 入りきらない時だけ次の行へ */
justify-content: center !important;
gap: 15px !important; /* アイコン同士の隙間 */
margin-top: 1rem !important;
width: 100% !important;
}
.availability-notes span,
.availability-notes div {
white-space: nowrap !important; /* 文字が縦にならないよう「改行禁止」に */
display: flex !important;
align-items: center !important;
font-size: 0.9rem !important;
}
/* スマホでの「横スクロールしてね」という合図（お好みで） */
@media screen and (max-width: 768px) {
.availability-container::before {
content: "← 横にスクロールして確認できます →";
display: block;
font-size: 0.7rem;
color: #888;
background: #f9f9f9;
text-align: center;
padding: 5px 0;
border-bottom: 1px solid #eee;
}
}
/* 凡例エリア */
.status-legend {
display: flex !important;
flex-direction: row !important; /* 絶対に横並び */
justify-content: left !important; /* 中央寄せ */
flex-wrap: nowrap !important; /* ★絶対に折り返さない */
gap: 12px !important; /* 隙間を少し狭める */
margin: 1rem auto !important;
width: 100% !important;
}
.status-legend span {
white-space: nowrap !important; /* 文字を絶対に改行させない */
font-size: 0.8rem !important; /* スマホに合わせて少し小さく */
display: flex !important;
align-items: left !important;
}
/* 〇△× の記号部分 */
.status-legend b {
margin-right: 3px;
font-size: 1rem;
}
/* 注釈テキスト */
.update-text {
width: 100% !important;
text-align: left !important;
font-size: 0.75rem !important;
color: #888;
margin-top: 5px !important;
}
/* 極端に画面が狭いスマホ（iPhone SEなど）への対応 */
@media screen and (max-width: 380px) {
.status-legend {
gap: 8px !important; /* さらに隙間を詰める */
}
.status-legend span {
font-size: 0.75rem !important; /* 文字をさらに一回り小さく */
}
}