@charset "UTF-8";
 .p-mainVisual__slideTitle img {
max-width: 800px;
}
.p-mainVisual {
position: relative;
}
.p-mainVisual::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0px;
background-color: #F4FBF9; z-index: 10;
} .custom-menu-section .menu-wrapper {
display: flex;
flex-direction: column;
gap: 20px;
}
.menu-section {
margin-top: 60px;!important;
padding-top: 20px;!important;
}
.menu-section h2 {
margin-top: 0;!important;
margin-bottom: 32px;!important;
text-align: center;
font-size: 1.6rem;
color: #2f5e4e;
}
.menu-card {
display: flex;
border: 1px solid #ddd;
background-color: #fff;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: transform 0.3s ease;
}
.menu-card:hover {
transform: translateY(-5px);
}
.menu-card .image-wrapper {
width: 300px;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.menu-card .image-wrapper::before {
content: "";
display: block;
padding-top: 66.66%;
}
.menu-card .image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.menu-card .image-wrapper:hover img {
transform: scale(1.05);
}
.menu-card .menu-text {
padding: 20px;
flex: 1;
}
.menu-card h3 {
color: #2f5e4e;
margin-top: 0;
font-size: 1.6rem;
}
.menu-card p {
margin-bottom: 10px;
line-height: 1.6;
}
.menu-buttons {
margin-top: 12px;
}
.menu-buttons a {
display: inline-block;
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #2f5e4e;
background-color: #eef5f2;
border: 1px solid #cfe4db;
transition: background-color 0.3s ease, color 0.3s ease;
}
.menu-buttons a:hover {
background-color: #d4e0da;
color: #2f5e4e;
}
@media (max-width: 768px) {
.menu-card {
flex-direction: column;
}
.menu-card .image-wrapper {
width: 100% !important;
}
} .hover-zoom-image-wrapper,
.hover-image-wrapper,
.hover-zoom-fixed {
overflow: hidden;
border-radius: 12px;
}
.hover-zoom-image,
.hover-zoom-img,
.hover-zoom-fixed img {
width: 100%;
height: auto;
display: block;
transition: transform 0.5s ease;
object-fit: cover;
}
.hover-zoom-image-wrapper:hover .hover-zoom-image,
.hover-image-wrapper:hover .hover-zoom-img,
.hover-zoom-fixed:hover img {
transform: scale(1.05);
}
.hover-zoom-fixed {
position: relative;
padding-top: 66.666%;
}
.hover-zoom-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} .profile-image img {
width: 100%;
max-width: 320px;
height: auto;
border-radius: 14px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
display: block;
margin: 0 auto;
}
.profile-text {
background-color: #f6fbf8;
border: 1px solid #cfe4db;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.profile-text h3 {
font-size: 1.5rem;
color: #2f5e4e;
margin-bottom: 12px;
text-align: left;
}
.profile-text p {
font-size: 1rem;
line-height: 1.7;
color: #333;
text-align: left;
} .l-mainContent__inner > .post_content {
margin-top: 0;
}
.swiper-container,
.swiper-wrapper {
margin-bottom: 0 !important;
}
.page-id-2472 .l-content {
padding-top: 0 !important;
}
.post_content h2.practitioner-heading {
font-size: 1.5rem !important;
font-weight: bold;
text-align: center;
color: #2f5e4e;
margin-top: 40px;
margin-bottom: 15px;
line-height: 1.3;
letter-spacing: 0.5px;
} .wp-block-columns,
.custom-wide-section .wp-block-columns {
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 20px !important;
}
.custom-wide-section {
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 20px !important;
padding-right: 20px !important;
width: 100% !important;
box-sizing: border-box;
}
body .wp-block-group,
body .wp-block-columns,
body .l-content,
body .l-container {
max-width: 100% !important;
width: 100% !important;
margin: 0 auto !important;
padding-left: 5vw !important;
padding-right: 5vw !important;
box-sizing: border-box;
} .p-mainVisual__slideTitle img {
max-width: 800px;
}
.p-mainVisual {
position: relative;
}
.p-mainVisual::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0px;
background-color: #F4FBF9;
z-index: 10;
} .slider-section {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
max-width: 1200px;
margin: 40px auto;
padding: 40px 20px;
background-color: #eef5f2;
border-radius: 14px;
gap: 30px;
box-sizing: border-box;
}
.slider-box {
flex: 1 1 60%;
aspect-ratio: 16 / 9;
position: relative;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 1.5s ease-in-out;
z-index: 0;
}
.slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.text-box {
flex: 1 1 40%;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 24px;
border-left: 4px solid #2f5e4e;
border-radius: 0;
box-sizing: border-box;
background-color: transparent;
}
.text-box h3 {
font-size: 1.6rem;
color: #2f5e4e;
font-weight: bold;
margin-bottom: 16px;
}
.text-box p {
font-size: 1rem;
line-height: 1.8;
color: #333;
margin: 0;
}
@media (max-width: 768px) {
.slider-section {
flex-direction: column;
}
.slider-box,
.text-box {
flex: 1 1 100%;
}
.text-box {
border-left: none;
border-top: 4px solid #2f5e4e;
padding-left: 0;
padding-top: 20px;
}
}
.menu-section .menu-card:last-child {
margin-bottom: 0 !important;
}
.faq-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
.faq-heading {
margin-top: 0 !important;
}
.hero-logo {
display: block;
margin: 0 auto;
max-width: 90%;
height: auto;
}
.p-mainVisual__slideTitle {
font-family: 'Marcellus', serif !important;
font-size: 3rem !important;
font-weight: bold !important;
line-height: 1.4;
color: #ffffff !important;
text-align: center;
margin-bottom: 0 !important;
}
.hero-subtext {
font-family: 'Marcellus', serif !important;
font-size: 2rem !important;
color: #f0f0f0 !important;
line-height: 1.3;
text-align: center;
max-width: 800px;
margin: 5px auto 0 auto !important;
}
.p-mainVisual__slideTitle,
.hero-subtext {
 text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.hero-subtext {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.text-box {
   padding-top: 3px !important;
margin-top: 0 !important;
}
.slider-section {
margin-top: 0 !important;
}
}
@media (max-width: 768px) {
.l-hero,
.p-mainVisual {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
} .menu-section {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
box-sizing: border-box;
} .menu-section h2 {
font-size: 1.5rem !important;
margin-top: 0 !important;
margin-bottom: 10px !important;
text-align: center;
font-weight: bold;
color: #2f5e4e;
line-height: 1.3;
letter-spacing: 0.3px;
} .menu-card {
display: flex;
gap: 20px;
align-items: flex-start;
flex-wrap: nowrap;
margin-bottom: 40px;
background-color: #eef5f2;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
box-sizing: border-box;
}
.menu-card .img-box {
flex: 0 0 45%;
position: relative;
height: 220px;
overflow: hidden;
border-radius: 12px;
}
.menu-card .img-box img {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
display: block;
}
.menu-card:hover img {
transform: scale(1.05);
}
.menu-card .menu-text {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1 1 60%;
padding: 10px 0;
max-width: 100%;
} .menu-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 10px;
}
.menu-buttons a {
padding: 8px 16px;
border-radius: 4px;
color: #fff;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.menu-buttons a:first-child {
background-color: #3bb273;
}
.menu-buttons a:first-child:hover {
background-color: #2f5e4e;
}
.menu-buttons a:last-child {
background-color: #2f5e4e;
}
.menu-buttons a:last-child:hover {
background-color: #3bb273;
} @media (max-width: 768px) {
.menu-card {
flex-wrap: wrap;
}
.menu-card .img-box {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
}
.menu-card .img-box img {
position: relative;
height: auto;
}
.menu-card .menu-text {
flex: 1 1 100%;
}
} .review-section {
background-color: #f5fdfc;
padding: 60px 20px;
box-sizing: border-box;
width: 100%;
}
.review-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1100px;
margin: 0 auto;
box-sizing: border-box;
}
.review-card {
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
box-sizing: border-box;
}
.review-header {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 14px;
}
.review-header img {
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 50%;
border: 2px solid #88b9ac;
flex-shrink: 0;
}
.review-meta {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.review-name {
font-weight: bold;
font-size: 1.1rem;
color: #2f5e4e;
white-space: nowrap;
}
.review-flag {
font-size: 1.2rem;
}
.review-title {
font-size: 0.95rem;
font-weight: 600;
color: #567d71;
word-break: break-word;
}
.review-body {
font-size: 0.95rem;
line-height: 1.6;
color: #333;
margin-top: 8px;
word-break: break-word;
}
@media (max-width: 768px) {
.review-grid {
grid-template-columns: 1fr;
}
} .menu-section h2 {
margin-bottom: 30px !important;
}
.menu-card {
margin-top: 10px;
}
<style>
.faq-heading {
margin-top: 40px;
margin-bottom: 30px;
}
</style>
<!-- ✅ Review Section 修正済みCSS -->
<style>
.review-section {
max-width: 1300px;
margin: 10px auto 30px !important;
padding: 10px 20px !important;
background-color: #eef5f2;
border-radius: 16px;
}
.review-heading {
font-size: 1.8rem;
color: #2f5e4e;
font-weight: bold;
text-align: center;
margin-top: 10px !important;
margin-bottom: 30px;
}
.review-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto 30px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.review-grid {
grid-template-columns: 1fr;
padding: 0 10px;
}
}
.review-card {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
padding: 20px;
display: flex;
flex-direction: column;
gap: 12px;
box-sizing: border-box;
}
.review-header {
display: flex;
align-items: center;
gap: 12px;
}
.review-photo {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #88b9ac;
}
.review-meta {
display: flex;
flex-direction: column;
font-size: 0.95rem;
line-height: 1.4;
}
.review-meta .name {
font-weight: bold;
color: #2f5e4e;
}
.review-meta .country {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
}
.review-title {
font-weight: bold;
font-size: 1.05rem;
color: #567d71;
margin-top: 8px;
}
.review-text {
font-size: 0.95rem;
color: #333;
line-height: 1.5;
} .review-buttons {
display: flex;
justify-content: center;
gap: 16px;
flex-wrap: wrap;
}
.review-buttons a {
display: inline-block;
padding: 10px 20px;
background-color: #2f5e4e;
color: #fff;
border-radius: 8px;
font-weight: bold;
text-decoration: none;
transition: background-color 0.3s ease;
}
.review-buttons a:hover {
background-color: #567d71;
}
.review-section {
max-width: 1300px;
margin: 0 auto 30px !important;
 margin-top: 60px !important;
padding: 10px 20px !important;
background-color: #eef5f2;
border-radius: 16px;
}
.review-section {
margin-top: 0 !important;
padding-top: 60px !important;
}
.post_content {
overflow: visible !important;
}
.google-map-section .map-wrapper {
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 0 20px !important;
} .contact-info-card {
flex: 1 1 40%;
width: 100%;
height: 100%;
padding: 30px;
background-color: #f4f9f8;
border-radius: 12px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 18px;
line-height: 1.6;
letter-spacing: 0.1px;
color: #2f5e4e;
} .contact-info-card img {
max-width: 400px;
height: auto;
margin-bottom: 16px;
display: block;
} .contact-info-card p strong {
display: block;
font-size: 1.5em;
margin-bottom: 4px;
letter-spacing: 0px;
} @media (max-width: 768px) {
.contact-info-card {
font-size: 16px;
padding: 20px;
}
.contact-info-card img {
max-width: 240px;
margin-bottom: 12px;
}
} .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
border: 2px solid #88b9ac;
border-radius: 8px;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-size: 1rem;
} .wpcf7 input[type="submit"] {
background-color: #88b9ac;
color: #fff;
font-weight: bold;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1.05rem;
display: block;
margin: 20px auto 0; transition: background-color 0.3s ease;
} .wpcf7 input[type="submit"]:hover {
background-color: #6ca59a;
} .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea 
{
color: #ffffff !important; border: 2px solid #88b9ac !important;
border-radius: 8px;
padding: 10px;
width: 100%;
box-sizing: border-box;
font-size: 1rem;
} .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
color: #000000 !important; } .slider-wrapper {
overflow: hidden;
background: #f7fdfb;
padding: 10px 0;
border-radius: 16px;
margin: 40px auto;
position: relative;
max-width: 1300px;
}
.slider-track {
display: flex;
width: max-content;
animation: scroll-left 70s linear infinite;
}
.slider-item {
flex: 0 0 auto;
width: 300px;
margin: 0 10px;
border-radius: 12px;
overflow: hidden;
background: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.aspect-ratio-box {
position: relative;
width: 100%;
padding-top: 75%; overflow: hidden;
}
.aspect-ratio-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.slider-caption {
padding: 10px;
font-size: 0.9rem;
font-weight: 500;
color: #2f5e4e;
text-align: center;
background: #f0f9f6;
}
@keyframes scroll-left {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
.more-button {
display: block;
width: fit-content;
margin: 20px auto 0;
padding: 10px 24px;
background-color: #88b9ac;
color: white;
font-weight: bold;
text-decoration: none;
border-radius: 999px;
transition: background-color 0.3s ease;
}
.more-button:hover {
background-color: #6da59a;
} .custom-button-section {
padding-top: 40px !important; padding-bottom: 60px !important; margin-top: 0 !important;
margin-bottom: 60px !important; background-color :#eef5f2; border-radius: 14px;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
position: relative;
overflow: hidden;
}
<!-- ✅ 背景なし・ボタンのみ（中央寄せ） -->
<div style="text-align: center; padding: 40px 0;">
<h2 style="font-size: 1.5rem; color: #2f5e4e; margin-bottom: 24px;">Quick Booking</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; max-width: 800px; margin: 0 auto;">
<a href="#" style="
display: block;
background-color: #88b9ac;
color: white;
padding: 12px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
" onmouseover="this.style.backgroundColor='#6ea195'" onmouseout="this.style.backgroundColor='#88b9ac'">Acupuncture & Shiatsu (90min)</a>
<a href="#" style="...同様...">Oil Massage (90min)</a>
<a href="#" style="...同様...">Oil Massage (120min)</a>
<a href="#" style="...同様...">Cupping + Shiatsu (70min)</a>
<a href="#" style="...同様...">Shiatsu Massage (60min)</a>
<a href="#" style="...同様...">Cosmetic Acupuncture (70min)</a>
<a href="#" style="...同様...">Herbal Peeling (60min)</a>
<a href="#treatments" style="...同様...">View Full Menu</a>
</div>
</div>
.booking-button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.booking-btn {
display: block;
background-color: #2f5e4e;
color: white !important;
padding: 12px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: bold;
transition: background-color 0.3s ease;
}
.booking-btn:hover {
background-color: #23453a;
}
.booking-btn.last {
background-color: #e4a600;
color: white !important;
}
.booking-btn.last:hover {
background-color: #c79600;
}
.quick-booking-heading {
font-size: 1.5rem;
color: #2f5e4e;
margin-bottom: 24px;
}
.quick-booking-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
max-width: 1300px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.quick-booking-btn {
display: block;
background-color: #2f5e4e;
color: white !important;
padding: 14px 20px;
border-radius: 8px;
font-size: 1rem;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 1.4;
transition: background-color 0.3s ease;
}
.quick-booking-btn:hover {
background-color: #1e3f36;
}
.quick-booking-btn.last {
background-color: #e4a600;
color: white !important;
}
.quick-booking-btn.last:hover {
background-color: #c79600;
}
<style> .menu-card .img-box {
width: 100%;
max-width: 100%;
display: block;
box-sizing: border-box;
margin-bottom: 12px;
}
.menu-card .img-box img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 12px;
}
</style> .menu-card .img-box {
flex: 0 0 45% !important;
position: relative !important;
height: 220px !important;
overflow: hidden !important;
border-radius: 12px !important;
display: block !important;
}
.menu-card .img-box img {
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
opacity: 1 !important;
visibility: visible !important;
}
.menuCardX {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 40px;
background-color: #eef5f2;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.menuCardX .imgBoxX {
flex: 1 1 40%;
max-width: 300px;
overflow: hidden;
border-radius: 12px;
}
.menuCardX .imgBoxX img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
border-radius: 12px;
}
.menuCardX .menuTextX {
flex: 1 1 60%;
padding-left: 20px;
}
.menuCardX .menuTextX h3 {
font-size: 1.5rem;
color: #2f5e4e;
margin-bottom: 10px;
}
.menuCardX .menuTextX p {
font-size: 1rem;
line-height: 1.6;
color: #333;
}
.menuCardX .menuTextX strong {
display: block;
margin-top: 10px;
font-weight: bold;
color: #2f5e4e;
}
.menuButtonsX {
margin-top: 14px;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.menuButtonsX a {
padding: 10px 16px;
background-color: #2f5e4e;
color: white;
text-decoration: none;
font-weight: bold;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.menuButtonsX a:hover {
background-color: #3bb273;
}
@media (max-width: 768px) {
.menuCardX {
flex-direction: column;
}
.menuCardX .imgBoxX {
max-width: 100%;
}
.menuCardX .menuTextX {
padding-left: 0;
padding-top: 20px;
}
} .menuCardX {
max-width: 1100px;
margin: 0 auto 40px;
} .menuButtonsX a:first-child {
background-color: #3bb273;
}
.menuButtonsX a:first-child:hover {
background-color: #2f5e4e;
}
.menuButtonsX a:first-child {
background-color: #3bb273;
}
.menuButtonsX a:first-child:hover {
background-color: #88b9ac; }
.faq-section {
max-width: 1000px !important;
margin: 0 auto 60px !important; padding: 30px 20px 20px !important; box-sizing: border-box;
}
.faq-heading {
text-align: center !important;
color: #2f5e4e;
font-size: 1.8rem;
margin-top: 40px !important;
margin-bottom: 30px !important;
font-family: 'Noto Sans', sans-serif;
}
.faqSectionX {
max-width: 1000px;
margin: 0 auto 60px;
padding: 30px 20px 20px;
box-sizing: border-box;
}
.faqHeadingX {
text-align: center;
color: #2f5e4e;
font-size: 1.8rem;
margin-top: 40px;
margin-bottom: 30px;
font-family: 'Noto Sans', sans-serif;
}
.faqAccordionX {
background-color: #e6f4ea;
color: #2f5e4e;
cursor: pointer;
padding: 14px 20px;
width: 100%;
text-align: left;
font-size: 16px;
font-weight: 600;
border: 2px solid #c1dec9;
border-radius: 10px;
margin-top: 10px;
transition: background-color 0.3s ease;
position: relative;
font-family: 'Noto Sans', sans-serif;
}
.faqAccordionX::after {
content: "▼";
font-size: 13px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
}
.faqAccordionX.active::after {
transform: translateY(-50%) rotate(180deg);
}
.faqAccordionX:hover {
background-color: #d2ead7;
}
.faqAccordionX.active {
background-color: #c7e3d3;
}
.faqPanelX {
padding: 15px 20px;
background-color: #fff;
border-left: 2px solid #c1dec9;
border-right: 2px solid #c1dec9;
border-bottom: 2px solid #c1dec9;
border-radius: 0 0 10px 10px;
font-size: 15.5px;
line-height: 1.7;
display: none;
animation: fadeIn 0.3s ease;
font-family: 'Noto Sans', sans-serif;
}
@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
} .my-accordion02-02 .swell-block-accordion__title{
background: #e6f4ea;
}
.faq-section {
max-width: 1000px !important;
margin: 0 auto !important;
padding: 30px 20px 20px !important;
}
.faq-heading {
text-align: center !important;
color: #2f5e4e;
font-size: 1.8rem;
margin-top: 40px !important;
margin-bottom: 10px !important;
font-family: 'Noto Sans', sans-serif;
}
.accordion {
background-color: #e6f4ea;
color: #2f5e4e;
cursor: pointer;
padding: 14px 20px;
width: 100%;
text-align: left;
font-size: 16px;
font-weight: 600;
border: 2px solid #c1dec9;
border-radius: 10px;
margin-top: 10px;
position: relative;
font-family: 'Noto Sans', sans-serif;
}
.accordion::after {
content: "▼";
font-size: 13px;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
transition: transform 0.3s ease;
}
.accordion.active::after {
transform: translateY(-50%) rotate(180deg);
}
.accordion:hover {
background-color: #d2ead7;
}
.accordion.active {
background-color: #c7e3d3;
}
.panel {
padding: 15px 20px;
background-color: #fff;
border-left: 2px solid #c1dec9;
border-right: 2px solid #c1dec9;
border-bottom: 2px solid #c1dec9;
border-radius: 0 0 10px 10px;
font-size: 15.5px;
line-height: 1.7;
display: none;
animation: fadeIn 0.3s ease;
font-family: 'Noto Sans', sans-serif;
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
html {
scroll-behavior: smooth;
}
@media screen and (max-width: 767px) {
.your-logo-card-class {
padding: 30px 20px;
font-size: 1.2rem;
text-align: center;
}
.contact-info-card {
width: 94%;
max-width: none;
margin: 0 auto;
}
.map-wrapper {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.map-wrapper iframe {
display: block;
margin: 0 auto;
border: none;
}
footer,
.site-footer,
.footer,
.footer-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
body.page-id-2 {
background-image: url(https://example.com/path/to/your-image.jpg);
background-size: cover;
background-position: center;
}
body:not(.page-id-2) {
background-image: none !important;
background-color: #fff !important;
}
.custom-fullwidth-hero {
width: 100vw;
max-width: 100vw;
position: relative;
left: calc(-50vw + 50%);
margin: 0 auto;
overflow: hidden;
z-index: 1;
}
.custom-fullwidth-hero img {
width: 100vw;
height: auto;
display: block;
margin: 0 auto;
} .hero-caption-box {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.5); color: #fff;
padding: 20px 30px;
border-radius: 8px;
text-align: center;
max-width: 80%;
opacity: 0;
animation: fadeInCaption 1.5s ease-in-out 0.5s forwards;
} @keyframes fadeInCaption {
0% {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
} .hero-caption-box .cta-button {
margin-top: 12px;
display: inline-block;
padding: 10px 20px;
background-color: #88b9ac;
color: #fff;
text-decoration: none;
border-radius: 6px;
font-weight: bold;
transition: background-color 0.3s ease;
}
.hero-caption-box .cta-button:hover {
background-color: #6fa296;
}
.hero-caption-box {
position: absolute;
bottom: 15%;
left: 50%;
transform: translateX(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 20px 30px;
border-radius: 8px;
text-align: center;
max-width: 80%; opacity: 1;
transform: translateX(-50%) translateY(0);
}
body .hero-caption-box {
position: absolute !important;
bottom: 10% !important;
left: 50% !important;
transform: translateX(-50%) !important;
width: 300px !important;
height: 300px !important;
background-color: rgba(0, 0, 0, 0.8) !important;
color: white !important;
border-radius: 12px !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
opacity: 0 !important;
padding: 20px !important;
box-sizing: border-box !important;
animation: fadeIn 1.5s ease-in-out forwards !important;
}
body .hero-caption-box .caption-subtitle {
margin: 0 0 10px !important;
font-size: 1.4rem !important;
font-weight: 400 !important;
letter-spacing: 0.5px !important;
}
body .hero-caption-box .caption-title {
margin: 0 0 15px !important;
font-size: 1.4rem !important;
font-weight: bold !important;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateX(-50%) translateY(20px);
}
100% {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
input.uniform,
textarea.uniform {
width: 100%;
padding: 10px 14px;
font-size: 1rem;
line-height: 1.6;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
margin-bottom: 16px;
}
textarea.uniform {
height: 120px;
resize: none;
}
.wpcf7 input[type="submit"] {
background-color: #2f5e4e;
color: #fff;
font-weight: bold;
border: none;
padding: 12px 24px;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.wpcf7 input[type="submit"]:hover {
background-color: #256d59;
}
.hero-tagline {
text-align: center;
font-size: 1.6rem;
color: #2f5e4e;
margin: 20px 0 30px 0;
font-weight: bold;
} .acu-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 10px 20px;
max-width: 1000px;
margin: 0 auto;
box-sizing: border-box;
line-height: 1.7;
color: #2f2f2f;
font-size: 1rem;
align-items: flex-start;
} .acu-text {
flex: 1 1 55%;
min-width: 300px;
} .acu-text .subheading {
color: #2f5e4e;
font-size: 1.6rem;
margin-bottom: 16px;
} .acu-image {
flex: 1 1 40%;
min-width: 240px;
}
.acu-image img {
width: 100%;
height: auto;
border-radius: 12px;
}
.hero-tagline {
text-align: center;
font-size: 1.6rem;
color: #2f5e4e;
margin: 20px 0 30px 0;
font-weight: bold;
}
.acu-section {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 10px 20px;
max-width: 1000px;
margin: 0 auto;
box-sizing: border-box;
line-height: 1.7;
color: #2f2f2f;
font-size: 1rem;
align-items: flex-start;
}
.acu-text {
flex: 1 1 55%;
min-width: 300px;
}
.acu-text .subheading {
color: #2f5e4e;
font-size: 1.6rem;
margin-bottom: 16px;
}
.acu-image {
flex: 1 1 40%;
min-width: 240px;
}
.acu-image img {
width: 100%;
height: auto;
border-radius: 12px;
}
.footer { height: 60px; }