/* =========================================================================
* Ueda Consult — Mockup CSS
* Lightning 子テーマ実装前の HTML プロトタイプ用スタイル
* ========================================================================= */
/* ---------- 1. Design tokens ---------- */
:root {
--color-primary: #0A2540;
--color-primary-hover: #143356;
--color-accent: #C9A961;
--color-accent-hover: #B89752;
--color-cta-line: #06C755;
--color-text: #1A1A1A;
--color-text-mute: #6B7280;
--color-text-invert: #FFFFFF;
--color-bg: #FFFFFF;
--color-bg-alt: #F7F8FA;
--color-bg-dark: #061A2E;
--color-line: #E3E6EB;
--font-jp: "Noto Sans JP", "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
--font-en-serif: "Cormorant Garamond", "Playfair Display", serif;
--font-price: "Libre Baskerville", "Cormorant Garamond", "Playfair Display", serif;
--fs-hero: 32px;
--fs-h1: 26px;
--fs-h2: 22px;
--fs-h3: 18px;
--fs-body: 16px;
--fs-small: 14px;
--fs-en-sub: 12px;
--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;
--space-7: 64px;
--space-8: 96px;
--space-section: clamp(64px, 10vw, 120px);
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
--radius-pill: 9999px;
--shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06);
--shadow-md: 0 4px 12px rgba(10, 37, 64, 0.10);
--shadow-lg: 0 12px 32px rgba(10, 37, 64, 0.12);
--container-max: 1200px;
--container-padding: clamp(16px, 4vw, 32px);
--header-h: 80px;
}
@media (min-width: 768px) {
:root {
--header-h: 96px;
--fs-hero: 56px;
--fs-h1: 40px;
--fs-h2: 32px;
--fs-h3: 22px;
--fs-body: 17px;
--fs-en-sub: 14px;
}
}
@media (min-width: 1280px) {
:root {
--header-h: 108px;
}
}
/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-jp);
font-size: var(--fs-body);
line-height: 1.8;
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--color-accent); }
ul, ol { padding: 0; margin: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
/* ---------- 3. Layout primitives ---------- */
.container {
max-width: var(--container-max);
margin: 0 auto;
padding-left: var(--container-padding);
padding-right: var(--container-padding);
}
.section {
padding-top: var(--space-section);
padding-bottom: var(--space-section);
}
.section--alt { background: var(--color-bg-alt); }
.section--dark {
background: var(--color-primary);
color: var(--color-text-invert);
}
.section--dark .section-heading__jp { color: var(--color-text-invert); }
.section--dark a { color: var(--color-text-invert); }
/* ---------- 4. Section heading ---------- */
.section-heading {
text-align: center;
margin-bottom: var(--space-6);
}
.section-heading__en {
font-family: var(--font-en-serif);
font-size: var(--fs-en-sub);
font-weight: 500;
letter-spacing: 0.25em;
color: var(--color-accent);
text-transform: uppercase;
display: block;
margin-bottom: var(--space-2);
}
.section-heading__en::before,
.section-heading__en::after {
content: "—";
margin: 0 var(--space-2);
}
.section-heading__jp {
font-size: var(--fs-h2);
font-weight: 700;
color: var(--color-primary);
margin: 0 0 var(--space-3);
}
.section-heading__divider {
display: inline-block;
width: 40px;
height: 2px;
background: var(--color-accent);
}
/* ---------- 5. Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border-radius: var(--radius-md);
font-weight: 700;
font-size: var(--fs-body);
line-height: 1.4;
border: 2px solid transparent;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-primary); color: var(--color-text-invert); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-text-invert); border-color: var(--color-primary-hover); }
.btn--accent { background: transparent; color: var(--color-primary); border-color: var(--color-accent); }
.btn--accent:hover { background: var(--color-accent); color: var(--color-text-invert); }
.hero .btn--accent,
.cta-banner .btn--accent,
.section--dark .btn--accent { color: var(--color-text-invert); background: rgba(255, 255, 255, 0.04); }
.hero .btn--accent:hover,
.cta-banner .btn--accent:hover,
.section--dark .btn--accent:hover { background: var(--color-accent); color: var(--color-primary); }
.btn--line { background: var(--color-cta-line); color: var(--color-text-invert); border-color: var(--color-cta-line); }
.btn--line:hover { background: #05B14B; color: var(--color-text-invert); border-color: #05B14B; }
.btn--ghost { background: transparent; color: var(--color-text-invert); border-color: var(--color-text-invert); }
.btn--ghost:hover { background: var(--color-text-invert); color: var(--color-primary); }
.btn--lg { padding: var(--space-4) var(--space-6); font-size: 18px; }
/* ---------- 6. Header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--color-bg);
border-bottom: 1px solid var(--color-line);
height: var(--header-h);
display: flex;
align-items: center;
transition: box-shadow 0.2s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.site-header__logo {
flex-shrink: 0;
max-width: 60%;
}
.site-header__logo img {
max-height: 56px;
max-width: 100%;
width: auto;
display: block;
}
@media (min-width: 768px) {
.site-header__logo { max-width: 300px; }
.site-header__logo img { max-height: 60px; }
}
@media (min-width: 1024px) {
.site-header__logo { max-width: 320px; }
.site-header__logo img { max-height: 64px; }
}
@media (min-width: 1280px) {
.site-header__logo { max-width: 360px; }
.site-header__logo img { max-height: 70px; }
}
.site-nav__link { white-space: nowrap; }
.site-nav__list { flex-wrap: nowrap; }
.site-nav { display: none; }
.site-nav__list {
display: flex;
gap: var(--space-4);
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__link {
font-size: var(--fs-small);
font-weight: 500;
color: var(--color-primary);
position: relative;
padding: var(--space-2) 0;
}
.site-nav__link:hover { color: var(--color-accent); }
.site-nav__link.has-dropdown::after {
content: "▾";
margin-left: 4px;
font-size: 10px;
}
.site-header__cta { display: none; }
.hamburger {
background: transparent;
border: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
}
.hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--color-primary);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-3);
margin-left: var(--space-4);
}
.header-tel {
font-weight: 700;
color: var(--color-primary);
font-size: 18px;
}
@media (min-width: 1024px) {
.site-nav { display: block; }
.site-header__cta { display: inline-flex; }
.hamburger { display: none; }
}
/* ---------- 7. Hero ---------- */
.hero {
position: relative;
background: var(--color-primary);
color: var(--color-text-invert);
overflow: hidden;
padding: var(--space-7) 0;
min-height: 600px;
display: flex;
align-items: center;
}
.hero__bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0.35;
z-index: 0;
}
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(10,37,64,0.85) 0%, rgba(10,37,64,0.6) 100%);
}
.hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
align-items: center;
}
@media (min-width: 768px) {
.hero__inner { grid-template-columns: 7fr 3fr; }
}
.hero__en {
font-family: var(--font-en-serif);
letter-spacing: 0.25em;
color: var(--color-accent);
font-size: var(--fs-en-sub);
display: block;
margin-bottom: var(--space-3);
text-transform: uppercase;
}
.hero__title {
font-size: var(--fs-hero);
line-height: 1.2;
font-weight: 700;
margin: 0 0 var(--space-4);
}
.hero__lead {
font-size: var(--fs-body);
margin-bottom: var(--space-5);
opacity: 0.95;
max-width: 540px;
}
.hero__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-bottom: var(--space-5);
}
.hero__badge {
background: rgba(255, 255, 255, 0.08);
border: 1px solid var(--color-accent);
color: var(--color-text-invert);
padding: 6px 12px;
border-radius: var(--radius-pill);
font-size: var(--fs-small);
}
.hero__cta {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.hero__portrait {
width: 100%;
max-width: 320px;
margin: 0 auto;
border-radius: var(--radius-lg);
border: 4px solid var(--color-accent);
background: var(--color-bg-alt);
aspect-ratio: 4/5;
background-size: cover;
background-position: center;
}
/* ---------- 8. Strengths (4 cards) ---------- */
.strengths {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .strengths { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .strengths { grid-template-columns: repeat(4, 1fr); } }
.strength-card {
background: var(--color-bg);
border-radius: var(--radius-md);
padding: var(--space-5);
border-top: 3px solid var(--color-accent);
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.strength-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.strength-card__icon {
font-size: 32px;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.strength-card__num {
font-family: var(--font-en-serif);
font-size: 36px;
font-weight: 700;
color: var(--color-accent);
letter-spacing: 0.05em;
line-height: 1;
margin-bottom: var(--space-3);
display: block;
position: relative;
padding-bottom: var(--space-2);
}
.strength-card__num::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 24px;
height: 1px;
background: var(--color-accent);
}
.strength-card__title {
font-size: var(--fs-h3);
color: var(--color-primary);
margin: 0 0 var(--space-2);
font-weight: 700;
}
.strength-card__text {
font-size: var(--fs-small);
color: var(--color-text-mute);
margin: 0;
line-height: 1.7;
}
/* ---------- 9. Service cards (3 columns) ---------- */
.services {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .services { grid-template-columns: repeat(3, 1fr); } }
.service-card {
background: var(--color-bg);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.service-card__image {
width: 100%;
height: 200px;
background-size: cover;
background-position: center;
background-color: var(--color-bg-alt);
}
.service-card__body {
padding: var(--space-4);
display: flex;
flex-direction: column;
flex: 1;
}
.service-card__en {
font-family: var(--font-en-serif);
color: var(--color-accent);
font-size: var(--fs-en-sub);
letter-spacing: 0.2em;
margin-bottom: var(--space-1);
text-transform: uppercase;
}
.service-card__title {
font-size: var(--fs-h3);
color: var(--color-primary);
margin: 0 0 var(--space-2);
font-weight: 700;
}
.service-card__text {
font-size: var(--fs-small);
color: var(--color-text-mute);
flex: 1;
margin-bottom: var(--space-3);
line-height: 1.7;
}
.service-card__more {
color: var(--color-accent);
font-weight: 700;
font-size: var(--fs-small);
display: inline-flex;
align-items: center;
gap: 4px;
}
.service-card__more::after { content: "→"; }
/* ---------- 10. Greeting ---------- */
.greeting {
display: grid;
gap: var(--space-5);
grid-template-columns: 1fr;
align-items: center;
}
@media (min-width: 768px) { .greeting { grid-template-columns: 1fr 1.5fr; } }
.greeting__photo {
width: 100%;
max-width: 320px;
margin: 0 auto;
aspect-ratio: 1;
border-radius: 50%;
background: var(--color-bg);
border: 4px solid var(--color-accent);
background-size: cover;
background-position: center;
}
.greeting__text p {
margin: 0 0 var(--space-3);
line-height: 1.9;
}
.greeting__video {
margin-top: var(--space-4);
background: var(--color-bg-dark);
color: var(--color-text-invert);
padding: var(--space-5);
border-radius: var(--radius-md);
text-align: center;
font-size: var(--fs-small);
border: 1px dashed rgba(255,255,255,0.3);
}
.greeting__video span { display: block; opacity: 0.6; margin-bottom: 4px; }
/* ---------- 11. Flow (5 steps) ---------- */
.flow {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .flow { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); } }
@media (min-width: 1024px) { .flow { grid-template-columns: repeat(7, 1fr); gap: var(--space-2); } }
.flow-step {
text-align: center;
position: relative;
}
.flow-step__num {
width: 56px;
height: 56px;
background: var(--color-primary);
color: var(--color-accent);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-en-serif);
font-size: 22px;
font-weight: 700;
margin-bottom: var(--space-3);
border: 2px solid var(--color-accent);
}
.flow-step__title {
font-size: var(--fs-h3);
color: var(--color-primary);
margin: 0 0 var(--space-2);
font-weight: 700;
}
.flow-step__text {
font-size: var(--fs-small);
color: var(--color-text-mute);
margin: 0;
line-height: 1.7;
}
@media (min-width: 768px) {
.flow-step:not(:last-child)::after {
content: "";
position: absolute;
top: 28px;
right: -16px;
width: 32px;
height: 1px;
background: var(--color-accent);
}
}
/* ---------- 12. Pricing ---------- */
.pricing-block {
background: var(--color-bg);
border-radius: var(--radius-md);
border: 1px solid var(--color-line);
overflow: hidden;
margin-bottom: var(--space-4);
}
.pricing-block__header {
background: var(--color-primary);
color: var(--color-text-invert);
padding: var(--space-3) var(--space-5);
font-weight: 700;
font-size: var(--fs-h3);
}
.pricing-block__list {
padding: var(--space-3) var(--space-5);
}
.pricing-block__item {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--color-line);
}
.pricing-block__item:last-child { border-bottom: 0; }
.pricing-block__name { color: var(--color-text); }
.pricing-block__price {
color: var(--color-accent);
font-weight: 700;
font-family: var(--font-price);
font-size: 20px;
white-space: nowrap;
font-feature-settings: "tnum" 1, "lnum" 1;
}
@media (max-width: 600px) {
.pricing-block__price { font-size: 17px; }
}
.pricing-note {
text-align: center;
color: var(--color-text-mute);
font-size: var(--fs-small);
margin-top: var(--space-4);
}
/* ---------- 13. FAQ ---------- */
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
background: var(--color-bg);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
overflow: hidden;
}
.faq-item__question {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-4);
cursor: pointer;
font-weight: 700;
color: var(--color-primary);
}
.faq-item__question::after {
content: "+";
font-size: 24px;
color: var(--color-accent);
transition: transform 0.2s ease;
}
.faq-item.open .faq-item__question::after { transform: rotate(45deg); }
.faq-item__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0 var(--space-4);
color: var(--color-text-mute);
line-height: 1.9;
}
.faq-item.open .faq-item__answer {
max-height: 600px;
padding: 0 var(--space-4) var(--space-4);
}
/* ---------- 14. News list ---------- */
.news-list { max-width: 800px; margin: 0 auto; }
.news-item {
display: grid;
grid-template-columns: auto auto 1fr;
gap: var(--space-3);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-line);
align-items: center;
}
.news-item__date {
font-family: var(--font-en-serif);
color: var(--color-text-mute);
font-size: var(--fs-small);
white-space: nowrap;
}
.news-item__cat {
background: transparent;
border: 1px solid var(--color-accent);
color: var(--color-accent);
padding: 2px 10px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 700;
white-space: nowrap;
}
.news-item__title {
font-size: var(--fs-body);
color: var(--color-primary);
margin: 0;
}
@media (max-width: 600px) {
.news-item { grid-template-columns: 1fr; gap: var(--space-1); }
}
/* ---------- 15. Blog cards ---------- */
.blog-grid {
display: grid;
gap: var(--space-4);
grid-template-columns: 1fr;
}
@media (min-width: 600px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card {
background: var(--color-bg);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.blog-card__image {
width: 100%;
height: 180px;
background-size: cover;
background-position: center;
background-color: var(--color-bg-alt);
}
.blog-card__body { padding: var(--space-3); }
.blog-card__cat {
display: inline-block;
background: var(--color-bg-alt);
color: var(--color-primary);
padding: 2px 8px;
border-radius: var(--radius-sm);
font-size: 11px;
font-weight: 700;
margin-bottom: var(--space-2);
}
.blog-card__title {
font-size: var(--fs-small);
color: var(--color-primary);
margin: 0 0 var(--space-2);
line-height: 1.5;
font-weight: 700;
}
.blog-card__date {
font-family: var(--font-en-serif);
color: var(--color-text-mute);
font-size: 12px;
}
/* ---------- 16. Access ---------- */
.access {
display: grid;
gap: var(--space-5);
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .access { grid-template-columns: 1.4fr 1fr; } }
.access__map {
width: 100%;
height: 360px;
border: 0;
border-radius: var(--radius-md);
background: var(--color-bg-alt);
}
.access__info dt { font-weight: 700; color: var(--color-primary); margin-top: var(--space-3); }
.access__info dd { margin: 0; color: var(--color-text-mute); }
/* ---------- 17. Footer ---------- */
.site-footer {
background: var(--color-bg-dark);
color: var(--color-text-invert);
padding: var(--space-7) 0 var(--space-5);
font-size: var(--fs-small);
}
.site-footer a { color: var(--color-text-invert); opacity: 0.85; }
.site-footer a:hover { color: var(--color-accent); opacity: 1; }
.footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
margin-bottom: var(--space-5);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-brand img { max-width: 280px; margin-bottom: var(--space-3); }
.footer-brand p { margin: 0 0 var(--space-2); opacity: 0.85; line-height: 1.7; }
.footer-col h4 {
font-size: var(--fs-small);
font-family: var(--font-en-serif);
letter-spacing: 0.2em;
color: var(--color-accent);
margin: 0 0 var(--space-3);
text-transform: uppercase;
font-weight: 600;
}
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
padding-top: var(--space-4);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-3);
align-items: center;
}
.footer-social {
display: flex;
gap: var(--space-3);
}
.footer-social a {
width: 36px;
height: 36px;
border-radius: 50%;
background: rgba(255,255,255,0.08);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ---------- 18. Floating CTA (mobile) ---------- */
.floating-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: none;
z-index: 99;
box-shadow: var(--shadow-lg);
}
.floating-cta a {
flex: 1;
padding: 14px;
text-align: center;
color: var(--color-text-invert);
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-size: var(--fs-small);
}
.floating-cta a:first-child { background: var(--color-cta-line); }
.floating-cta a:last-child { background: var(--color-primary); }
@media (max-width: 1023px) {
.floating-cta { display: flex; }
body { padding-bottom: 56px; }
}
/* ---------- 19. CTA banner ---------- */
.cta-banner {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-dark) 100%);
color: var(--color-text-invert);
padding: var(--space-7) var(--space-4);
border-radius: var(--radius-md);
text-align: center;
}
.cta-banner h2 {
color: var(--color-text-invert);
font-size: var(--fs-h2);
margin: 0 0 var(--space-3);
}
.cta-banner p { margin: 0 0 var(--space-5); opacity: 0.9; }
.cta-banner__buttons {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
justify-content: center;
}
/* =========================================================================
* 21. Polish layer — samurai-law / koberegency 寄せのリッチ化
* ========================================================================= */
/* セクション余白の拡張 */
:root { --space-section: clamp(80px, 12vw, 160px); }
.section { position: relative; overflow: hidden; }
.section > .container { position: relative; z-index: 1; }
/* 巨大な英文背景タイポ（セクションごとの装飾） */
.section-bg-letter {
position: absolute;
font-family: var(--font-en-serif);
font-size: clamp(120px, 22vw, 320px);
font-weight: 700;
color: var(--color-primary);
opacity: 0.04;
letter-spacing: -0.04em;
line-height: 0.85;
pointer-events: none;
user-select: none;
z-index: 0;
white-space: nowrap;
}
.section-bg-letter--right { right: -0.05em; top: 50%; transform: translateY(-50%); }
.section-bg-letter--left { left: -0.05em; top: 50%; transform: translateY(-50%); }
.section--alt .section-bg-letter { color: var(--color-accent); opacity: 0.05; }
/* ヒーロー強化 */
.hero {
min-height: 720px;
padding: var(--space-8) 0;
}
.hero__bg::after {
background: linear-gradient(135deg, rgba(10,37,64,0.94) 0%, rgba(10,37,64,0.78) 45%, rgba(10,37,64,0.5) 100%);
}
.hero__inner {
position: relative;
z-index: 1;
}
.hero__en {
font-size: clamp(13px, 1.4vw, 17px);
letter-spacing: 0.35em;
margin-bottom: var(--space-4);
}
.hero__en::before {
content: "";
display: inline-block;
width: 36px;
height: 1px;
background: var(--color-accent);
vertical-align: middle;
margin-right: var(--space-3);
}
.hero__title {
font-size: clamp(26px, 4.6vw, 56px);
letter-spacing: -0.01em;
line-height: 1.3;
margin-bottom: var(--space-5);
}
@media (max-width: 600px) {
.hero__title { font-size: clamp(24px, 6vw, 30px); line-height: 1.35; }
}
.hero__lead {
font-size: clamp(15px, 1.4vw, 18px);
line-height: 2;
margin-bottom: var(--space-6);
}
.hero__bg-letter {
position: absolute;
right: -0.08em;
bottom: -0.18em;
font-family: var(--font-en-serif);
font-size: clamp(180px, 30vw, 480px);
font-weight: 700;
color: var(--color-accent);
opacity: 0.06;
letter-spacing: -0.04em;
line-height: 0.85;
pointer-events: none;
z-index: 0;
}
/* セクション見出しの装飾強化 */
.section-heading { margin-bottom: var(--space-7); }
.section-heading__en {
font-size: clamp(13px, 1.4vw, 16px);
letter-spacing: 0.35em;
margin-bottom: var(--space-3);
}
.section-heading__en::before,
.section-heading__en::after { content: none; }
.section-heading__en::before {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--color-accent);
vertical-align: middle;
margin-right: var(--space-3);
}
.section-heading__en::after {
content: "";
display: inline-block;
width: 32px;
height: 1px;
background: var(--color-accent);
vertical-align: middle;
margin-left: var(--space-3);
}
.section-heading__jp {
font-size: clamp(28px, 4vw, 44px);
letter-spacing: 0.04em;
line-height: 1.4;
margin-bottom: var(--space-3);
}
/* 強み 4 箇条のさらなる作り込み */
.strength-card {
padding: var(--space-6) var(--space-5);
border-top: 0;
border-left: 1px solid var(--color-line);
border-radius: 0;
box-shadow: none;
background: transparent;
position: relative;
}
.strength-card:first-child { border-left: 0; }
.strength-card:hover {
background: var(--color-bg);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
.strength-card__num {
font-size: clamp(40px, 4vw, 56px);
margin-bottom: var(--space-4);
}
.strength-card__title {
font-size: clamp(17px, 1.6vw, 20px);
margin-bottom: var(--space-3);
}
@media (max-width: 1023px) {
.strength-card { border-left: 0; border-top: 1px solid var(--color-line); }
.strength-card:first-child { border-top: 0; }
}
/* 業務カードの装飾追加 */
.service-card__image {
height: 240px;
position: relative;
}
.service-card__image::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(10,37,64,0.55) 100%);
}
.service-card__body { padding: var(--space-5); }
.service-card__en {
font-size: 13px;
letter-spacing: 0.3em;
}
.service-card__title {
font-size: clamp(18px, 1.8vw, 22px);
margin-bottom: var(--space-3);
}
.service-card__more {
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 12px;
font-weight: 700;
}
/* 流れステップを格上げ */
.flow-step__num {
width: 72px;
height: 72px;
font-size: 24px;
border: 1.5px solid var(--color-accent);
position: relative;
}
.flow-step__num::after {
content: "";
position: absolute;
inset: -6px;
border: 1px solid var(--color-accent);
border-radius: 50%;
opacity: 0.3;
}
.flow-step__title {
font-size: clamp(15px, 1.4vw, 17px);
margin-top: var(--space-2);
}
/* 料金ブロック装飾 */
.pricing-block { box-shadow: var(--shadow-sm); }
.pricing-block__header {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-dark) 100%);
padding: var(--space-4) var(--space-5);
}
/* CTA バナー大型化 + 背景タイポ */
.cta-banner {
padding: clamp(64px, 10vw, 120px) clamp(24px, 6vw, 64px);
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: "CONTACT";
position: absolute;
font-family: var(--font-en-serif);
font-size: clamp(80px, 16vw, 220px);
font-weight: 700;
color: rgba(201, 169, 97, 0.08);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: -0.04em;
line-height: 0.85;
pointer-events: none;
white-space: nowrap;
z-index: 0;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 {
font-size: clamp(24px, 3.2vw, 38px);
letter-spacing: 0.05em;
margin-bottom: var(--space-4);
}
.cta-banner p {
font-size: clamp(14px, 1.2vw, 16px);
letter-spacing: 0.05em;
margin-bottom: var(--space-6);
opacity: 0.85;
}
/* 代表挨拶セクション */
.greeting__photo {
border-radius: 0;
border: 0;
aspect-ratio: 4/5;
position: relative;
max-width: 380px;
}
.greeting__photo::before {
content: "";
position: absolute;
inset: -20px -20px 20px 20px;
border: 2px solid var(--color-accent);
z-index: -1;
}
/* お知らせリスト */
.news-item {
padding: var(--space-4) 0;
transition: padding-left 0.2s ease;
}
.news-item:hover { padding-left: var(--space-3); }
/* ヘッダー精緻化 */
.site-header {
height: 72px;
border-bottom: 0;
}
@media (min-width: 768px) {
.site-header { height: 88px; }
}
@media (min-width: 1280px) {
.site-header { height: 96px; }
}
.footer-brand img { max-width: 320px; }
/* 言語切替スイッチ */
.lang-switch {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-en-serif);
font-size: 13px;
letter-spacing: 0.18em;
margin-right: var(--space-3);
margin-left: var(--space-3);
font-weight: 600;
padding-left: var(--space-3);
border-left: 1px solid var(--color-line);
}
.lang-switch a {
color: var(--color-text-mute);
padding: 4px 6px;
text-decoration: none;
transition: color 0.2s ease;
}
.lang-switch a:hover { color: var(--color-primary); }
.lang-switch a.is-active {
color: var(--color-primary);
border-bottom: 2px solid var(--color-accent);
}
.lang-switch__sep { color: var(--color-line); }
@media (max-width: 1023px) {
.lang-switch { font-size: 12px; margin-right: var(--space-2); }
}
.site-header.scrolled {
background: rgba(255,255,255,0.96);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow: var(--shadow-sm);
}
/* スクロールフェードイン */
[data-animate] {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
[data-animate].in-view {
opacity: 1;
transform: translateY(0);
}
[data-animate-delay="1"] { transition-delay: 0.08s; }
[data-animate-delay="2"] { transition-delay: 0.16s; }
[data-animate-delay="3"] { transition-delay: 0.24s; }
[data-animate-delay="4"] { transition-delay: 0.32s; }
[data-animate-delay="5"] { transition-delay: 0.40s; }
/* prefers-reduced-motion 対応 */
@media (prefers-reduced-motion: reduce) {
[data-animate],
[data-animate].in-view {
opacity: 1;
transform: none;
transition: none;
}
}
/* =========================================================================
* 22. Variant 別の世界観差別化
* body[data-variant="v1|v2|v3"] でロゴ案ごとに配色・装飾・トーンを変える
* ========================================================================= */
/* ───── V1: ワードマーク = フォーマル・洗練・シック ───── */
body[data-variant="v1"] {
--color-bg-alt: #FAFBFC;
--color-accent: #B8985A; /* やや落ち着いたゴールド */
}
body[data-variant="v1"] .hero {
background: #061A2E;
}
body[data-variant="v1"] .hero__bg::after {
background: linear-gradient(135deg, rgba(6,26,46,0.94) 0%, rgba(10,37,64,0.82) 100%);
}
body[data-variant="v1"] .section-heading__jp {
font-weight: 500;
letter-spacing: 0.06em;
}
body[data-variant="v1"] .strength-card {
padding-top: var(--space-7);
padding-bottom: var(--space-7);
}
body[data-variant="v1"] .hero__bg-letter {
font-size: clamp(160px, 26vw, 420px);
opacity: 0.04;
}
/* ───── V2: 盾形 = 重厚・伝統・士業の権威 ───── */
body[data-variant="v2"] {
--color-accent: #D4AF37; /* より濃いリッチゴールド */
--color-accent-hover: #B8932E;
--color-bg-alt: #FAF6ED; /* ほのかなクリーム */
}
body[data-variant="v2"] .hero {
background: linear-gradient(135deg, #0A2540 0%, #1A1228 100%);
}
body[data-variant="v2"] .hero__bg::after {
background: linear-gradient(135deg, rgba(10,37,64,0.92) 0%, rgba(26,18,40,0.85) 100%);
}
body[data-variant="v2"] .section-heading__divider {
background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
height: 3px;
width: 80px;
}
body[data-variant="v2"] .strength-card__num {
font-size: clamp(56px, 7vw, 88px);
}
body[data-variant="v2"] .strength-card::before {
height: 4px;
background: linear-gradient(90deg, var(--color-accent), transparent);
width: 80px;
}
body[data-variant="v2"] .service-card {
border: 1px solid rgba(212, 175, 55, 0.2);
}
body[data-variant="v2"] .pricing-block__header {
background: linear-gradient(135deg, #0A2540 0%, #1A1228 100%);
border-bottom: 2px solid var(--color-accent);
}
body[data-variant="v2"] .flow-step__num {
background: linear-gradient(135deg, var(--color-primary), #1A1228);
border: 2px solid var(--color-accent);
}
/* ───── V3: 神戸ローカル = 地元密着・親しみ・明るさ ───── */
body[data-variant="v3"] {
--color-secondary: #1F7A8C; /* 神戸の海と空をイメージしたターコイズ */
--color-bg-alt: #F4F8FA;
}
body[data-variant="v3"] .hero {
background: var(--color-primary);
}
body[data-variant="v3"] .hero__bg::after {
background: linear-gradient(135deg, rgba(10,37,64,0.85) 0%, rgba(31,122,140,0.55) 100%);
}
body[data-variant="v3"] .section-heading__en {
color: var(--color-secondary);
letter-spacing: 0.4em;
}
body[data-variant="v3"] .section-heading__en::before,
body[data-variant="v3"] .section-heading__en::after {
background: var(--color-secondary);
}
body[data-variant="v3"] .section-heading__divider {
background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
width: 60px;
}
body[data-variant="v3"] .hero__en {
color: #5DB8C7;
}
body[data-variant="v3"] .hero__en::before {
background: #5DB8C7;
}
body[data-variant="v3"] .strength-card::before {
background: linear-gradient(90deg, var(--color-accent), var(--color-secondary));
}
body[data-variant="v3"] .strength-card__num {
background: linear-gradient(135deg, var(--color-accent), var(--color-secondary));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
body[data-variant="v3"] .service-card__more {
color: var(--color-secondary);
}
body[data-variant="v3"] .flow-step__num {
border-color: var(--color-secondary);
color: var(--color-secondary);
}
body[data-variant="v3"] .flow-step__num::after {
border-color: var(--color-secondary);
}
body[data-variant="v3"] .news-item__cat {
border-color: var(--color-secondary);
color: var(--color-secondary);
}
body[data-variant="v3"] .cta-banner::before {
color: rgba(31, 122, 140, 0.1);
}
body[data-variant="v3"] .greeting__photo::before {
border-color: var(--color-secondary);
}
/* ロゴ画像のフッターでの色反転 — variant ごとに調整 */
.footer-brand img {
filter: brightness(0) invert(1);
opacity: 0.92;
}
/* ---------- 20. Mockup-only banner (top of page indicating which variant) ---------- */
.mockup-banner {
background: #FFF8E1;
border-bottom: 1px solid #FCD34D;
padding: 8px var(--space-3);
text-align: center;
font-size: 12px;
color: #92400E;
}
.mockup-banner a { color: #92400E; text-decoration: underline; }
.mockup-banner strong { color: #B45309; }
/* ---------- 21. PDF改良案 反映分（2026-05-03） ---------- */
/* 21-1. 金色塗りボタン（ヘッダー右上 / ヒーロー中央のお問い合わせ） */
.btn--gold-solid {
background: var(--color-accent);
color: #fff;
border: 1px solid var(--color-accent);
font-weight: 700;
}
.btn--gold-solid:hover {
background: var(--color-accent-hover);
border-color: var(--color-accent-hover);
color: #fff;
}
/* 21-2. ヒーロー CTA のアイコン */
.btn .btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 1.2em; height: 1.2em; margin-right: 0.5em;
vertical-align: -0.15em;
}
.btn .btn-icon svg { width: 100%; height: 100%; fill: currentColor; }
/* 21-3. （旧: ヒーロー直下の大型 CTA バナー → ヒーロー内 CTA で代替したため削除） */
/* 21-4. こんなお悩みの「お任せ」受け止めブロック */
.trouble-handoff {
max-width: 760px; margin: var(--space-6) auto 0;
padding: var(--space-5); background: var(--color-bg-alt);
border: 1px solid var(--color-line); border-radius: var(--radius-md, 12px);
text-align: center;
}
.trouble-handoff__lead { font-family: var(--font-en-serif); font-size: 28px; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 4px; }
.trouble-handoff__sub { font-size: 13px; color: var(--color-text-mute); letter-spacing: 0.2em; margin-bottom: var(--space-3); }
.trouble-handoff__msg { font-weight: 700; color: var(--color-primary); font-size: 18px; }
/* 21-5. ご挨拶: 金色フォトフレーム */
.photo-frame--gold {
position: relative; padding: 14px;
}
.photo-frame--gold::before {
content: ""; position: absolute; inset: 0;
border: 2px solid var(--color-accent);
transform: translate(10px, 10px);
pointer-events: none;
}
.photo-frame--gold > * { position: relative; }
/* 21-6. ミッション・バリュー: 3カラム等幅化（span 2 を上書き） */
.mission-equal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.mission-equal-grid > .strength-card { grid-column: auto !important; }
@media (max-width: 768px) { .mission-equal-grid { grid-template-columns: 1fr; } }
/* 21-7. アクセス: 中央揃え（既存 .access の grid を完全上書き） */
.access.access--centered {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: var(--space-6);
max-width: 1000px;
margin: 0 auto;
text-align: center;
}
.access.access--centered .access__map {
width: 480px;
max-width: 100%;
height: 320px;
border: 0;
flex-shrink: 0;
}
.access.access--centered .access__info {
width: 380px;
max-width: 100%;
text-align: left;
}
.access.access--centered .access__info dt { text-align: left; }
.access.access--centered .access__info dd { text-align: left; }
.access.access--centered .access__info dd.tel-thin { font-weight: 400; font-size: 18px; letter-spacing: 0.02em; }
.access.access--centered .access__info dd.tel-thin a { font-weight: 400 !important; }
@media (max-width: 768px) {
.access.access--centered { flex-direction: column; align-items: center; }
.access.access--centered .access__map { width: 100%; }
.access.access--centered .access__info { width: 100%; }
}
/* 21-8. 最終 CTA: 3 手段カード */
.contact-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-4); max-width: 1080px; margin: var(--space-5) auto 0;
}
.contact-grid__card {
display: flex; flex-direction: column; align-items: center;
padding: var(--space-5);
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-md, 12px);
color: var(--color-text-invert);
text-align: center; transition: transform .15s, background .15s;
}
.contact-grid__card:hover { transform: translateY(-2px); background: rgba(255,255,255,0.1); color: var(--color-text-invert); }
.contact-grid__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--color-accent); color: #fff; font-size: 22px; margin-bottom: var(--space-3); }
.contact-grid__card--line .contact-grid__icon { background: var(--color-cta-line); }
.contact-grid__title { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.contact-grid__main { font-family: var(--font-en-serif); font-size: 24px; letter-spacing: 0.05em; margin-bottom: 8px; color: #fff; }
.contact-grid__note { font-size: 12px; color: rgba(255,255,255,0.7); line-height: 1.6; }
@media (max-width: 768px) { .contact-grid { grid-template-columns: 1fr; } }
/* 21-9. 対応地域 */
.area-coverage {
max-width: 1080px; margin: var(--space-5) auto 0;
padding: var(--space-5);
background: rgba(255,255,255,0.04);
border-left: 3px solid var(--color-accent);
border-radius: var(--radius-sm, 6px);
color: rgba(255,255,255,0.9);
}
.area-coverage__label { display: inline-block; font-family: var(--font-en-serif); font-size: 13px; letter-spacing: 0.25em; color: var(--color-accent); margin-bottom: 8px; text-transform: uppercase; }
.area-coverage__main { font-size: 16px; line-height: 1.85; }
/* 21-10. メッセンジャー（WeChat/WhatsApp 公式色） */
.messenger-row { display: flex; gap: var(--space-3); justify-content: center; margin-top: var(--space-5); flex-wrap: wrap; }
.messenger-row a {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px; border-radius: 999px;
font-weight: 700; font-size: 14px;
transition: filter .15s, transform .15s;
}
.messenger-row a:hover { filter: brightness(1.05); transform: translateY(-1px); color: #fff; }
.messenger-row .messenger-line { background: #06C755; color: #fff; }
.messenger-row .messenger-wechat { background: #07C160; color: #fff; }
.messenger-row .messenger-whatsapp { background: #25D366; color: #fff; }
.messenger-row .messenger-icon { font-size: 16px; }
/* 21-11. アクセントヘッダー CTA（金色塗り強制） */
.site-header__cta.btn--gold-solid { padding: 10px 22px; font-size: 14px; }
/* 21-12. ヒーロー CTA: WEBフォーム用ピンク（オプション） */
.btn--web-form { background: #F4B6C2; color: #1A1A1A; border: 1px solid #F4B6C2; font-weight: 700; }
.btn--web-form:hover { background: #E89AAA; border-color: #E89AAA; color: #1A1A1A; }
/* 21-13. 明背景でも見える アウトラインボタン（業務案内に戻る等） */
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
/* 21-14. SP 崩れ対策（PDF改修後の追加レイアウト全般） */
/* 業務案内 4 カードのレスポンシブ */
.services.services--4col { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 600px) { .services.services--4col { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services.services--4col { grid-template-columns: repeat(4, 1fr); } }
/* 料金プラン表 SP 横スクロール用最小幅 */
.price-table { min-width: 640px; }
/* SP: ヒーロー CTA を縦積みで全幅化 */
@media (max-width: 600px) {
.hero__cta { flex-direction: column; align-items: stretch; gap: var(--space-3); }
.hero__cta .btn,
.hero__cta .btn--lg { width: 100%; justify-content: center; padding: 14px 16px; font-size: 15px; }
.btn .btn-icon { margin-right: 0.4em; }
}
/* SP: ヘッダー高さ調整。ヘッダーの言語切替は drawer に移し、ヘッダーは
ロゴ + ハンバーガーのみのシンプル構成に */
@media (max-width: 768px) {
.site-header__cta { display: none; }
.site-header .lang-switch { display: none !important; }
.site-header__inner {
padding: 10px 0 !important;
gap: var(--space-3) !important;
}
.site-header__logo img {
max-height: 36px !important;
width: auto !important;
}
.header-actions {
gap: var(--space-2) !important;
}
}
/* SP: トラブルお任せブロックの余白調整 */
@media (max-width: 600px) {
.trouble-handoff { padding: var(--space-4) var(--space-3); }
.trouble-handoff__lead { font-size: 22px; }
}
/* SP: 業務案内サブページのその他業務 9 カード（既存 1fr 化を維持しつつ余白調整） */
@media (max-width: 600px) {
.other-grid { gap: var(--space-3); }
}
/* SP: ご挨拶 photo-frame 余白 + 写真表示確保 */
@media (max-width: 600px) {
.photo-frame--gold {
padding: 10px;
width: 240px; max-width: 240px;
margin-left: auto; margin-right: auto;
}
.photo-frame--gold::before { transform: translate(6px, 6px); }
/* aspect-ratio が効かないブラウザ向けに min-height 保険 */
.photo-frame--gold .greeting__photo {
width: 100% !important;
max-width: 100% !important;
aspect-ratio: 4 / 5;
min-height: 280px;
background-size: cover;
background-position: center top;
}
}
/* タブレット〜PC でも photo-frame 内の写真サイズを安定化 */
.photo-frame--gold .greeting__photo {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
min-height: 320px;
background-size: cover;
background-position: center top;
}
/* SP: メッセンジャー行と最終 CTA の余白 */
@media (max-width: 600px) {
.area-coverage { padding: var(--space-4) var(--space-3); }
.area-coverage__main { font-size: 14px; }
.messenger-row { gap: 8px; }
.messenger-row a { padding: 8px 14px; font-size: 13px; }
}
/* SP: ブログマガジングリッドはそのまま（既に 1fr メディアクエリで対応） */
/* SP: アクセス flex 縦積み時の幅調整（既存ルールの補強） */
@media (max-width: 600px) {
.access.access--centered { gap: var(--space-4); }
.access.access--centered .access__map { height: 240px; }
}
/* 21-15. SP オフキャンバスドロワー（サイドメニュー） */
.site-drawer {
position: fixed; top: 0; right: 0;
height: 100vh; height: 100dvh;
width: min(86vw, 360px);
background: #fff;
box-shadow: -10px 0 28px rgba(10,37,64,0.22);
transform: translateX(100%);
transition: transform .28s cubic-bezier(.2,.8,.2,1);
z-index: 1000;
padding: 72px 28px 32px;
overflow-y: auto;
visibility: hidden;
}
.site-drawer.is-open { transform: translateX(0); visibility: visible; }
.site-drawer-backdrop {
position: fixed; inset: 0;
background: rgba(10,37,64,0.45);
opacity: 0; pointer-events: none;
transition: opacity .22s ease;
z-index: 999;
}
.site-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; }
.site-drawer__close {
position: absolute; top: 16px; right: 18px;
background: none; border: none;
width: 36px; height: 36px;
font-size: 28px; line-height: 1;
cursor: pointer; color: var(--color-primary);
display: grid; place-items: center;
border-radius: 50%;
transition: background .15s;
}
.site-drawer__close:hover { background: var(--color-bg-alt); color: var(--color-accent); }
.site-drawer__brand {
font-family: var(--font-en-serif);
font-size: 12px; letter-spacing: 0.3em;
color: var(--color-accent);
text-transform: uppercase;
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--color-line);
}
.site-drawer__nav { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.site-drawer__nav > li > a {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 4px;
border-bottom: 1px solid var(--color-line);
color: var(--color-primary);
font-weight: 600; font-size: 16px;
transition: color .15s, padding-left .15s;
}
.site-drawer__nav > li > a::after {
content: "›";
color: var(--color-accent);
font-size: 22px;
font-weight: 400;
margin-left: 8px;
}
.site-drawer__nav > li > a:hover { color: var(--color-accent); padding-left: 8px; }
.site-drawer__cta {
display: block;
margin-top: var(--space-4);
padding: 14px 16px;
background: var(--color-accent);
color: #fff !important;
text-align: center;
border-radius: var(--radius-sm, 6px);
font-weight: 700;
text-decoration: none;
transition: background .15s;
}
.site-drawer__cta:hover { background: var(--color-accent-hover); }
.site-drawer__lang {
margin-top: var(--space-5);
display: flex; gap: 6px; justify-content: center;
font-size: 13px; color: var(--color-text-mute);
}
.site-drawer__lang a {
padding: 6px 12px; border-radius: 999px;
border: 1px solid var(--color-line);
color: var(--color-text-mute);
text-decoration: none;
transition: all .15s;
}
.site-drawer__lang a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.site-drawer__lang a.is-active {
background: var(--color-primary); color: #fff; border-color: var(--color-primary);
}
.site-drawer__contact-info {
margin-top: var(--space-5);
padding-top: var(--space-4);
border-top: 1px solid var(--color-line);
font-size: 12px; color: var(--color-text-mute); line-height: 1.8;
}
.site-drawer__contact-info a { color: var(--color-primary); font-weight: 600; }
body.drawer-open { overflow: hidden; }
@media (min-width: 1024px) {
.site-drawer, .site-drawer-backdrop { display: none !important; }
}
/* ---------- 22. 業務案内サブページ 共通スタイル（統一感） ---------- */
/* 22-1. 共通ヒーロー */
.service-hero {
background: linear-gradient(135deg, #1A4D6F 0%, #0A2540 100%);
color: #fff;
padding: var(--space-7) 0;
position: relative;
overflow: hidden;
}
.service-hero::before {
content: ""; position: absolute; inset: 0;
background-size: cover; background-position: center;
opacity: 0.15;
pointer-events: none;
}
.service-hero[data-bg="visa"]::before { background-image: url('https://images.unsplash.com/photo-1569950044272-e0a9d7c84321?w=1600&q=80'); }
.service-hero[data-bg="minpaku"]::before { background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=1600&q=80'); }
.service-hero[data-bg="subsidy"]::before { background-image: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=1600&q=80'); }
.service-hero[data-bg="other"]::before { background-image: url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1600&q=80'); }
.service-hero__inner { position: relative; max-width: 880px; margin: 0 auto; text-align: center; padding: 0 var(--space-3); }
.service-hero__sub {
font-family: var(--font-en-serif);
font-size: 14px; letter-spacing: 0.4em;
color: var(--color-accent);
text-transform: uppercase;
margin-bottom: var(--space-3);
}
.service-hero h1 {
font-size: clamp(28px, 4.5vw, 44px);
color: #fff;
margin-bottom: var(--space-4);
line-height: 1.4;
}
.service-hero__lead { font-size: 16px; line-height: 1.95; color: rgba(255,255,255,0.92); }
/* 22-2. ヒーロー内 統計バッジ */
.service-stats {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
max-width: 760px;
margin: var(--space-5) auto 0;
position: relative;
}
.service-stat {
background: rgba(255,255,255,0.08);
border: 1px solid rgba(201,169,97,0.25);
border-radius: var(--radius-md);
padding: var(--space-4);
text-align: center;
}
.service-stat__num {
font-family: var(--font-en-serif);
font-size: 28px; font-weight: 700;
color: var(--color-accent);
line-height: 1.1;
}
.service-stat__label { font-size: 12px; color: rgba(255,255,255,0.78); margin-top: 4px; }
@media (max-width: 600px) {
.service-stats { gap: 8px; }
.service-stat { padding: var(--space-3) 8px; }
.service-stat__num { font-size: 18px; }
}
/* 22-3. パンくず */
.service-breadcrumb {
font-size: 13px;
color: var(--color-text-mute);
margin-bottom: var(--space-5);
}
/* 22-4. 強み 3 カード */
.service-strengths {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
max-width: 1080px; margin: 0 auto;
}
.service-strength {
background: #fff;
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: 0 4px 14px rgba(10,37,64,0.06);
border-top: 3px solid var(--color-accent);
}
.service-strength__num {
font-family: var(--font-en-serif);
font-size: 22px; color: var(--color-accent);
font-weight: 700; line-height: 1;
margin-bottom: 10px;
}
.service-strength h3 { color: var(--color-primary); font-size: 18px; margin-bottom: var(--space-2); }
.service-strength p { color: var(--color-text-mute); font-size: 14px; line-height: 1.85; margin: 0; }
@media (max-width: 768px) { .service-strengths { grid-template-columns: 1fr; } }
/* 22-5. 対応範囲リスト */
.service-coverage {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-5);
max-width: 1080px; margin: 0 auto;
}
.service-coverage h3 {
color: var(--color-primary);
border-left: 3px solid var(--color-accent);
padding-left: var(--space-3);
margin-bottom: var(--space-4);
font-size: 18px;
}
.service-coverage__list {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: var(--space-2);
margin: 0; padding-left: var(--space-4);
font-size: 14px;
line-height: 1.85;
color: var(--color-text);
}
@media (max-width: 600px) { .service-coverage__list { grid-template-columns: 1fr; } }
/* 22-6. 共通フロー */
.service-flow { max-width: 880px; margin: 0 auto; }
.service-flow__step {
display: flex; gap: var(--space-4);
padding: var(--space-4) 0;
border-bottom: 1px solid var(--color-line);
}
.service-flow__step:last-child { border-bottom: none; }
.service-flow__num {
flex: 0 0 56px; height: 56px;
border-radius: 50%;
background: var(--color-accent); color: #fff;
display: grid; place-items: center;
font-family: var(--font-en-serif);
font-size: 22px; font-weight: 700;
}
.service-flow__body h4 { color: var(--color-primary); font-size: 17px; margin-bottom: 6px; }
.service-flow__body p { color: var(--color-text-mute); font-size: 14px; line-height: 1.85; margin: 0; }
/* 22-7. 共通 FAQ アコーディオン */
.service-faq { max-width: 880px; margin: 0 auto; }
.service-faq__item {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
overflow: hidden;
}
.service-faq__q {
padding: var(--space-4) var(--space-5);
font-weight: 700; color: var(--color-primary);
cursor: pointer;
position: relative;
padding-right: 50px;
}
.service-faq__q::before {
content: "Q";
color: var(--color-accent);
font-family: var(--font-en-serif);
font-size: 20px;
margin-right: 12px;
}
.service-faq__q::after {
content: "+";
position: absolute; right: 20px; top: 50%;
transform: translateY(-50%);
font-size: 22px; color: var(--color-accent);
transition: transform .2s;
}
.service-faq__item.is-open .service-faq__q::after { transform: translateY(-50%) rotate(45deg); }
.service-faq__a {
padding: 0 var(--space-5) var(--space-4);
color: var(--color-text-mute);
font-size: 14px; line-height: 1.95;
display: none;
}
.service-faq__a::before {
content: "A";
color: var(--color-accent);
font-family: var(--font-en-serif);
font-size: 20px;
margin-right: 12px;
}
.service-faq__item.is-open .service-faq__a { display: block; }
/* 22-8. ボトム CTA */
.service-bottom-cta {
background: var(--color-bg-alt);
border-radius: var(--radius-md);
padding: var(--space-6);
text-align: center;
max-width: 880px;
margin: 0 auto;
}
.service-bottom-cta h3 { color: var(--color-primary); margin-bottom: var(--space-2); font-size: 22px; }
.service-bottom-cta p { color: var(--color-text-mute); margin-bottom: var(--space-4); font-size: 14px; line-height: 1.85; }
.service-bottom-cta__buttons {
display: flex; gap: var(--space-3);
justify-content: center; flex-wrap: wrap;
}
/* 22-9. 共通 料金プラン表（visa / minpaku で利用） */
.price-table-wrap {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: 0 4px 14px rgba(10,37,64,0.06);
display: block;
width: max-content;
min-width: 100%;
max-width: none;
}
.price-table {
width: 100%; border-collapse: separate; border-spacing: 0;
font-size: 15px;
}
@media (min-width: 768px) {
.price-table { min-width: 640px; }
}
.price-table th, .price-table td {
border-bottom: 1px solid var(--color-line);
padding: 14px 12px;
text-align: center; vertical-align: middle;
}
.price-table tbody tr:last-child th,
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table thead th {
background: var(--color-primary); color: #fff;
font-weight: 700; padding: 16px 12px;
font-size: 16px; border-bottom: 0;
}
.price-table thead th small {
display: block;
font-weight: 400; font-size: 11px;
opacity: 0.85; margin-top: 4px; line-height: 1.5;
}
.price-table thead .plan-econ { background: #8C9BAE; }
.price-table thead .plan-std { background: #C9A961; }
.price-table thead .plan-full { background: #0A2540; box-shadow: inset 0 -3px 0 var(--color-accent); }
.price-table th[scope="row"] {
background: var(--color-bg-alt);
text-align: left; font-weight: 600;
color: var(--color-primary);
width: 32%; padding-left: 18px;
}
.price-table tbody tr:nth-child(even) td { background: #FAFBFD; }
.price-table tbody tr:nth-child(even) th[scope="row"] { background: #F2F4F7; }
.price-table tbody tr:hover td,
.price-table tbody tr:hover th[scope="row"] { background: #FFF8EC; }
.cell-yes {
display: inline-block; width: 24px; height: 24px;
border-radius: 50%; background: #2C9F6A; color: #fff;
font-size: 14px; line-height: 24px; font-weight: 700;
}
.cell-no {
display: inline-block; width: 18px; height: 2px;
background: #C9CDD5; vertical-align: middle;
}
.price-row th[scope="row"] {
background: #FFF8E1 !important;
color: var(--color-primary);
border-top: 2px solid var(--color-accent);
}
.price-row td {
background: #FFFCF2 !important;
border-top: 2px solid var(--color-accent);
}
.plan-price {
font-family: var(--font-price);
font-size: 22px; font-weight: 700;
color: var(--color-primary);
letter-spacing: 0.02em;
font-feature-settings: "tnum" 1, "lnum" 1;
line-height: 1.2;
}
.plan-price small {
display: block;
font-size: 12px; color: var(--color-text-mute);
margin-top: 4px;
font-weight: 400;
font-family: var(--font-jp);
letter-spacing: 0;
}
.plan-na {
display: inline-block;
font-family: var(--font-price);
font-size: 16px;
font-weight: 600;
color: var(--color-text-mute);
letter-spacing: 0.04em;
line-height: 1.3;
padding: 8px 0;
}
.mp-fee-table .plan-na { font-size: 15px; }
.price-table .plan-na { font-size: 18px; letter-spacing: 0.1em; }
@media (max-width: 767px) {
.plan-na { font-size: 14px; }
.price-table .plan-na { font-size: 15px; }
}
@media (max-width: 767px) {
.plan-price { font-size: 18px; }
}
/* 22-9c. 料金プラン リード文（2段組） */
.service-pricing-lead {
text-align: center;
max-width: 880px;
margin: 0 auto var(--space-5);
color: var(--color-text);
font-size: 17px;
line-height: 1.95;
letter-spacing: 0.02em;
}
.service-pricing-lead br { display: inline; }
@media (max-width: 767px) {
.service-pricing-lead { font-size: 15px; line-height: 1.85; }
.service-pricing-lead br { display: none; }
}
/* 22-9b. SP 用: 料金プラン表は横スクロール（テーブル形状を維持） */
.price-table { min-width: 640px; }
.price-table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
/* SP では横スクロールヒントを表示 */
.price-table-scroll {
position: relative;
margin-left: calc(-1 * var(--space-3));
margin-right: calc(-1 * var(--space-3));
padding: 0 var(--space-3);
}
.price-table-scroll::after {
content: "← 横にスクロールできます →";
display: block;
text-align: center;
font-size: 11px;
color: var(--color-text-mute);
margin-top: 8px;
letter-spacing: 0.1em;
}
.price-table { font-size: 13px; min-width: 600px; }
.price-table thead th { font-size: 13px; padding: 12px 8px; }
.price-table thead th small { font-size: 10px; }
.price-table th, .price-table td { padding: 10px 8px; }
.price-table th[scope="row"] { padding-left: 12px; font-size: 13px; }
.price-table .plan-price { font-size: 16px; }
.price-table .plan-price small { font-size: 10px; }
}
/* 22-9c. 業務案内ボトム CTA: ボタン干渉対策 */
.service-bottom-cta__buttons .btn {
min-width: 200px;
}
@media (max-width: 600px) {
.service-bottom-cta__buttons {
flex-direction: column;
gap: var(--space-3);
align-items: stretch;
}
.service-bottom-cta__buttons .btn {
width: 100%;
min-width: 0;
margin-left: 0 !important;
}
}
/* 22-9d. 民泊専用 3 つの強み */
.mp-summary {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-4); max-width: 1080px; margin: 0 auto;
}
.mp-summary-card {
background: #fff;
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: 0 4px 14px rgba(10,37,64,0.06);
border-top: 3px solid var(--color-accent);
}
.mp-summary-card__num {
font-family: var(--font-en-serif);
font-size: 22px; color: var(--color-accent);
font-weight: 700; line-height: 1;
margin-bottom: 10px;
}
.mp-summary-card h3 { color: var(--color-primary); font-size: 18px; margin-bottom: var(--space-2); }
.mp-summary-card p { color: var(--color-text-mute); font-size: 14px; line-height: 1.85; margin: 0; }
@media (max-width: 768px) { .mp-summary { grid-template-columns: 1fr; } }
/* 22-9e. 民泊専用 料金表（minpaku-terasu スタイル） */
.mp-fee-table-wrap {
max-width: 880px; margin: 0 auto;
background: #fff; border-radius: var(--radius-md);
box-shadow: 0 4px 14px rgba(10,37,64,0.06);
overflow: hidden;
}
.mp-fee-table {
width: 100%; border-collapse: collapse;
}
.mp-fee-table thead th {
background: var(--color-primary); color: #fff;
padding: 14px 24px; text-align: left;
font-size: 14px; letter-spacing: 0.08em;
font-weight: 600;
}
.mp-fee-table thead th:last-child { text-align: right; }
.mp-fee-table tbody th {
text-align: left;
padding: 20px 24px;
font-weight: 700; color: var(--color-primary);
border-top: 1px solid var(--color-line);
vertical-align: top;
}
.mp-fee-table tbody td {
text-align: right;
padding: 20px 24px;
border-top: 1px solid var(--color-line);
white-space: nowrap;
vertical-align: top;
}
.mp-fee-table__title {
display: block;
font-size: 17px;
margin-bottom: 4px;
}
.mp-fee-table tbody th small {
display: block;
font-size: 12px; font-weight: 400;
color: var(--color-text-mute);
line-height: 1.7;
margin-top: 6px;
}
@media (max-width: 600px) {
.mp-fee-table tbody th, .mp-fee-table tbody td { padding: 14px 16px; }
.mp-fee-table thead th { padding: 12px 16px; font-size: 13px; }
.mp-fee-table__title { font-size: 15px; }
}
.mp-fee-support {
max-width: 880px; margin: var(--space-5) auto 0;
background: var(--color-bg-alt);
padding: var(--space-5);
border-radius: var(--radius-md);
}
.mp-fee-support h3 {
color: var(--color-primary);
font-size: 16px;
margin: 0 0 var(--space-3);
letter-spacing: 0.04em;
}
.mp-fee-support__list {
margin: 0 0 var(--space-3);
padding-left: 22px;
color: var(--color-text);
font-size: 14px;
line-height: 1.95;
}
.mp-fee-support__list li { margin-bottom: 4px; }
.mp-fee-support p {
margin: var(--space-3) 0 0;
font-size: 13px;
color: var(--color-text-mute);
line-height: 1.85;
}
/* 22-10. 民泊専用 タイプ比較カード */
.mp-types {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-4); max-width: 1080px; margin: 0 auto;
}
.mp-type {
background: #fff;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 4px 14px rgba(10,37,64,0.08);
}
.mp-type__img {
aspect-ratio: 4/3;
background-size: cover; background-position: center;
}
.mp-type__body { padding: var(--space-4); }
.mp-type__badge {
display: inline-block;
background: var(--color-primary); color: #fff;
padding: 2px 10px; border-radius: 4px;
font-size: 11px; font-weight: 700;
margin-bottom: 8px;
}
.mp-type__title { color: var(--color-primary); font-size: 18px; margin-bottom: 8px; }
.mp-type__list {
font-size: 13px; color: var(--color-text-mute);
line-height: 1.85; padding-left: 18px; margin: 0;
}
@media (max-width: 768px) { .mp-types { grid-template-columns: 1fr; } }
/* 22-11. 補助金 専用 補助金グリッド & fee table */
.sb-grants {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-4); max-width: 1080px; margin: 0 auto;
}
@media (max-width: 768px) { .sb-grants { grid-template-columns: 1fr; } }
.sb-grant {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-5);
border-top: 3px solid var(--color-accent);
}
.sb-grant h3 { color: var(--color-primary); font-size: 17px; margin-bottom: 8px; }
.sb-grant__amount {
font-family: var(--font-en-serif);
font-size: 22px; color: var(--color-accent);
font-weight: 700; margin-bottom: var(--space-3);
}
.sb-grant__amount small {
font-size: 12px; color: var(--color-text-mute);
display: block; font-weight: 400;
font-family: var(--font-jp);
}
.sb-grant p { font-size: 13px; color: var(--color-text-mute); line-height: 1.85; margin: 0; }
.sb-fee-table {
width: 100%; border-collapse: separate; border-spacing: 0;
background: #fff; border: 1px solid var(--color-line);
border-radius: var(--radius-md); overflow: hidden;
box-shadow: 0 4px 14px rgba(10,37,64,0.06);
}
.sb-fee-table th, .sb-fee-table td {
padding: 16px 20px; vertical-align: middle;
border-bottom: 1px solid var(--color-line);
}
.sb-fee-table tr:last-child th, .sb-fee-table tr:last-child td { border-bottom: 0; }
.sb-fee-table thead th {
background: var(--color-primary); color: #fff;
font-weight: 700; font-size: 15px; text-align: center;
}
.sb-fee-table th[scope="row"] {
background: var(--color-bg-alt);
text-align: left; font-weight: 600;
color: var(--color-primary);
width: 40%;
}
.sb-fee-table tbody tr:nth-child(even) td,
.sb-fee-table tbody tr:nth-child(even) th[scope="row"] { background: #FAFBFD; }
.sb-fee-table .fee-amount {
font-family: var(--font-en-serif);
font-size: 18px; font-weight: 700;
color: var(--color-primary);
}
.sb-fee-table .fee-success { color: #2C9F6A; font-weight: 700; }
.sb-fee-table .fee-note {
font-size: 12px; color: var(--color-text-mute);
display: block; margin-top: 4px;
}
@media (max-width: 768px) {
.sb-fee-table { display: block; }
.sb-fee-table thead { display: none; }
.sb-fee-table tbody, .sb-fee-table tr,
.sb-fee-table th, .sb-fee-table td { display: block; }
.sb-fee-table tr { border-bottom: 1px solid var(--color-line); padding: var(--space-3); }
.sb-fee-table th[scope="row"] {
width: auto; padding: 0 0 8px;
background: transparent !important;
}
.sb-fee-table td { padding: 0; background: transparent !important; }
}
/* 22-12. その他業務 カテゴリ別カード */
.ot-section-tabs {
display: flex; flex-wrap: wrap; gap: 8px;
max-width: 1080px; margin: 0 auto var(--space-5);
padding: 0; list-style: none;
justify-content: center;
}
.ot-section-tabs a {
display: inline-flex;
padding: 10px 18px;
border: 1px solid var(--color-line);
border-radius: 999px;
background: #fff; color: var(--color-primary);
font-size: 13px; font-weight: 600;
transition: all .15s;
}
.ot-section-tabs a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.ot-cat { max-width: 1080px; margin: 0 auto var(--space-7); }
.ot-cat__head {
display: flex; align-items: center; gap: var(--space-3);
margin-bottom: var(--space-4);
padding-bottom: var(--space-3);
border-bottom: 2px solid var(--color-accent);
}
.ot-cat__icon {
width: 48px; height: 48px;
border-radius: 8px;
background: var(--color-primary); color: #fff;
display: grid; place-items: center;
font-size: 22px; flex-shrink: 0;
}
.ot-cat__title { color: var(--color-primary); font-size: 20px; font-weight: 700; }
.ot-cat__en {
font-family: var(--font-en-serif);
font-size: 13px; letter-spacing: 0.25em;
color: var(--color-accent);
display: block; margin-top: 2px;
text-transform: uppercase;
}
.ot-grid {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
@media (max-width: 768px) { .ot-grid { grid-template-columns: 1fr; } }
.ot-card {
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-4);
transition: transform .15s, box-shadow .15s;
}
.ot-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(10,37,64,0.08);
border-color: var(--color-accent);
}
.ot-card h4 {
color: var(--color-primary);
font-size: 16px; margin-bottom: 8px;
padding-left: 14px;
border-left: 3px solid var(--color-accent);
}
.ot-card p {
font-size: 13px; color: var(--color-text-mute);
line-height: 1.85; margin: 0;
}
.ot-card__tag {
display: inline-block;
background: var(--color-bg-alt);
color: var(--color-primary);
padding: 2px 8px;
border-radius: 4px;
font-size: 11px; font-weight: 700;
margin-top: 8px;
}
/* ---------- 23. PDF改良案3 反映分（2026-05-09） ---------- */
/* 23-1. ヘッダー業務案内ドロップダウン */
.site-nav__list { position: relative; }
.site-nav__item--has-dropdown { position: relative; }
.site-dropdown {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 220px;
background: #fff;
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: 0 8px 24px rgba(10,37,64,0.12);
padding: 6px 0;
list-style: none;
margin: 0;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .15s, transform .15s, visibility .15s;
z-index: 200;
}
.site-nav__item--has-dropdown:hover .site-dropdown,
.site-nav__item--has-dropdown:focus-within .site-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.site-dropdown a {
display: block;
padding: 10px 18px;
font-size: 14px;
color: var(--color-primary);
white-space: nowrap;
transition: background .15s, color .15s;
}
.site-dropdown a:hover { background: var(--color-bg-alt); color: var(--color-accent); }
/* 業務案内タブの ▾ アイコン */
.site-nav__link.has-dropdown {
display: inline-flex;
align-items: center;
gap: 4px;
}
.site-nav__link.has-dropdown::after {
content: "▾";
font-size: 10px;
line-height: 1;
}
/* 23-2. service-card 全体クリック化 */
a.service-card,
a.service-card:hover,
a.service-card:focus { color: inherit; text-decoration: none; }
a.service-card { display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; cursor: pointer; }
a.service-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(10,37,64,0.10); }
a.service-card .service-card__more {
display: inline-flex; align-items: center; gap: 4px;
pointer-events: none;
}
/* 23-3. ご挨拶 photo-frame: 枠なし・写真のみ */
.photo-frame--gold--simple {
display: block;
padding: 0;
background: transparent;
border: 0;
margin-left: auto;
margin-right: auto;
width: 320px;
max-width: 100%;
}
.photo-frame--gold--simple::before,
.photo-frame--gold--simple::after { content: none !important; display: none !important; border: 0 !important; }
.photo-frame--gold--simple .greeting__photo::before,
.photo-frame--gold--simple .greeting__photo::after { content: none !important; display: none !important; border: 0 !important; }
.photo-frame--gold--simple .greeting__photo {
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
aspect-ratio: 4 / 5;
border: 0 !important;
border-radius: 0;
background-color: transparent;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat;
display: block;
min-height: 0 !important;
height: auto !important;
}
@media (max-width: 600px) {
.photo-frame--gold--simple { width: 240px; }
.photo-frame--gold--simple .greeting__photo { max-width: 240px !important; }
}
/* 23-4. SP 横余白問題の解消 */
@media (max-width: 600px) {
:root { --container-padding: 16px; }
body { overflow-x: hidden; }
.container { padding-left: 16px; padding-right: 16px; max-width: 100%; }
/* セクションが画面端と一致するように */
.section { padding-left: 0; padding-right: 0; }
}
/* 23-5. お問い合わせ確認画面 */
.contact-confirm {
display: none;
background: var(--color-bg-alt);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
padding: var(--space-5);
margin-top: var(--space-4);
}
.contact-confirm.is-shown { display: block; }
.contact-confirm__title { color: var(--color-primary); font-size: 18px; font-weight: 700; margin-bottom: var(--space-3); }
.contact-confirm dl { display: grid; grid-template-columns: 140px 1fr; gap: 10px var(--space-3); margin: 0 0 var(--space-4); font-size: 14px; }
@media (max-width: 600px) {
.contact-confirm dl { grid-template-columns: 1fr; gap: 4px var(--space-3); }
.contact-confirm dt { color: var(--color-text-mute); font-size: 12px; padding-top: 8px; }
}
.contact-confirm dt { color: var(--color-primary); font-weight: 600; }
.contact-confirm dd { margin: 0; color: var(--color-text); white-space: pre-wrap; word-break: break-word; }
.contact-confirm__buttons { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }
.contact-confirm__buttons .btn { min-width: 160px; }
@media (max-width: 600px) {
.contact-confirm__buttons { flex-direction: column; }
.contact-confirm__buttons .btn { width: 100%; }
}
.contact-form.is-confirming .contact-form__inputs { display: none; }
.contact-form.is-confirming .contact-form__submit { display: none; }
/* 23-6. お問い合わせ: WhatsApp 下の区切り線消去 + QR 中央 */
.contact-channel { border-bottom: none !important; }
.contact-channel hr,
.contact-channel--whatsapp::after,
.contact-channel--whatsapp::before { display: none !important; }
.contact-channel__icon--qr {
margin-left: auto !important;
margin-right: auto !important;
}
/* 23-7. 業務案内ヘッダー右側「料金/ブログ/お知らせ」リンクスタイル維持 */
/* 21-16. フッター SNS / メッセンジャー（公式色） */
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.footer-social a {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px;
border-radius: 50%;
font-size: 14px; font-weight: 700;
color: #fff !important;
text-decoration: none;
transition: transform .15s, filter .15s;
}
.footer-social a:hover { transform: translateY(-2px); filter: brightness(1.08); color: #fff !important; }
.footer-social .fs-line { background: #06C755; }
.footer-social .fs-wechat { background: #07C160; }
.footer-social .fs-whatsapp { background: #25D366; }
.footer-social .fs-instagram { background: linear-gradient(135deg, #F58529 0%, #DD2A7B 50%, #515BD4 100%); }
.footer-social .fs-facebook { background: #1877F2; }
.footer-social .fs-linkedin { background: #0A66C2; }
.footer-social a svg { width: 20px; height: 20px; fill: #fff; }
.footer-social__label { font-family: var(--font-en-serif); font-size: 12px; letter-spacing: 0.25em; color: rgba(255,255,255,0.6); margin-right: 8px; text-transform: uppercase; }
/* =========================================================================
* 99. Lightning 親テーマの干渉打ち消し（Phase 1 / 2026-05-16 追加）
* ========================================================================= */
h1::before, h1::after,
h2::before, h2::after,
h3::before, h3::after,
h4::before, h4::after,
h5::before, h5::after,
h6::before, h6::after {
content: none !important;
}
/* Lightning が h3 等にデコ装飾を付ける場合の打ち消し */
.section-heading__jp::after,
.strength-card__title::after,
.flow-step__title::after,
.faq-item__question::after,
.service-card__title::after,
.blog-card__title::after,
.news-item__title::after,
.mp-type__title::after,
.mp-fee-table__title::after,
.pricing-block__header::after {
content: none !important;
}
/* Lightning の container / 余白 / sidebar の余白を中和 */
.l-container,
.l-mainSection,
#main,
main.l-mainSection {
max-width: none !important;
padding: 0 !important;
width: 100% !important;
}
.l-secondary,
#secondary,
.sidebar,
aside.widget-area {
display: none !important;
}
.l-mainSection__inner {
padding: 0 !important;
}
/* =========================================================================
* 100. data-animate を WP 環境では常時表示（IntersectionObserver 不発対策）
* ========================================================================= */
[data-animate],
[data-animate]:not(.in-view) {
opacity: 1 !important;
transform: none !important;
}
/* =========================================================================
* 101. Lightning / VK Blocks のセクション境界線（水色ボーダー）を消す
* ========================================================================= */
section,
.section,
.section--alt,
.section--dark,
.entry-body section,
.main-section,
.sub-section,
[class*="wp-block-section"],
[class*="vk-section"],
.l-section,
.l-section-mainSection {
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* セクション間に挿入される divider / hr もすべて非表示 */
section + section::before,
section + section::after,
.section + .section::before,
.section + .section::after,
hr.wp-block-separator,
.section-separator,
.l-section-separator,
.wp-block-spacer {
display: none !important;
border: 0 !important;
}
/* VK ExUnit や Lightning が body 内に挿入する装飾用の罫線も無効化 */
.wp-block-image::before,
.wp-block-image::after,
main::before,
main::after,
.entry-body::before,
.entry-body::after,
article::before,
article::after {
display: none !important;
border: 0 !important;
content: none !important;
}
/* =========================================================================
* 102. trouble-list（「こんなお悩みありませんか？」リスト）の装飾
* ========================================================================= */
.trouble-list {
list-style: none;
padding: 0;
max-width: 760px;
margin: 0 auto;
display: grid;
gap: var(--space-3);
}
.trouble-list li {
background: var(--color-bg);
padding: var(--space-4) var(--space-5);
border-left: 3px solid var(--color-accent);
box-shadow: 0 2px 8px rgba(10, 37, 64, 0.06);
border-radius: 4px;
font-size: 15px;
line-height: 1.7;
color: var(--color-text);
}
/* =========================================================================
* 103. ミッション・バリュー セクション（紺背景）の装飾
* Lightning が strength-card に border-left を付与する干渉を打ち消し、
* mockup の透明感あるカード装飾を再現
* ========================================================================= */
.mission-equal-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-4);
}
.mission-equal-grid > .strength-card,
.strength-card--dark {
background: rgba(255, 255, 255, 0.04) !important;
border: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
padding: var(--space-5);
border-radius: 4px;
}
.strength-card--dark .strength-card__num {
color: var(--color-accent) !important;
font-size: 28px;
font-weight: 700;
font-family: var(--font-en-serif);
line-height: 1;
margin-bottom: var(--space-3);
}
.strength-card--dark .strength-card__title {
color: var(--color-text-invert) !important;
font-size: 18px;
margin-bottom: var(--space-2);
font-weight: 700;
}
.strength-card--dark .strength-card__en {
display: block;
font-family: var(--font-en-serif);
font-size: 13px;
letter-spacing: 0.15em;
color: var(--color-accent);
font-weight: 500;
margin-top: 4px;
}
.strength-card--dark .strength-card__text {
color: rgba(255, 255, 255, 0.78) !important;
font-size: 14px;
line-height: 1.85;
margin: 0;
}
.mission-quote {
max-width: 880px;
margin: 0 auto var(--space-7);
text-align: center;
font-family: var(--font-en-serif);
font-size: clamp(20px, 2.6vw, 32px);
line-height: 1.6;
color: var(--color-text-invert);
border: 0;
padding: 0;
}
@media (max-width: 768px) {
.mission-equal-grid { grid-template-columns: 1fr; }
}
/* section--dark 自身の境界線も完全排除（既存ルール強化） */
.section--dark,
.section.section--dark {
border: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
outline: 0 !important;
box-shadow: none !important;
}
/* セクション内の container / inner wrapper にも border 付与されないように */
.section .container,
.section--dark .container,
.section--alt .container {
border: 0 !important;
outline: 0 !important;
}
/* =========================================================================
* 104. リンク化したカード（news-item / blog-card / service-card / contact-grid__card 等）
* の下線・色を強制除去（Lightning の a 標準スタイル干渉対策）
* ========================================================================= */
a.news-item,
a.news-item:hover,
a.news-item:focus,
a.news-item:visited,
a.news-item *,
a.blog-card,
a.blog-card:hover,
a.blog-card:focus,
a.blog-card:visited,
a.blog-card *,
a.service-card,
a.service-card:hover,
a.service-card:focus,
a.service-card *,
a.contact-grid__card,
a.contact-grid__card:hover,
a.contact-grid__card *,
.news-list a,
.news-list a:hover,
.news-list a *,
.blog-grid a,
.blog-grid a:hover,
.blog-grid a *,
.faq-item__question,
.faq-item__answer {
text-decoration: none !important;
text-decoration-line: none !important;
border-bottom: 0 !important;
}
a.news-item .news-item__title,
a.blog-card .blog-card__title,
a.service-card .service-card__title,
a.contact-grid__card .contact-grid__title {
color: inherit;
text-decoration: none !important;
}
/* heading 全般も Lightning の text-decoration: underline 干渉対策 */
h1, h2, h3, h4, h5, h6,
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none !important;
}
/* =========================================================================
* 105. Lightning の h タグ装飾（下線・::before/::after 帯）を全打ち消し
* ========================================================================= */
h1, h2, h3, h4, h5, h6,
.entry-body h1, .entry-body h2, .entry-body h3, .entry-body h4,
section h1, section h2, section h3, section h4, section h5, section h6,
.flow-step__title,
.strength-card__title,
.service-card__title,
.faq-item__question,
.section-heading__jp,
.section-heading__en,
.pricing-block__header,
.mp-type__title,
.mp-fee-table__title,
.blog-card__title,
.news-item__title,
.service-strength h3,
.mp-summary-card h3,
.contact-grid__title {
border-top: 0 !important;
border-bottom: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
text-decoration: none !important;
background: transparent !important;
background-image: none !important;
padding-bottom: 0 !important;
}
h1::before, h1::after,
h2::before, h2::after,
h3::before, h3::after,
h4::before, h4::after,
h5::before, h5::after,
h6::before, h6::after,
.flow-step__title::before, .flow-step__title::after,
.strength-card__title::before, .strength-card__title::after,
.service-card__title::before, .service-card__title::after,
.section-heading__jp::before, .section-heading__jp::after,
.section-heading__en::before, .section-heading__en::after,
.pricing-block__header::before, .pricing-block__header::after,
.blog-card__title::before, .blog-card__title::after,
.news-item__title::before, .news-item__title::after,
.faq-item__question::before, .faq-item__question::after,
.mp-fee-table__title::before, .mp-fee-table__title::after {
display: none !important;
content: none !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
width: 0 !important;
height: 0 !important;
}
/* Lightning が wp-block-* や entry-body に与える水平線も非表示 */
.entry-body hr,
.entry-body::before,
.entry-body::after,
.wp-block-separator,
.wp-block-group::before,
.wp-block-group::after,
hr {
display: none !important;
border: 0 !important;
}
/* container や section の inner 系も border ゼロを強制 */
.section .container::before,
.section .container::after,
.section--dark::before,
.section--dark::after,
.section--alt::before,
.section--alt::after {
display: none !important;
content: none !important;
border: 0 !important;
background: transparent !important;
}
/* =========================================================================
* 106. 強制 OVERRIDE: Lightning 干渉に負けないよう主要要素を再宣言
* ========================================================================= */
/* ヘッダー sticky を強制 */
body.wp-singular,
body.home,
body.archive,
body.page {
padding-top: 0 !important;
}
.site-header {
position: sticky !important;
top: 0 !important;
z-index: 9999 !important;
background: var(--color-bg) !important;
width: 100% !important;
}
/* セクション見出しを強制表示 */
.section-heading {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-bottom: var(--space-6) !important;
}
.section-heading__en {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
font-family: var(--font-en-serif) !important;
font-size: 13px !important;
letter-spacing: 0.3em !important;
color: var(--color-accent) !important;
text-transform: uppercase !important;
margin-bottom: var(--space-2) !important;
}
.section-heading__jp {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
font-size: clamp(22px, 3vw, 32px) !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
text-align: center !important;
letter-spacing: 0.05em !important;
margin: 0 0 var(--space-3) !important;
line-height: 1.4 !important;
}
.section--dark .section-heading__jp { color: var(--color-text-invert) !important; }
.section-heading__divider {
display: block !important;
visibility: visible !important;
width: 48px !important;
height: 3px !important;
background: var(--color-accent) !important;
margin: var(--space-2) auto var(--space-3) !important;
}
/* FAQ アコーディオン（Q をクリックで A 開く） */
.faq-list {
max-width: 880px !important;
margin: 0 auto !important;
display: grid !important;
gap: var(--space-3) !important;
}
.faq-item {
background: var(--color-bg) !important;
border-radius: var(--radius-md) !important;
border-left: 3px solid var(--color-accent) !important;
box-shadow: 0 2px 8px rgba(10, 37, 64, 0.06) !important;
overflow: hidden !important;
}
.faq-item__question {
position: relative !important;
padding: var(--space-4) var(--space-5) !important;
padding-right: 48px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
cursor: pointer !important;
font-size: 15px !important;
line-height: 1.6 !important;
}
.faq-item__question::after {
content: "+" !important;
position: absolute !important;
right: var(--space-4) !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 22px !important;
color: var(--color-accent) !important;
font-weight: 400 !important;
width: auto !important;
height: auto !important;
display: block !important;
background: transparent !important;
border: 0 !important;
}
.faq-item.open .faq-item__question::after { content: "−" !important; }
.faq-item__answer {
display: none !important;
padding: 0 var(--space-5) var(--space-4) !important;
color: var(--color-text) !important;
font-size: 14px !important;
line-height: 1.95 !important;
}
.faq-item.open .faq-item__answer { display: block !important; }
/* お知らせ news-list レイアウト */
.news-list {
max-width: 880px !important;
margin: 0 auto !important;
display: grid !important;
gap: 0 !important;
}
.news-item {
display: grid !important;
grid-template-columns: 100px 110px 1fr !important;
align-items: center !important;
gap: var(--space-4) !important;
padding: var(--space-4) var(--space-3) !important;
border-bottom: 1px solid var(--color-line) !important;
text-decoration: none !important;
color: inherit !important;
}
.news-item:hover { background: var(--color-bg-alt) !important; }
.news-item__date {
font-family: var(--font-en-serif) !important;
font-size: 14px !important;
letter-spacing: 0.04em !important;
color: var(--color-text-mute) !important;
}
.news-item__cat {
display: inline-block !important;
padding: 4px 10px !important;
border: 1px solid var(--color-accent) !important;
border-radius: 999px !important;
font-size: 11px !important;
color: var(--color-accent) !important;
font-weight: 700 !important;
background: transparent !important;
text-align: center !important;
white-space: nowrap !important;
}
.news-item__title {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
line-height: 1.6 !important;
margin: 0 !important;
}
@media (max-width: 600px) {
.news-item {
grid-template-columns: auto auto !important;
grid-template-rows: auto auto !important;
gap: 8px var(--space-3) !important;
}
.news-item__title { grid-column: 1 / -1 !important; }
}
/* =========================================================================
* 107. pricing-block__header の見出し背景を強制復活
* override CSS で background: transparent にしてしまった分の修正
* ========================================================================= */
.pricing-block__header {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-dark) 100%) !important;
background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-bg-dark) 100%) !important;
color: var(--color-text-invert) !important;
padding: var(--space-4) var(--space-5) !important;
font-weight: 700 !important;
font-size: 17px !important;
letter-spacing: 0.05em !important;
border: 0 !important;
}
.pricing-block {
border-radius: var(--radius-md) !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(10, 37, 64, 0.08) !important;
margin-bottom: var(--space-5) !important;
background: var(--color-bg) !important;
}
.pricing-block__list { padding: var(--space-3) var(--space-5) !important; }
.pricing-block__item {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
padding: var(--space-3) 0 !important;
border-bottom: 1px solid var(--color-line) !important;
gap: var(--space-3) !important;
}
.pricing-block__item:last-child { border-bottom: 0 !important; }
.pricing-block__name {
color: var(--color-text) !important;
font-size: 14px !important;
flex: 1 !important;
}
/* =========================================================================
* 108. ヘッダー余白・ナビ垂直整列の微調整
* ========================================================================= */
.site-header__inner {
gap: var(--space-5) !important;
align-items: center !important;
}
.site-header__logo {
margin-right: var(--space-4) !important;
}
.site-nav__list {
display: flex !important;
align-items: center !important;
gap: var(--space-4) !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.site-nav__item--has-dropdown {
display: flex !important;
align-items: center !important;
position: relative !important;
}
.site-nav__link {
display: inline-flex !important;
align-items: center !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.site-nav__link.has-dropdown {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
}
.header-actions {
display: flex !important;
align-items: center !important;
gap: var(--space-3) !important;
margin-left: auto !important;
}
/* =========================================================================
* 109. news-list の区切り線を復活 + リンク化された各 news-item に border-bottom
* （前段の `a.news-item { border-bottom: 0; }` を上書きするため最後に宣言）
* ========================================================================= */
a.news-item,
a.news-item:hover,
a.news-item:focus,
a.news-item:visited,
.news-list > a,
.news-list > article,
.news-item {
border-bottom: 1px solid var(--color-line) !important;
}
.news-list > a:last-child,
.news-list > article:last-child,
.news-item:last-child {
border-bottom: 0 !important;
}
/* blog-card にも同じ復活処理（リスト系の下線対策） */
.blog-card {
border: 1px solid var(--color-line) !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
background: var(--color-bg) !important;
display: block !important;
box-shadow: 0 2px 8px rgba(10, 37, 64, 0.06) !important;
}
/* =========================================================================
* 110. news-item カテゴリ空の placeholder（grid 維持のため透明表示）
* ========================================================================= */
.news-item__cat--empty {
visibility: hidden !important;
border-color: transparent !important;
}
/* =========================================================================
* 111. news-item カテゴリ pill 見切れ対策
* grid 2 列目を固定幅 110px → auto に変更し、pill の自然幅で表示
* ========================================================================= */
.news-item {
grid-template-columns: 100px auto 1fr !important;
}
.news-item__cat {
justify-self: start !important;
box-sizing: border-box !important;
width: auto !important;
min-width: 96px !important;
max-width: none !important;
/* pill 全体を flex 化して上下中央配置 + 十分な高さを確保 */
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 28px !important;
padding: 4px 14px !important;
line-height: 1.2 !important;
/* 104 セクションの `a.news-item * { border-bottom: 0 !important }` が pill の
下側 border まで消していたので border 全体を改めて指定 */
border-top: 1px solid var(--color-accent) !important;
border-right: 1px solid var(--color-accent) !important;
border-bottom: 1px solid var(--color-accent) !important;
border-left: 1px solid var(--color-accent) !important;
}
/* 念のため `a.news-item *` の border-bottom: 0 を直接打ち消す */
a.news-item .news-item__cat,
.news-list a .news-item__cat {
border-bottom: 1px solid var(--color-accent) !important;
}
/* =========================================================================
* 112. Contact Form 7 出力のスタイル統一
* .contact-form--cf7 (page-contact.php のラッパー) 内の CF7 form に、
* Formspree 時代と同じレイアウトを当てる
* ========================================================================= */
.contact-form--cf7 .wpcf7-form { display: block; }
.contact-form--cf7 .cf7-row { margin-bottom: var(--space-4); }
.contact-form--cf7 .cf7-row label {
display: block;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 8px;
font-size: 14px;
}
.contact-form--cf7 .cf7-row .req {
color: #C53030;
font-size: 12px;
margin-left: 6px;
font-weight: 400;
}
.contact-form--cf7 .wpcf7-form-control-wrap {
display: block;
width: 100%;
}
.contact-form--cf7 input[type="text"],
.contact-form--cf7 input[type="email"],
.contact-form--cf7 input[type="tel"],
.contact-form--cf7 select,
.contact-form--cf7 textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--color-line);
border-radius: var(--radius-sm);
font-family: inherit;
font-size: 15px;
background: #fff;
box-sizing: border-box;
}
.contact-form--cf7 textarea {
min-height: 140px;
resize: vertical;
}
.contact-form--cf7 input:focus,
.contact-form--cf7 select:focus,
.contact-form--cf7 textarea:focus {
outline: 2px solid var(--color-accent);
outline-offset: -1px;
}
.contact-form--cf7 .wpcf7-not-valid-tip {
color: #C53030;
font-size: 13px;
margin-top: 4px;
display: block;
}
.contact-form--cf7 .wpcf7-response-output {
margin: var(--space-4) 0 0 !important;
padding: 12px 16px !important;
border-radius: var(--radius-sm) !important;
font-size: 14px !important;
}
.contact-form--cf7 .wpcf7 form.sent .wpcf7-response-output {
border-color: #06C755 !important;
background: #E6F9EE;
color: #08753A;
}
.contact-form--cf7 .wpcf7 form.invalid .wpcf7-response-output,
.contact-form--cf7 .wpcf7 form.failed .wpcf7-response-output {
border-color: #C53030 !important;
background: #FDECEA;
color: #9B1C1C;
}
.contact-form--cf7 input.wpcf7-submit {
display: inline-block;
background: var(--color-accent);
color: #fff;
border: none;
padding: 14px 36px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.06em;
border-radius: var(--radius-sm);
cursor: pointer;
transition: transform .15s, box-shadow .15s, filter .15s;
width: auto;
}
.contact-form--cf7 input.wpcf7-submit:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(201, 169, 97, 0.35);
filter: brightness(1.05);
}
.contact-form--cf7 .wpcf7-spinner { vertical-align: middle; }
/* =========================================================================
* 112-x. Contact Form 装飾強化（カード化 + フォーカス演出 + select 矢印 + 送信ボタンの輝き）
* ========================================================================= */
/* フォーム全体をカード化 */
.contact-form.contact-form--cf7 {
max-width: 760px;
margin: var(--space-7) auto 0;
padding: var(--space-6) clamp(var(--space-4), 4vw, var(--space-6));
background: linear-gradient(180deg, #ffffff 0%, #fbfaf7 100%);
border: 1px solid var(--color-line);
border-radius: var(--radius-md);
box-shadow: 0 12px 32px rgba(10, 37, 64, 0.06), 0 2px 4px rgba(10, 37, 64, 0.04);
position: relative;
overflow: hidden;
}
/* 上部にゴールド帯（事務所カラーアクセント） */
.contact-form.contact-form--cf7::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-accent), #d4b366, var(--color-accent));
}
/* タイトル装飾 */
.contact-form.contact-form--cf7 > h3 {
font-family: var(--font-en-serif), serif;
font-size: 22px !important;
font-weight: 600 !important;
color: var(--color-primary) !important;
text-align: center;
margin: 0 0 var(--space-2) !important;
letter-spacing: 0.05em;
}
.contact-form.contact-form--cf7 > h3::after {
content: "Contact Form";
display: block;
font-family: var(--font-en-serif), serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--color-accent);
margin-top: 4px;
font-weight: 400;
}
/* タイトルを日本語のみに（::after で英語サブを出すため） */
.contact-form.contact-form--cf7 > h3 {
font-family: inherit !important;
}
/* ラベルに左ゴールドバー */
.contact-form--cf7 .cf7-row {
margin-bottom: var(--space-4) !important;
}
.contact-form--cf7 .cf7-row label {
position: relative;
padding-left: 12px;
font-size: 14px !important;
letter-spacing: 0.04em;
margin-bottom: 4px !important; /* 入力との間隔を詰める */
}
/* CF7 が wpautop で挿入する
+ による余白を圧縮 */
.contact-form--cf7 .cf7-row > p {
margin: 0 !important;
}
.contact-form--cf7 .cf7-row > p > br:first-of-type {
display: none;
}
.contact-form--cf7 .cf7-row label + br,
.contact-form--cf7 .cf7-row label br {
display: none;
}
.contact-form--cf7 .cf7-row label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 14px;
background: var(--color-accent);
border-radius: 2px;
}
/* 必須マークを pill 風に */
.contact-form--cf7 .cf7-row .req {
display: inline-block;
background: #C53030;
color: #fff !important;
font-size: 10px !important;
font-weight: 700 !important;
padding: 2px 7px !important;
border-radius: 999px;
margin-left: 8px !important;
letter-spacing: 0.05em;
vertical-align: middle;
line-height: 1.4;
}
/* 入力フィールドの装飾強化 */
.contact-form--cf7 input[type="text"],
.contact-form--cf7 input[type="email"],
.contact-form--cf7 input[type="tel"],
.contact-form--cf7 select,
.contact-form--cf7 textarea {
padding: 12px 16px !important;
border: 1px solid #dfe3e8 !important;
border-radius: 6px !important;
background: #fff !important;
transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact-form--cf7 input[type="text"]:hover,
.contact-form--cf7 input[type="email"]:hover,
.contact-form--cf7 input[type="tel"]:hover,
.contact-form--cf7 select:hover,
.contact-form--cf7 textarea:hover {
border-color: #c5cbd3 !important;
}
.contact-form--cf7 input:focus,
.contact-form--cf7 select:focus,
.contact-form--cf7 textarea:focus {
outline: none !important;
border-color: var(--color-accent) !important;
box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.18) !important;
background: #fffefb !important;
}
/* セレクトの矢印を自前で（appearance: none） */
.contact-form--cf7 select {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-image: url("data:image/svg+xml;utf8,") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 12px 8px !important;
padding-right: 40px !important;
cursor: pointer;
}
/* 送信ボタンのデザイン強化 */
.contact-form--cf7 input.wpcf7-submit {
background: linear-gradient(180deg, var(--color-accent), #b89251) !important;
padding: 16px 48px !important;
font-size: 15px !important;
letter-spacing: 0.12em !important;
border-radius: 999px !important;
box-shadow: 0 4px 12px rgba(201, 169, 97, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
position: relative;
min-width: 280px;
}
.contact-form--cf7 input.wpcf7-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 20px rgba(201, 169, 97, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
filter: brightness(1.08) !important;
}
.contact-form--cf7 input.wpcf7-submit:active {
transform: translateY(0) !important;
box-shadow: 0 2px 6px rgba(201, 169, 97, 0.3) !important;
}
.contact-form--cf7 .contact-form__submit {
padding-top: var(--space-3);
}
/* バリデーションエラー強調 */
.contact-form--cf7 .wpcf7-not-valid-tip {
background: #FDECEA;
border-left: 3px solid #C53030;
padding: 6px 10px !important;
border-radius: 4px;
margin-top: 6px !important;
font-weight: 600;
}
.contact-form--cf7 input.wpcf7-not-valid,
.contact-form--cf7 select.wpcf7-not-valid,
.contact-form--cf7 textarea.wpcf7-not-valid {
border-color: #C53030 !important;
background: #FFF8F8 !important;
}
/* レスポンスメッセージ（送信完了等）をリッチに */
.contact-form--cf7 .wpcf7-response-output {
border-width: 1px !important;
border-style: solid !important;
font-weight: 600 !important;
text-align: center;
}
/* 個人情報注記のスタイル */
.contact-form--cf7 .wpcf7-form > p:last-of-type {
background: #f7f8fa;
border-radius: 6px;
padding: 10px 14px !important;
margin-top: var(--space-4) !important;
font-size: 11px !important;
color: var(--color-text-mute);
text-align: center;
}
/* SP 調整 */
@media (max-width: 600px) {
.contact-form.contact-form--cf7 {
padding: var(--space-5) var(--space-4);
margin: var(--space-5) auto 0;
}
.contact-form--cf7 input.wpcf7-submit {
width: 100% !important;
min-width: 0 !important;
padding: 14px 24px !important;
}
}
/* =========================================================================
* 113. Gutenberg 化された /fee/ の Table ブロックを mockup と同等スタイルに
* Group.pricing-block の内側にある wp-block-table を mockup の
* .pricing-block__item レイアウト（名前 ←→ 料金）に揃える
* ========================================================================= */
.pricing-block.wp-block-group {
max-width: 860px !important;
margin: 0 auto var(--space-5) !important;
background: var(--color-bg) !important;
border: 1px solid var(--color-line) !important;
border-radius: var(--radius-md) !important;
overflow: hidden !important;
padding: 0 !important;
}
.pricing-block .pricing-block__header {
background: linear-gradient(135deg, var(--color-primary), #1a4067) !important;
color: #fff !important;
padding: var(--space-3) var(--space-5) !important;
font-size: 16px !important;
font-weight: 700 !important;
margin: 0 !important;
letter-spacing: 0.04em !important;
}
.pricing-block .pricing-block__table.wp-block-table {
margin: 0 !important;
}
.pricing-block .pricing-block__table table {
width: 100% !important;
border: 0 !important;
border-collapse: collapse !important;
}
.pricing-block .pricing-block__table table td {
border: 0 !important;
border-bottom: 1px solid var(--color-line) !important;
padding: var(--space-3) var(--space-5) !important;
vertical-align: middle !important;
}
.pricing-block .pricing-block__table table tr:last-child td {
border-bottom: 0 !important;
}
.pricing-block .pricing-block__table table td:first-child {
color: var(--color-text) !important;
font-size: 14px !important;
text-align: left !important;
}
.pricing-block .pricing-block__table table td:last-child {
color: var(--color-accent) !important;
font-family: 'Libre Baskerville', var(--font-en-serif), serif !important;
font-weight: 700 !important;
font-size: 16px !important;
text-align: right !important;
white-space: nowrap !important;
width: 1% !important;
}
/* 下部 CTA (Gutenberg Group + Buttons) のスタイル統一 */
.service-bottom-cta.wp-block-group {
text-align: center;
padding: var(--space-6);
background: var(--color-bg-alt);
border-radius: var(--radius-md);
margin: var(--space-7) auto 0;
max-width: 860px;
}
.service-bottom-cta.wp-block-group h3 {
font-size: 20px;
color: var(--color-primary);
margin-bottom: var(--space-3);
}
.service-bottom-cta.wp-block-group .wp-block-buttons {
justify-content: center;
margin-top: var(--space-4);
}
.service-bottom-cta.wp-block-group .wp-block-button__link {
padding: 12px 28px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
}
.service-bottom-cta.wp-block-group .wp-block-button.is-style-outline .wp-block-button__link {
background: transparent;
border: 1.5px solid var(--color-primary);
color: var(--color-primary);
}
.service-bottom-cta.wp-block-group .wp-block-button:not(.is-style-outline) .wp-block-button__link {
background: var(--color-accent) !important;
color: #fff !important;
border: 1.5px solid var(--color-accent) !important;
}
/* =========================================================================
* 114. ブログ記事 / お知らせ本文の見出し装飾を復活
* 105 セクションで Lightning の h タグ装飾を全打ち消ししたが、
* ブログ記事本文（.post-single__content）と news 記事本文の見出しでは
* 青ボーダー + ゴールドアクセントを復活させ、長文を読みやすくする
* ========================================================================= */
.post-single__content h2 {
border-left: 5px solid var(--color-primary) !important;
border-bottom: 1px solid var(--color-line) !important;
padding: 10px 16px !important;
margin: var(--space-6) 0 var(--space-4) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
background: linear-gradient(90deg, rgba(10, 37, 64, 0.05), transparent) !important;
line-height: 1.5 !important;
}
.post-single__content h3 {
border-left: 4px solid var(--color-accent) !important;
padding: 6px 14px !important;
margin: var(--space-5) 0 var(--space-3) !important;
font-size: 19px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
line-height: 1.5 !important;
}
.post-single__content h4 {
border-bottom: 2px dotted var(--color-accent) !important;
padding: 4px 0 6px !important;
margin: var(--space-4) 0 var(--space-3) !important;
font-size: 17px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
}
.post-single__content h5,
.post-single__content h6 {
font-size: 15px !important;
font-weight: 700 !important;
color: var(--color-primary) !important;
margin: var(--space-4) 0 var(--space-2) !important;
}
/* 段落 / リスト / 引用 / コード の読みやすさ */
.post-single__content p {
line-height: 1.85;
margin: 0 0 var(--space-3);
}
.post-single__content ul,
.post-single__content ol {
margin: 0 0 var(--space-3) 1.5em;
line-height: 1.85;
}
.post-single__content blockquote {
border-left: 4px solid var(--color-accent);
padding: var(--space-3) var(--space-4);
margin: var(--space-4) 0;
background: var(--color-bg-alt);
font-style: italic;
color: var(--color-text);
}
.post-single__content a {
color: var(--color-accent);
text-decoration: underline;
}
.post-single__content img {
max-width: 100%;
height: auto;
border-radius: var(--radius-sm);
margin: var(--space-3) 0;
}
/* news 記事本文（single-news.php）にも同じ装飾を適用 */
.single-news .post-single__content h2,
.single-news article h2 { /* 念のため */
border-left: 5px solid var(--color-primary) !important;
}