:root {
--yellow: #F8CA00;
--yellow-light: #FFE066;
--yellow-soft: #FFF5CC;
--pink: #F53C65;
--pink-light: #FF7B96;
--pink-soft: #FFE5EC;
--black: #1a1a1a;
--gray-900: #2a2a2a;
--gray-700: #4a4a4a;
--gray-500: #888;
--gray-300: #d4d4d4;
--gray-150: #e4e4e4;
--gray-100: #f4f4f4;
--gray-50: #fafafa;
--white: #ffffff;
--container-max: 1280px;
--section-py: 96px;
--radius-pill: 999px;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%; scrollbar-gutter: stable;
} @supports not (scrollbar-gutter: stable) {
html {
overflow-y: scroll;
}
}
body {
font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
color: var(--black);
background: var(--white);
line-height: 1.7;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
background: none;
border: 0;
}
ul,
ol {
list-style: none;
}
.roboto {
font-family: 'Roboto', sans-serif;
} .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
max-width: var(--container-max);
margin: 0 auto;
}
section {
padding: var(--section-py) 40px;
}.section-tag {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.25em;
color: var(--gray-700);
margin-bottom: 28px;
font-weight: 700;
text-transform: uppercase;
}
.section-tag::before {
content: '';
width: 28px;
height: 1px;
background: var(--black);
} .section-title {
font-size: 36px;
font-weight: 700;
color: var(--black);
margin-bottom: 48px;
line-height: 1.45;
letter-spacing: -0.01em;
}
.section-title .accent {
position: relative;
display: inline-block;
padding-bottom: 4px;
border-bottom: 2px solid var(--yellow);
} .btn-primary {
background: var(--black);
color: var(--white);
padding: 20px 44px;
border: 1px solid var(--black);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 14px;
border-radius: 2px;
font-family: 'Noto Sans JP', sans-serif;
}
.btn-primary:hover {
background: var(--white);
color: var(--black);
transform: translateY(-2px);
}
.btn-primary::after {
content: '→';
font-size: 16px;
} .btn-secondary {
background: transparent;
color: var(--black);
padding: 20px 44px;
border: 1px solid var(--black);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.08em;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
border-radius: 2px;
display: inline-flex;
align-items: center;
}
.btn-secondary:hover {
background: var(--black);
color: var(--white);
} .trust-badges {
display: flex;
gap: 32px;
flex-wrap: wrap;
}
.badge {
font-size: 13px;
color: var(--gray-700);
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
}
.badge::before {
content: '';
width: 2px;
height: 14px;
background: var(--yellow);
} .floating-cta {
display: none;
position: fixed;
bottom: 16px;
left: 16px;
right: 16px;
background: var(--black);
color: var(--white);
padding: 18px;
text-align: center;
text-decoration: none;
z-index: 99;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.05em;
border-radius: 2px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}.page-loader {
position: fixed;
inset: 0;
z-index: 10000;
background: var(--yellow);
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto; opacity: 1;
visibility: visible;
transition:
opacity 0.7s cubic-bezier(0.65, 0, 0.35, 1),
visibility 0s linear 0.7s;
} body.bp-loading {
overflow: hidden;
} .page-loader.is-hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.page-loader__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
padding: 0 32px;
}
.page-loader__logo {
display: block;
height: 80px;
width: auto;
max-width: 80vw;
flex-shrink: 0; object-fit: contain; will-change: opacity, transform;
backface-visibility: hidden;
transform-origin: 50% 50%;
opacity: 0;
transform: scale(0.92);
animation: bp-loader-logo-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}
@keyframes bp-loader-logo-in {
to { opacity: 1; transform: scale(1); }
} .page-loader__bar {
width: 220px;
max-width: 70vw;
height: 2px;
background: rgba(26, 26, 26, 0.08);
overflow: hidden;
border-radius: 2px;
opacity: 0;
animation: bp-loader-bar-in 0.4s ease 0.5s forwards;
}
@keyframes bp-loader-bar-in {
to { opacity: 1; }
}
.page-loader__bar span {
display: block;
height: 100%;
width: 100%;
background: linear-gradient(90deg, var(--yellow) 0%, var(--pink) 100%);
transform: translateX(-100%);
animation: bp-loader-bar-fill 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}
@keyframes bp-loader-bar-fill {
to { transform: translateX(0); }
} body:not(.home) .page-loader__logo {
animation-duration: 0.25s;
animation-delay: 0s;
}
body:not(.home) .page-loader__bar {
animation-delay: 0.05s;
animation-duration: 0.15s;
}
body:not(.home) .page-loader__bar span {
animation-duration: 0.3s;
animation-delay: 0.05s;
}
@media (max-width: 640px) {
.page-loader__logo {
height: 56px;
}
.page-loader__bar {
width: 180px;
}
} .site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
background: var(--yellow);
z-index: 100;
box-shadow: 0 1px 0 rgba(26, 26, 26, 0.06);
transform: translateY(0); transition:
transform 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.12s,
box-shadow 0.3s ease;
}
.site-header.is-collapsed {
transform: translateY(-105%);
pointer-events: none; transition: transform 0.4s cubic-bezier(0.55, 0, 0.45, 1);
} .floating-logo {
position: fixed;
top: 24px;
left: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--yellow);
border: 0;
cursor: pointer;
padding: 0;
z-index: 99;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transform: scale(0.35) translateY(-12px) rotate(-90deg);
box-shadow:
0 14px 32px -10px rgba(26, 26, 26, 0.3),
0 0 0 1px rgba(26, 26, 26, 0.04); transition:
opacity 0.22s ease,
visibility 0s linear 0.28s,
transform 0.3s cubic-bezier(0.55, 0, 0.45, 1),
box-shadow 0.25s ease;
}
.floating-logo.is-visible {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0) rotate(0deg); transition:
opacity 0.32s ease 0.22s,
visibility 0s linear 0.22s,
transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s,
box-shadow 0.25s ease;
}
.floating-logo:hover {
transform: scale(1.08) translateY(0) rotate(0deg);
box-shadow:
0 18px 40px -10px rgba(26, 26, 26, 0.38),
0 0 0 1px rgba(26, 26, 26, 0.08);
}
.floating-logo:active {
transform: scale(0.96) translateY(0) rotate(0deg);
}
.floating-logo__img {
width: 32px;
height: auto;
display: block;
pointer-events: none;
} .floating-logo::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 4px solid var(--pink);
opacity: 0;
pointer-events: none;
}
.floating-logo.is-visible::after {
animation: bp-fab-ring 1.9s cubic-bezier(0.16, 1, 0.3, 1) 0.32s 1;
}
@keyframes bp-fab-ring {
0%   { transform: scale(1);    opacity: 0.95; }
70%  { transform: scale(1.65); opacity: 0;    }
100% { transform: scale(1.65); opacity: 0;    }
} .floating-logo::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 4px solid var(--pink);
opacity: 0;
pointer-events: none;
z-index: -1;
}
.floating-logo.is-visible:hover::before {
animation: bp-fab-pink-wave 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes bp-fab-pink-wave {
0%   { transform: scale(1);   opacity: 0.95; }
70%  { transform: scale(1.7); opacity: 0;    }
100% { transform: scale(1.7); opacity: 0;    }
}
.header-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 16px 40px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
position: relative;
z-index: 100;
}
.logo,
.site-header .custom-logo-link {
display: inline-flex;
align-items: center;
text-decoration: none;
line-height: 0;
margin: 0;
}
.logo__img,
.site-header .custom-logo {
display: block;
height: 56px;
width: auto;
max-width: 300px;
}
.global-nav {
display: flex;
align-items: center;
}
.global-nav .primary-menu,
.global-nav ul {
display: flex;
gap: 8px;
list-style: none;
align-items: stretch;
margin: 0;
padding: 0;
}
.global-nav .primary-menu__item {
display: flex;
align-items: stretch;
}
.global-nav a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
color: var(--black);
text-decoration: none;
padding: 6px 16px;
position: relative;
transition: color 0.2s;
}
.primary-menu__label {
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
line-height: 1;
}
.primary-menu__sub {
font-size: 10px;
letter-spacing: 0.05em;
color: var(--gray-700);
font-weight: 500;
line-height: 1;
}
.primary-menu__item.has-mega > a .primary-menu__label::after {
content: '';
display: inline-block;
width: 6px;
height: 6px;
margin-left: 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.25s ease;
vertical-align: middle;
opacity: 0.7;
}
.primary-menu__item.has-mega.is-active > a .primary-menu__label::after,
.primary-menu__item.has-mega:hover > a .primary-menu__label::after {
transform: translateY(0) rotate(225deg);
opacity: 1;
}
.global-nav .primary-menu__item.is-active > a,
.global-nav a:not(.nav-cta):hover {
color: var(--black);
}
.global-nav a:not(.nav-cta)::after {
content: '';
position: absolute;
left: 16px;
right: 16px;
bottom: 0;
height: 2px;
background: var(--black);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.25s ease;
}
.global-nav .primary-menu__item.is-active > a::after,
.global-nav a:not(.nav-cta):hover::after {
transform: scaleX(1);
}
.global-nav .nav-cta {
background: var(--black);
color: var(--white) !important;
padding: 10px 22px;
border-radius: 2px;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.12em;
transition: all 0.2s;
flex-direction: column;
gap: 3px;
align-self: center;
}
.global-nav .nav-cta .primary-menu__label {
color: var(--white);
}
.global-nav .nav-cta .primary-menu__sub {
color: rgba(255, 255, 255, 0.7);
}
.global-nav .nav-cta::after {
display: none;
}
.global-nav .nav-cta:hover {
background: var(--white);
color: var(--black) !important;
}
.global-nav .nav-cta:hover .primary-menu__label {
color: var(--black);
}
.global-nav .nav-cta:hover .primary-menu__sub {
color: var(--gray-700);
} .megamenu-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(26, 26, 26, 0.32);
opacity: 0;
transition: opacity 0.28s ease;
z-index: 90;
pointer-events: none;
}
.site-header.is-mega-open ~ .megamenu-overlay {
opacity: 1 !important;
pointer-events: auto;
}
.megamenu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--white);
border-top: 1px solid var(--gray-100);
box-shadow: 0 24px 48px -24px rgba(26, 26, 26, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease;
z-index: 99;
pointer-events: none;
}
.megamenu.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.megamenu-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 56px 40px 64px;
display: grid;
grid-template-columns: 280px 1fr;
gap: 64px;
align-items: start;
}
.megamenu-head {
position: relative;
padding-right: 32px;
border-right: 1px solid var(--gray-100);
}
.megamenu-head__tag {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.32em;
color: var(--gray-500);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.megamenu-head__tag::before {
content: '';
width: 24px;
height: 1px;
background: var(--black);
}
.megamenu-head__title {
font-family: 'Roboto', sans-serif;
font-size: 32px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--black);
line-height: 1.1;
margin: 0 0 6px;
}
.megamenu-head__subtitle {
font-size: 14px;
color: var(--gray-700);
margin: 0 0 20px;
font-weight: 500;
}
.megamenu-head__lead {
font-size: 13px;
color: var(--gray-700);
line-height: 1.85;
margin: 0 0 24px;
}
.megamenu-head__more {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--black);
text-decoration: none;
padding-bottom: 6px;
border-bottom: 1px solid var(--black);
transition: gap 0.2s ease;
}
.megamenu-head__more:hover {
gap: 14px;
}
.megamenu-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.megamenu-card {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
background: var(--gray-50);
border: 1px solid transparent;
text-decoration: none;
color: var(--black);
transition: all 0.22s ease;
position: relative;
overflow: hidden;
}
.megamenu-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--yellow);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.25s ease;
}
.megamenu-card:hover {
background: var(--white);
border-color: var(--gray-100);
box-shadow: 0 8px 20px -10px rgba(26, 26, 26, 0.18);
transform: translateY(-2px);
}
.megamenu-card:hover::before {
transform: scaleY(1);
transform-origin: top;
}
.megamenu-card__icon {
width: 44px;
height: 44px;
flex-shrink: 0;
background: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--black);
border: 1px solid var(--gray-100);
transition: all 0.22s ease;
}
.megamenu-card:hover .megamenu-card__icon {
background: var(--yellow-soft);
border-color: var(--yellow);
}
.megamenu-card__icon svg {
width: 22px;
height: 22px;
}
.megamenu-card__text {
flex: 1;
min-width: 0;
}
.megamenu-card__text h3 {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1;
margin: 0 0 6px;
color: var(--black);
}
.megamenu-card__text p {
font-size: 12px;
color: var(--gray-700);
margin: 0;
line-height: 1.4;
}
.megamenu-card__arrow {
font-size: 14px;
color: var(--gray-300);
transition: all 0.22s ease;
flex-shrink: 0;
}
.megamenu-card:hover .megamenu-card__arrow {
color: var(--black);
transform: translateX(3px);
} .nav-toggle {
display: none;
width: 40px;
height: 40px;
position: relative;
z-index: 101;
}
.nav-toggle span {
position: absolute;
left: 8px;
right: 8px;
height: 2px;
background: var(--black);
transition: all 0.3s;
}
.nav-toggle span:nth-child(1) { top: 13px; }
.nav-toggle span:nth-child(2) { top: 19px; }
.nav-toggle span:nth-child(3) { top: 25px; }
.nav-toggle.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); } .site-footer {
background: var(--black);
color: var(--gray-300);
padding: 100px 40px 40px;
}
.footer-inner {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 80px;
}
.footer-logo {
display: block;
margin: 0;
line-height: 0;
overflow: hidden;
width: fit-content;
}
.footer-logo__img {
display: block;
height: 40px;
width: auto;
filter: brightness(0) invert(1);
margin: 0;
} .footer-logo--has-upload {
height: 100px;
margin-bottom: 8px;
}
.footer-logo__img--upload {
display: block;
width: 200px;
height: auto;
filter: none;
margin: -50px 0 0 -28px;
} .footer-firm-name {
font-size: 14px;
font-weight: 700;
color: var(--white);
letter-spacing: 0.04em;
margin: 6px 0 14px;
}
.footer-desc {
font-size: 13px;
line-height: 1.9;
color: var(--gray-300);
}
.site-footer h4 {
color: var(--white);
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.25em;
margin-bottom: 24px;
font-weight: 700;
padding-bottom: 12px;
border-bottom: 1px solid var(--gray-700);
}
.site-footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer ul li {
margin-bottom: 14px;
}
.site-footer ul a {
color: var(--gray-300);
text-decoration: none;
font-size: 13px;
transition: color 0.2s;
}
.site-footer ul a:hover {
color: var(--yellow);
}
.copyright {
border-top: 1px solid var(--gray-700);
padding-top: 32px;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.15em;
color: var(--gray-500);
max-width: var(--container-max);
margin: 0 auto;
}.hero {
padding: 130px 40px 40px;
max-width: var(--container-max);
margin: 0 auto;
position: relative;
display: flex;
flex-direction: column;
}
.hero-body {
flex: 1;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 440px);
gap: 80px;
align-items: stretch;
position: relative;
z-index: 1;
}
.hero-main {
display: flex;
flex-direction: column;
}
.hero-mark {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 48px;
}
.hero-mark__line {
width: 64px;
height: 1px;
background: var(--black);
display: block;
}
.hero-mark__id {
font-size: 11px;
letter-spacing: 0.36em;
font-weight: 700;
color: var(--gray-700);
}
.hero-statement {
font-family: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
font-size: 32px;
font-weight: 400;
line-height: 1.95;
color: var(--black);
letter-spacing: 0.06em;
max-width: 920px;
margin: 0 0 32px;
}
.hero-identity {
font-size: 11px;
letter-spacing: 0.36em;
color: var(--gray-700);
font-weight: 600;
margin: 0;
}
.hero-scroll {
margin-top: auto;
padding-top: 48px;
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
color: var(--gray-700);
text-decoration: none;
width: fit-content;
} .hero-scroll--center {
margin: 24px auto 0;
padding-top: 0;
align-items: center;
display: flex;
}
.hero-scroll__label {
font-size: 10px;
letter-spacing: 0.4em;
font-weight: 700;
}
.hero-scroll__line {
width: 1px;
height: 36px;
background: var(--gray-300);
position: relative;
overflow: hidden;
display: inline-block;
}
.hero-scroll__line::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 36px;
background: var(--black);
animation: bp-scroll-line 2.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes bp-scroll-line {
0%   { transform: translateY(-100%); }
60%  { transform: translateY(100%); }
100% { transform: translateY(100%); }
} .hero-side {
display: flex;
align-items: stretch;
justify-content: flex-end;
position: relative;
padding-top: 6px;
}
.hero-visual {
position: relative;
margin: 0;
width: 100%;
max-width: 440px;
aspect-ratio: 4 / 5;
max-height: 520px;
align-self: stretch;
}
.hero-visual__accent {
position: absolute;
top: 14px;
left: 14px;
right: -14px;
bottom: -14px;
background: var(--yellow-soft);
border: 1px solid rgba(26, 26, 26, 0.06);
z-index: 0;
pointer-events: none;
}
.hero-visual__img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: transparent;
box-shadow: none;
}
.hero-visual__overlay {
position: absolute;
top: 24px;
right: -28px;
z-index: 2;
background: var(--white);
padding: 18px 22px 20px;
display: flex;
flex-direction: column;
gap: 10px;
box-shadow: 0 8px 24px -12px rgba(26, 26, 26, 0.18);
border-top: 2px solid var(--black);
min-width: 130px;
}
.hero-visual__num {
font-size: 28px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--black);
line-height: 1;
}
.hero-visual__label {
font-size: 9px;
letter-spacing: 0.32em;
color: var(--gray-700);
font-weight: 700;
line-height: 1.6;
padding-top: 8px;
border-top: 1px solid var(--gray-100);
}
.hero-visual__caption {
position: absolute;
bottom: 12px;
left: -32px;
z-index: 2;
display: flex;
align-items: flex-start;
}
.hero-visual__caption .hero-vertical__text,
.hero-vertical__text {
writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
text-orientation: mixed;
font-size: 12px;
letter-spacing: 0.4em;
color: var(--gray-700);
font-weight: 500;
line-height: 1.4;
padding-top: 16px;
position: relative;
}
.hero-visual__caption .hero-vertical__text::before,
.hero-vertical__text::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 12px;
background: var(--black);
} .hero-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
padding-top: 24px;
margin-top: 32px;
border-top: 1px solid var(--gray-100);
position: relative;
z-index: 1;
}
.hero-footer--stats {
grid-template-columns: repeat(4, 1fr);
gap: 32px;
}
.hero-stat {
display: flex;
flex-direction: column;
gap: 6px;
align-items: flex-start;
}
.hero-stat__num {
font-family: 'Roboto', sans-serif;
font-size: 30px;
font-weight: 500;
color: var(--black);
letter-spacing: -0.01em;
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 1px;
}
.hero-stat__plus {
font-size: 18px;
color: var(--yellow);
font-weight: 700;
margin: 0 0 0 1px;
line-height: 1;
}
.hero-stat__num small {
font-size: 13px;
color: var(--gray-700);
font-weight: 500;
margin-left: 3px;
letter-spacing: 0;
}
.hero-stat__label {
font-size: 11px;
color: var(--gray-700);
letter-spacing: 0.04em;
font-weight: 500;
}
.hero-footer--stats .hero-footer__col:not(:first-child)::before {
display: none;
} .hero-stats-lead {
margin: 16px 0 0;
padding: 0;
font-size: 14px;
line-height: 2;
color: var(--gray-700);
text-align: left;
max-width: 920px;
}
@media (max-width: 768px) {
.hero-stats-lead {
font-size: 13px;
}
}
.hero-footer__col {
display: flex;
flex-direction: column;
gap: 10px;
position: relative;
}
.hero-footer__col:not(:first-child)::before {
content: '';
position: absolute;
top: 50%;
left: -24px;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: var(--gray-300);
border-radius: 50%;
}
.hero-footer__label {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--gray-500);
font-weight: 700;
}
.hero-footer__value {
font-size: 13px;
color: var(--black);
font-weight: 500;
letter-spacing: 0.04em;
} .philosophy {
background: var(--black);
padding: var(--section-py) 40px;
position: relative;
overflow: hidden;
} .philosophy::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--yellow);
z-index: 1;
}
.philosophy-inner {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 96px;
position: relative;
z-index: 1;
}
align-items: start;
}
.philosophy-mark {
position: sticky;
top: 120px;
}
.philosophy-mark .section-tag {
margin-bottom: 28px;
color: var(--gray-300);
}
.philosophy-mark .section-tag::before {
background: var(--yellow);
height: 2px;
}
.philosophy-title {
font-size: 30px;
font-weight: 700;
line-height: 1.7;
color: var(--white);
margin: 0;
letter-spacing: 0.02em;
}
.philosophy-body {
font-size: 16px;
line-height: 2.1;
color: var(--gray-300);
display: flex;
flex-direction: column;
gap: 28px;
}
.philosophy-body p {
margin: 0;
} .problems {
background: var(--gray-50);
}
.problems-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.problem-item {
background: var(--white);
padding: 36px 40px;
display: flex;
align-items: flex-start;
gap: 24px;
border-radius: 2px;
transition: all 0.3s;
border: 1px solid var(--gray-100);
border-left: 3px solid var(--black);
}
.problem-item:hover {
transform: translateY(-4px);
border-left-color: var(--yellow);
}
.problem-num {
font-family: 'Roboto', sans-serif;
font-size: 28px;
color: var(--gray-500);
font-weight: 700;
line-height: 1;
min-width: 50px;
letter-spacing: 0.05em;
}
.problem-text {
font-size: 16px;
color: var(--black);
line-height: 1.8;
font-weight: 500;
padding-top: 6px;
} .reasons {
background: var(--yellow-soft);
position: relative;
}
.reasons-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 80px 60px;
}
.reason-item {
position: relative;
}
.reason-num {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.2em;
margin-bottom: 20px;
display: block;
}
.reason-num::after {
content: '';
display: inline-block;
width: 32px;
height: 2px;
background: var(--pink);
margin-left: 12px;
vertical-align: middle;
}
.reason-title {
font-size: 26px;
font-weight: 700;
color: var(--black);
margin-bottom: 20px;
line-height: 1.5;
}
.reason-text {
font-size: 15px;
color: var(--gray-700);
line-height: 2;
} .services {
background: var(--white);
color: var(--black);
}
.services .section-title {
color: var(--black);
font-size: 30px;
line-height: 1.7;
margin-bottom: 56px;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--gray-300);
border: 1px solid var(--gray-300);
}
.service-card {
background: var(--white);
padding: 26px 22px;
transition: all 0.3s;
cursor: pointer;
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
display: block;
}
.service-card:hover {
background: var(--gray-50);
transform: translateY(-2px);
box-shadow: 0 12px 32px -16px rgba(26, 26, 26, 0.16);
}
.service-card:hover .service-card-arrow {
color: var(--pink);
transform: translateX(8px);
}
.service-card-num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
color: var(--black);
margin-bottom: 12px;
font-weight: 700;
letter-spacing: 0.2em;
} .service-card-icon {
width: 38px;
height: 38px;
margin-bottom: 14px;
color: var(--yellow);
display: flex;
align-items: center;
justify-content: center;
transition: color 0.3s, transform 0.3s;
}
.service-card-icon svg {
width: 100%;
height: 100%;
stroke-width: 1.6;
}
.service-card:hover .service-card-icon {
transform: scale(1.05);
}
.service-card h3 {
font-size: 17px;
font-weight: 700;
margin-bottom: 10px;
color: var(--black);
line-height: 1.4;
}
.service-card p {
font-size: 12.5px;
color: var(--gray-700);
line-height: 1.8;
margin-bottom: 18px;
}
.service-card-arrow {
font-size: 12px;
color: var(--black);
font-family: 'Roboto', sans-serif;
font-weight: 700;
letter-spacing: 0.1em;
transition: all 0.3s;
}
.service-card-view-all {
display: flex;
align-items: center;
justify-content: center;
background: var(--black);
color: var(--white);
border: 1px solid var(--black);
}
.service-card-view-all:hover {
background: var(--gray-900);
transform: none;
box-shadow: none;
}
.service-card-view-all a {
color: var(--white);
text-decoration: none;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.2em;
} .service-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 48px;
}
.service-list__card {
position: relative;
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--gray-100);
border-top: 3px solid var(--yellow);
padding: 40px 32px 32px;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-top-color 0.3s ease;
}
.service-list__card:hover {
transform: translateY(-4px);
box-shadow: 0 18px 40px -16px rgba(26, 26, 26, 0.18);
border-top-color: var(--pink);
}
.service-list__card-num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
display: block;
margin-bottom: 18px;
}
.service-list__card-icon {
width: 44px;
height: 44px;
margin-bottom: 22px;
color: var(--yellow);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease, color 0.3s ease;
}
.service-list__card-icon svg {
width: 100%;
height: 100%;
stroke-width: 1.6;
}
.service-list__card:hover .service-list__card-icon {
transform: scale(1.08);
}
.service-list__card-title {
font-size: 20px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.02em;
line-height: 1.5;
margin: 0 0 14px;
}
.service-list__card-desc {
font-size: 13.5px;
color: var(--gray-700);
line-height: 1.95;
margin: 0 0 28px;
flex-grow: 1;
}
.service-list__card-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--gray-100);
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--black);
transition: color 0.3s ease;
}
.service-list__card-link-arrow {
transition: transform 0.3s ease;
}
.service-list__card:hover .service-list__card-link {
color: var(--pink);
}
.service-list__card:hover .service-list__card-link-arrow {
transform: translateX(6px);
} .phases {
background: var(--gray-50);
padding: 120px 40px;
}
.phases .container {
max-width: var(--container-max);
margin: 0 auto;
}
.phases-lead {
font-size: 15px;
color: var(--gray-700);
line-height: 2;
max-width: 760px;
margin: -40px 0 56px;
}
.phases-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.phase-card {
background: var(--white);
padding: 36px 28px;
border-top: 3px solid var(--yellow);
position: relative;
transition: transform 0.3s, box-shadow 0.3s;
}
.phase-card:hover {
transform: translateY(-4px);
box-shadow: 0 16px 40px -20px rgba(26, 26, 26, 0.18);
}
.phase-card__num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.24em;
color: var(--gray-500);
font-weight: 700;
margin-bottom: 16px;
} .phase-card__icon {
width: 44px;
height: 44px;
margin-bottom: 18px;
color: var(--yellow);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s, color 0.3s;
}
.phase-card__icon svg {
width: 100%;
height: 100%;
}
.phase-card:hover .phase-card__icon {
transform: scale(1.08);
color: var(--pink);
}
.phase-card__head {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 20px;
padding-bottom: 16px;
border-bottom: 1px solid var(--gray-100);
}
.phase-card__title {
font-size: 22px;
font-weight: 700;
color: var(--black);
margin: 0;
line-height: 1.3;
}
.phase-card__subtitle {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.16em;
color: var(--pink);
font-weight: 700;
}
.phase-card__desc {
font-size: 13.5px;
line-height: 1.95;
color: var(--gray-700);
margin: 0;
}
@media (max-width: 1024px) {
.phases-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 640px) {
.phases {
padding: 80px 20px;
}
.phases-grid {
grid-template-columns: 1fr;
}
.phases-lead {
margin: -24px 0 40px;
}
} .message {
background: var(--gray-50);
}
.message-inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 100px;
align-items: center;
}
.message-image {
aspect-ratio: 4 / 5;
background: var(--white);
position: relative;
overflow: hidden;
border-radius: 4px;
}
.message-image::before {
content: '';
position: absolute;
top: -16px;
right: -16px;
width: 80px;
height: 4px;
background: var(--yellow);
z-index: 1;
}
.message-image__img {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
object-fit: cover;
}
.message-image__placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--gray-300);
font-family: 'Roboto', sans-serif;
font-size: 14px;
letter-spacing: 0.3em;
font-weight: 700;
z-index: 2;
}
.message h2 {
font-size: 36px;
font-weight: 700;
color: var(--black);
margin-bottom: 40px;
line-height: 1.5;
letter-spacing: -0.01em;
}
.message h2 .accent {
position: relative;
display: inline-block;
padding-bottom: 4px;
border-bottom: 2px solid var(--yellow);
}
.message p {
font-size: 16px;
color: var(--gray-700);
line-height: 2.2;
margin-bottom: 20px;
}
.message-sign {
margin-top: 40px;
font-size: 13px;
color: var(--gray-500);
display: flex;
align-items: center;
gap: 16px;
}
.message-sign strong {
font-size: 20px;
color: var(--black);
font-weight: 700;
} .pricing {
background: var(--white);
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.price-card {
background: var(--white);
padding: 56px 40px;
border: 1px solid var(--gray-100);
text-align: left;
transition: all 0.3s;
border-radius: 2px;
position: relative;
}
.price-card:hover {
border-color: var(--black);
transform: translateY(-8px);
}
.price-card.is-featured {
background: var(--white);
border: 1px solid var(--black);
border-top: 3px solid var(--yellow);
}
.price-card.is-featured:hover {
transform: translateY(-8px);
}
.price-card.is-featured::before {
content: 'RECOMMENDED';
position: absolute;
top: -12px;
left: 40px;
background: var(--black);
color: var(--white);
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.25em;
padding: 6px 14px;
border-radius: 2px;
}
.price-name {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.25em;
color: var(--gray-700);
margin-bottom: 16px;
font-weight: 700;
}
.price-card.is-featured .price-name {
color: var(--black);
}
.price-card h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 32px;
color: var(--black);
}
.price-amount {
font-family: 'Roboto', sans-serif;
font-size: 52px;
font-weight: 700;
color: var(--black);
line-height: 1;
margin-bottom: 8px;
letter-spacing: -0.02em;
}
.price-amount small {
font-size: 16px;
color: var(--gray-500);
margin-left: 8px;
font-weight: 400;
}
.price-card.is-featured .price-amount small {
color: var(--gray-500);
}
.price-desc {
font-size: 14px;
color: var(--gray-700);
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--gray-100);
line-height: 1.9;
}
.price-card.is-featured .price-desc {
border-top-color: var(--gray-100);
color: var(--gray-700);
}
.pricing-foot {
text-align: center;
margin-top: 64px;
} .final-cta {
background: var(--black);
text-align: center;
padding: 140px 40px;
position: relative;
overflow: hidden;
}
.final-cta::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--yellow);
}
.final-cta-inner {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.final-cta .section-tag {
color: var(--gray-300);
justify-content: center;
}
.final-cta .section-tag::before {
background: var(--yellow);
}
.final-cta h2 {
font-size: 48px;
font-weight: 700;
color: var(--white);
margin-bottom: 32px;
line-height: 1.5;
letter-spacing: -0.01em;
}
.final-cta p {
font-size: 16px;
color: var(--gray-300);
margin-bottom: 56px;
line-height: 2;
font-weight: 400;
}
.final-cta .btn-primary {
background: var(--white);
color: var(--black);
border-color: var(--white);
font-size: 15px;
padding: 22px 52px;
}
.final-cta .btn-primary:hover {
background: transparent;
color: var(--white);
border-color: var(--white);
} .stats {
background: var(--white);
border-top: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
padding: 100px 40px;
}
.stats-inner {
max-width: var(--container-max);
margin: 0 auto;
}
.stats-lead {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: end;
margin-bottom: 72px;
}
.stats-lead h2 {
font-size: 38px;
font-weight: 700;
line-height: 1.5;
color: var(--black);
letter-spacing: -0.01em;
}
.stats-lead p {
font-size: 15px;
color: var(--gray-700);
line-height: 2;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--gray-100);
}
.stat-item {
padding: 48px 32px;
border-right: 1px solid var(--gray-100);
}
.stat-item:last-child {
border-right: 0;
}
.stat-num {
font-family: 'Roboto', sans-serif;
font-size: 64px;
font-weight: 700;
color: var(--black);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 16px;
display: flex;
align-items: baseline;
gap: 6px;
}
.stat-num small {
font-size: 22px;
font-weight: 500;
color: var(--gray-700);
letter-spacing: 0;
}
.stat-num .plus {
color: var(--yellow);
}
.stat-label {
font-size: 13px;
color: var(--gray-700);
line-height: 1.7;
font-weight: 500;
} .insights {
background: var(--gray-50);
}
.insights-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 56px;
}
.insights-head .section-title {
margin-bottom: 0;
}
.insights-head__more {
font-family: 'Roboto', sans-serif;
font-size: 12px;
letter-spacing: 0.2em;
color: var(--black);
font-weight: 700;
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1px solid var(--black);
}
.insights-head__more:hover {
color: var(--gray-700);
border-bottom-color: var(--gray-700);
}
.insights-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.insight-card {
background: var(--white);
padding: 40px 32px 36px;
border-top: 1px solid var(--black);
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
transition: all 0.3s;
}
.insight-card:hover {
background: var(--black);
color: var(--white);
transform: translateY(-4px);
}
.insight-card__meta {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 24px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.15em;
font-weight: 700;
}
.insight-card__date {
color: var(--gray-500);
}
.insight-card:hover .insight-card__date {
color: var(--gray-300);
}
.insight-card__cat {
color: var(--black);
padding: 4px 10px;
border: 1px solid var(--black);
}
.insight-card:hover .insight-card__cat {
color: var(--white);
border-color: var(--white);
}
.insight-card__title {
font-size: 18px;
font-weight: 700;
line-height: 1.7;
color: inherit;
margin-bottom: 24px;
flex: 1;
}
.insight-card__more {
font-family: 'Roboto', sans-serif;
font-size: 12px;
letter-spacing: 0.2em;
font-weight: 700;
color: inherit;
display: inline-flex;
align-items: center;
gap: 8px;
}
.insight-card__more::after {
content: '→';
transition: transform 0.3s;
}
.insight-card:hover .insight-card__more::after {
transform: translateX(6px);
}.subpage-hero {
padding: 180px 40px 100px;
background: var(--gray-50);
text-align: center;
}
.subpage-hero .section-tag {
justify-content: center;
}
.subpage-hero__title {
font-size: 52px;
font-weight: 700;
color: var(--black);
letter-spacing: -0.02em;
line-height: 1.4;
margin-bottom: 28px;
}
.subpage-hero__title .accent {
position: relative;
display: inline-block;
padding-bottom: 4px;
border-bottom: 3px solid var(--yellow);
}
.subpage-hero__sub {
font-size: 17px;
color: var(--gray-700);
line-height: 2;
max-width: 720px;
margin: 0 auto;
} .container--narrow {
max-width: var(--container-max);
}
.container--narrow .faq-list {
max-width: 800px;
} .pricing--detailed .price-card {
display: flex;
flex-direction: column;
}
.pricing--detailed .price-features {
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--gray-100);
}
.price-card.is-featured .pricing--detailed .price-features,
.pricing--detailed .price-card.is-featured .price-features {
border-top-color: var(--black);
}
.price-features h4 {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.25em;
color: var(--gray-700);
margin-bottom: 16px;
}
.price-card.is-featured .price-features h4 {
color: var(--black);
}
.price-features__list {
list-style: none;
margin: 0;
padding: 0;
}
.price-features__list li {
position: relative;
padding-left: 24px;
font-size: 14px;
color: var(--gray-700);
line-height: 1.9;
margin-bottom: 8px;
}
.price-features__list li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 14px;
height: 7px;
border-left: 1.5px solid var(--black);
border-bottom: 1.5px solid var(--black);
transform: rotate(-45deg);
}
.price-card.is-featured .price-features__list li {
color: var(--gray-700);
}
.price-card.is-featured .price-features__list li::before {
border-color: var(--black);
}
.price-cta {
margin-top: 28px;
align-self: stretch;
justify-content: center;
font-size: 14px;
padding: 18px 24px;
} .pricing-options {
background: var(--gray-50);
}
.options-list {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 4px;
overflow: hidden;
}
.options-list__row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 24px 32px;
border-bottom: 1px solid var(--gray-100);
}
.options-list__row:last-child {
border-bottom: 0;
}
.options-list__label {
font-size: 15px;
font-weight: 500;
color: var(--black);
}
.options-list__price {
font-size: 18px;
font-weight: 700;
color: var(--black);
letter-spacing: -0.02em;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
}
.options-note {
margin-top: 24px;
font-size: 13px;
color: var(--gray-500);
line-height: 1.9;
} .faq-group {
margin-bottom: 80px;
}
.faq-group:last-child {
margin-bottom: 0;
}
.faq-group__title {
font-size: 22px;
font-weight: 700;
color: var(--black);
margin-bottom: 32px;
padding-bottom: 14px;
border-bottom: 2px solid var(--yellow);
display: inline-block;
}
.faq-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 2px;
overflow: hidden;
transition: border-color 0.2s;
}
.faq-item[open] {
border-color: var(--black);
}
.faq-item__q {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 24px 28px;
cursor: pointer;
list-style: none;
position: relative;
}
.faq-item__q::-webkit-details-marker {
display: none;
}
.faq-item__mark {
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 700;
color: var(--black);
flex-shrink: 0;
line-height: 1.4;
}
.faq-item__mark--a {
color: var(--white);
background: var(--black);
width: 30px;
height: 30px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 2px;
font-size: 13px;
}
.faq-item__text {
font-size: 16px;
font-weight: 700;
color: var(--black);
line-height: 1.7;
flex: 1;
}
.faq-item__icon {
font-size: 24px;
color: var(--gray-500);
font-weight: 300;
transition: transform 0.3s;
flex-shrink: 0;
}
.faq-item[open] .faq-item__icon {
transform: rotate(45deg);
color: var(--black);
}
.faq-item__a {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 0 28px 28px 28px;
background: var(--gray-50);
margin: 0 -1px -1px -1px;
}
.faq-item__a-body {
flex: 1;
font-size: 15px;
color: var(--gray-700);
line-height: 2;
padding-top: 4px;
}
.faq-item__a-body p {
margin: 0 0 12px;
}
.faq-item__a-body p:last-child {
margin-bottom: 0;
}
.faq__empty {
text-align: center;
color: var(--gray-500);
padding: 80px 0;
font-size: 15px;
} .case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.case-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--gray-100);
border-radius: 2px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all 0.3s;
}
.case-card:hover {
border-color: var(--black);
transform: translateY(-4px);
}
.case-card__image {
aspect-ratio: 16 / 10;
background: var(--gray-50);
position: relative;
overflow: hidden;
}
.case-card__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s;
}
.case-card:hover .case-card__img {
transform: scale(1.04);
}
.case-card__placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--gray-300);
font-family: 'Roboto', sans-serif;
font-size: 16px;
letter-spacing: 0.3em;
font-weight: 700;
}
.case-card__body {
padding: 28px 28px 32px;
display: flex;
flex-direction: column;
flex: 1;
}
.case-card__category {
font-size: 11px;
letter-spacing: 0.25em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 12px;
text-transform: uppercase;
}
.case-card__title {
font-size: 18px;
font-weight: 700;
color: var(--black);
line-height: 1.6;
margin-bottom: 12px;
}
.case-card__excerpt {
font-size: 14px;
color: var(--gray-700);
line-height: 1.9;
margin-bottom: 20px;
flex: 1;
}
.case-card__more {
font-size: 13px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.08em;
}
.case-card:hover .case-card__more {
color: var(--gray-700);
}
.case-archive__empty {
text-align: center;
color: var(--gray-500);
padding: 80px 0;
font-size: 15px;
}
.case-archive__pagination {
margin-top: 64px;
text-align: center;
}
.case-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 12px;
border: 1px solid var(--gray-100);
margin: 0 4px;
border-radius: 2px;
text-decoration: none;
color: var(--black);
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 700;
}
.case-archive__pagination .page-numbers.current {
background: var(--black);
border-color: var(--black);
color: var(--white);
} .case-single {
padding-top: 80px;
}
.case-single__header {
padding: 100px 40px 60px;
background: var(--gray-50);
text-align: center;
}
.case-single__category {
font-size: 11px;
letter-spacing: 0.25em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 12px;
text-transform: uppercase;
}
.case-single__title {
font-size: 40px;
font-weight: 700;
color: var(--black);
line-height: 1.5;
margin-bottom: 24px;
letter-spacing: -0.01em;
}
.case-single__excerpt {
font-size: 17px;
color: var(--gray-700);
line-height: 1.9;
max-width: 720px;
margin: 0 auto;
}
.case-single__hero-image {
padding: 0 40px;
margin-top: -40px;
}
.case-single__img {
width: 100%;
max-width: 1100px;
margin: 0 auto;
border-radius: 8px;
display: block;
}
.case-single__body {
padding: 100px 40px 100px;
}
.case-single__body .entry-content {
font-size: 16px;
line-height: 2.1;
color: var(--black);
}
.case-single__body .entry-content h2 {
font-size: 26px;
font-weight: 700;
margin: 60px 0 24px;
padding-left: 16px;
border-left: 3px solid var(--yellow);
line-height: 1.5;
}
.case-single__body .entry-content h3 {
font-size: 19px;
font-weight: 700;
margin: 40px 0 16px;
}
.case-single__body .entry-content p {
margin-bottom: 24px;
}
.case-single__body .entry-content ul,
.case-single__body .entry-content ol {
margin: 0 0 24px 1.4em;
}
.case-single__body .entry-content ul li,
.case-single__body .entry-content ol li {
margin-bottom: 8px;
}
.case-related {
background: var(--gray-50);
} @media (max-width: 1024px) {
.case-grid {
grid-template-columns: repeat(2, 1fr);
}
.subpage-hero__title {
font-size: 44px;
}
.case-single__title {
font-size: 32px;
}
}
@media (max-width: 768px) {
.subpage-hero {
padding: 130px 20px 70px;
}
.subpage-hero__title {
font-size: 32px;
}
.subpage-hero__sub {
font-size: 15px;
}
.pricing--detailed .pricing-grid {
grid-template-columns: 1fr;
}
.options-list__row {
flex-direction: column;
align-items: flex-start;
gap: 4px;
padding: 18px 20px;
}
.case-grid {
grid-template-columns: 1fr;
}
.case-single__header {
padding: 80px 20px 40px;
}
.case-single__title {
font-size: 26px;
}
.case-single__hero-image {
padding: 0 20px;
}
.case-single__body {
padding: 60px 20px;
}
.faq-item__q {
padding: 18px 20px;
gap: 14px;
}
.faq-item__a {
padding: 0 20px 20px;
gap: 14px;
}
.faq-item__text {
font-size: 15px;
}
}  .service-hero {
padding: 140px 40px 72px;
background: var(--gray-50);
position: relative;
overflow: hidden;
} .service-hero::before {
content: '';
position: absolute;
top: 0;
right: -40px;
width: 78%;
max-width: 1100px;
height: 100%;
background-image: url(//brown-p.com/wp-content/themes/brown-partners-theme/assets/img/hero-scribble.svg);
background-repeat: no-repeat;
background-position: right center;
background-size: contain;
opacity: 1;
z-index: 0;
pointer-events: none;
}
.service-hero__inner {
max-width: var(--container-max);
margin: 0 auto;
position: relative;
z-index: 1;
}
.breadcrumb {
display: flex;
align-items: center;
gap: 10px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.18em;
color: var(--gray-500);
margin-bottom: 32px;
flex-wrap: wrap;
}
.breadcrumb a {
color: var(--gray-700);
text-decoration: none;
transition: color 0.2s;
}
.breadcrumb a:hover {
color: var(--black);
}
.breadcrumb__sep {
color: var(--gray-300);
}
.breadcrumb__current {
color: var(--black);
font-weight: 700;
}
.service-hero__tag {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.32em;
color: var(--gray-700);
margin-bottom: 28px;
font-weight: 700;
}
.service-hero__tag::before {
content: '';
width: 36px;
height: 2px;
background: var(--yellow);
}
.service-hero__title {
margin: 0 0 24px;
display: flex;
flex-direction: column;
gap: 8px;
max-width: 920px;
}
.service-hero__title-en {
font-family: 'Roboto', sans-serif;
font-size: 48px;
font-weight: 500;
letter-spacing: -0.01em;
color: var(--black);
line-height: 1.1;
}
.service-hero__title-jp {
font-size: 22px;
font-weight: 500;
color: var(--gray-700);
letter-spacing: 0.04em;
}
.service-hero__lead {
font-size: 16px;
line-height: 2;
color: var(--gray-700);
max-width: 720px;
margin: 0;
} .service-features {
background: var(--white);
}
.service-features__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
max-width: var(--container-max);
margin: 0 auto;
}
.service-feature {
background: var(--gray-50);
padding: 28px 28px 26px;
border: 1px solid var(--gray-150);
position: relative;
transition: all 0.25s ease;
}
.service-feature::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: var(--yellow);
transform: scaleY(0);
transform-origin: bottom;
transition: transform 0.3s ease;
}
.service-feature:hover {
background: var(--white);
border-color: var(--gray-300);
box-shadow: 0 14px 32px -20px rgba(26, 26, 26, 0.18);
transform: translateY(-2px);
}
.service-feature:hover::before {
transform: scaleY(1);
transform-origin: top;
}
.service-feature__num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.28em;
color: var(--gray-500);
font-weight: 700;
margin-bottom: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
}
.service-feature__num::before {
content: '';
width: 18px;
height: 1px;
background: var(--black);
}
.service-feature__title {
font-size: 18px;
font-weight: 700;
margin: 0 0 8px;
letter-spacing: 0.02em;
color: var(--black);
line-height: 1.45;
}
.service-feature__desc {
font-size: 13px;
line-height: 1.85;
color: var(--gray-700);
margin: 0;
} .service-pricing {
background: var(--gray-50);
}
.service-pricing__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.service-pricing__lead {
font-size: 15px;
line-height: 2;
color: var(--gray-700);
max-width: 720px;
margin: 0 0 56px;
}
.service-pricing__note {
font-size: 12px;
color: var(--gray-500);
margin-top: 32px;
line-height: 1.8;
} .service-pricing__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.svc-plan {
background: var(--white);
padding: 44px 36px;
border: 1px solid var(--gray-100);
position: relative;
display: flex;
flex-direction: column;
transition: all 0.25s ease;
}
.svc-plan:hover {
transform: translateY(-3px);
box-shadow: 0 18px 40px -24px rgba(26, 26, 26, 0.18);
}
.svc-plan.is-featured {
border-top: 3px solid var(--yellow);
border-color: var(--gray-100);
padding-top: 41px;
box-shadow: 0 18px 40px -24px rgba(26, 26, 26, 0.16);
}
.svc-plan.is-featured .svc-plan__badge {
display: inline-block;
}
.svc-plan__badge {
display: none;
position: absolute;
top: 0;
right: 24px;
transform: translateY(-50%);
background: var(--black);
color: var(--white);
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.24em;
padding: 6px 14px;
border-radius: 2px;
}
.svc-plan__label {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 8px;
}
.svc-plan__name {
font-size: 18px;
font-weight: 700;
color: var(--black);
margin: 0 0 24px;
letter-spacing: 0.02em;
}
.svc-plan__price {
font-family: 'Roboto', sans-serif;
font-size: 36px;
font-weight: 500;
color: var(--black);
letter-spacing: -0.01em;
line-height: 1;
display: flex;
align-items: baseline;
gap: 4px;
margin-bottom: 28px;
padding-bottom: 28px;
border-bottom: 1px solid var(--gray-100);
}
.svc-plan__price small {
font-size: 13px;
color: var(--gray-700);
font-weight: 500;
letter-spacing: 0;
}
.svc-plan__features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.svc-plan__features li {
font-size: 13px;
line-height: 1.7;
color: var(--gray-700);
display: flex;
align-items: flex-start;
gap: 10px;
}
.svc-plan__features li::before {
content: '';
width: 14px;
height: 1px;
background: var(--yellow);
flex-shrink: 0;
margin-top: 11px;
} .service-pricing--hourly .hourly-grid {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 56px;
align-items: start;
}
.hourly-rate {
background: var(--white);
padding: 48px;
border: 1px solid var(--gray-100);
text-align: center;
border-top: 3px solid var(--yellow);
}
.hourly-rate__label {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 16px;
}
.hourly-rate__price {
font-family: 'Roboto', sans-serif;
font-size: 56px;
font-weight: 500;
color: var(--black);
letter-spacing: -0.02em;
line-height: 1;
display: inline-flex;
align-items: baseline;
gap: 4px;
margin-bottom: 16px;
}
.hourly-rate__price small {
font-size: 14px;
color: var(--gray-700);
font-weight: 500;
letter-spacing: 0;
}
.hourly-rate__note {
font-size: 12px;
color: var(--gray-500);
line-height: 1.8;
margin: 0;
} .project-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--gray-150);
border: 1px solid var(--gray-150);
}
.project-list__head {
grid-column: 1 / -1;
padding: 14px 24px;
background: var(--black);
color: var(--white);
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.24em;
font-weight: 700;
}
.project-item {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
padding: 16px 24px;
background: var(--white);
} .project-item--no-price {
grid-template-columns: 1fr;
}
.project-item--no-price .project-item__name::before {
content: '+ ';
color: var(--pink);
font-weight: 700;
font-family: 'Roboto', sans-serif;
} @media (max-width: 768px) {
.project-list {
grid-template-columns: 1fr;
}
} .service-industries {
background: var(--gray-50);
}
.service-industries__lead {
font-size: 15px;
color: var(--gray-700);
line-height: 2;
max-width: 760px;
margin: 0 0 40px;
}
.service-industries__list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
list-style: none;
margin: 0;
padding: 0;
}
.service-industries__list li {
background: var(--white);
padding: 16px 20px;
border: 1px solid var(--gray-150);
border-left: 3px solid var(--yellow);
font-size: 13px;
font-weight: 500;
color: var(--black);
transition: border-color 0.2s, box-shadow 0.2s;
}
.service-industries__list li:hover {
border-left-color: var(--pink);
box-shadow: 0 6px 16px -10px rgba(26, 26, 26, 0.16);
}
.project-item__name {
font-size: 14px;
color: var(--black);
font-weight: 500;
}
.project-item__price {
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 500;
color: var(--black);
letter-spacing: -0.01em;
}
.project-item__price small {
font-size: 11px;
color: var(--gray-700);
font-weight: 500;
margin-left: 2px;
letter-spacing: 0;
} .service-flow {
background: var(--white);
}
.service-flow__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.flow-steps {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
position: relative;
}
.flow-steps::before {
content: '';
position: absolute;
left: 23px;
top: 20px;
bottom: 20px;
width: 1px;
background: var(--gray-150);
z-index: 0;
}
.flow-step {
display: grid;
grid-template-columns: 48px 1fr;
gap: 20px;
padding: 18px 0;
position: relative;
z-index: 1;
}
.flow-step:not(:last-child) {
border-bottom: 1px solid var(--gray-100);
}
.flow-step__num {
font-family: 'Roboto', sans-serif;
width: 48px;
height: 48px;
background: var(--white);
border: 1px solid var(--black);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--black);
}
.flow-step__title {
font-size: 17px;
font-weight: 700;
color: var(--black);
margin: 0 0 6px;
letter-spacing: 0.02em;
line-height: 1.45;
}
.flow-step__desc {
font-size: 13px;
line-height: 1.85;
color: var(--gray-700);
margin: 0;
max-width: 720px;
} .service-cta {
background: var(--black);
color: var(--white);
padding: 140px 40px;
text-align: center;
position: relative;
overflow: hidden;
}
.service-cta::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: var(--yellow);
}
.service-cta__inner {
position: relative;
z-index: 1;
max-width: 800px;
margin: 0 auto;
}
.service-cta .section-tag {
color: var(--gray-300);
justify-content: center;
}
.service-cta .section-tag::before {
background: var(--yellow);
}
.service-cta__title {
font-size: 32px;
font-weight: 700;
color: var(--white);
margin: 0 0 32px;
line-height: 1.5;
letter-spacing: -0.01em;
} .pink-dot {
color: var(--pink);
margin-left: 0.2em;
}
.service-cta__desc {
font-size: 16px;
color: var(--gray-300);
margin: 0 0 56px;
line-height: 2;
font-weight: 400;
}
.service-cta .btn-primary {
background: var(--white);
color: var(--black);
border-color: var(--white);
font-size: 15px;
padding: 22px 52px;
}
.service-cta .btn-primary:hover {
background: transparent;
color: var(--white);
border-color: var(--white);
}  .pricing-comparison-scroll {
overflow: visible;
-webkit-overflow-scrolling: touch;
margin-bottom: 24px;
padding-top: 32px; position: relative;
}
.pricing-comparison-meta {
position: absolute;
top: 6px;
right: 4px;
z-index: 1;
}
.pricing-comparison-meta__unit {
font-size: 12px;
color: var(--gray-500);
font-weight: 500;
}
@media (max-width: 768px) {
.pricing-comparison-scroll {
overflow-x: auto;
}
}
.pricing-comparison {
width: 100%;
min-width: 720px;
border-collapse: collapse;
font-size: 13px;
table-layout: fixed;
position: relative;
} .pricing-comparison thead th {
padding: 12px 12px 14px;
text-align: center;
background: var(--gray-100);
color: var(--black);
font-weight: 700;
border: 1px solid var(--gray-150);
vertical-align: top;
position: relative;
} .pricing-comparison thead th.pricing-comparison__label {
background: var(--gray-100);
color: var(--black);
text-align: center;
width: 280px;
vertical-align: middle;
} .pricing-comparison thead th:not(.pricing-comparison__label) {
width: calc((100% - 280px) / 3);
} .pricing-comparison thead th.is-recommended {
background: var(--gray-100);
color: var(--black);
} .comp-badge {
position: absolute;
top: -28px;
left: 50%;
transform: translateX(-50%);
display: inline-block;
font-size: 9px;
font-weight: 700;
background: var(--pink);
color: var(--white);
padding: 4px 10px;
border-radius: 2px;
letter-spacing: 0.12em;
white-space: nowrap;
font-family: 'Roboto', sans-serif;
line-height: 1.4;
z-index: 2;
} .comp-plan-name {
display: block;
font-size: 14px;
font-weight: 700;
color: var(--black);
margin-bottom: 6px;
letter-spacing: 0.03em;
} .comp-plan-target {
display: block;
font-size: 10.5px;
font-weight: 500;
color: var(--gray-700);
line-height: 1.6;
margin-bottom: 8px;
} .comp-plan-price {
display: block;
font-size: 18px;
font-weight: 700;
color: var(--black);
letter-spacing: -0.02em;
line-height: 1.2;
}
.pricing-comparison tbody tr:nth-child(even) {
background: var(--gray-50);
}
.pricing-comparison tbody tr:hover {
background: #f0f4ff;
}
.pricing-comparison__service {
padding: 6px 14px;
font-weight: 600;
border: 1px solid var(--gray-150);
color: var(--gray-800, #2a2a2a);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.pricing-comparison__val {
padding: 6px 6px;
text-align: center;
border: 1px solid var(--gray-150);
font-size: 15px;
font-weight: 700;
}
.pricing-comparison__val.val--full  { color: #1a6e3c; }
.pricing-comparison__val.val--opt   { color: #1a56a0; font-size: 16px; }
.pricing-comparison__val.val--none  { color: var(--gray-700); font-size: 18px; font-weight: 700; letter-spacing: 0.1em; }
.pricing-comparison__val.val--text  { font-size: 12px; color: var(--gray-700); font-weight: 500; }
.pricing-comparison__legend {
font-size: 12px;
color: var(--gray-500);
margin: 0 0 32px;
} .comp-options {
background: var(--yellow-soft);
border: 1px solid var(--yellow);
padding: 24px 28px;
margin-bottom: 32px;
border-radius: 2px;
position: relative;
}
.comp-options__head {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--black);
margin-bottom: 18px;
display: flex;
align-items: center;
gap: 10px;
}
.comp-options__head::before {
content: '+';
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: var(--pink);
color: var(--white);
border-radius: 50%;
font-size: 16px;
font-weight: 700;
line-height: 1;
font-family: 'Roboto', sans-serif;
}
.comp-options__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.comp-options__list li {
background: var(--white);
font-size: 13px;
color: var(--black);
font-weight: 500;
padding: 8px 14px 8px 32px;
border: 1px solid rgba(26,26,26,0.08);
border-radius: 2px;
position: relative;
line-height: 1.4;
}
.comp-options__list li::before {
content: '+';
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--pink);
font-size: 14px;
font-weight: 700;
font-family: 'Roboto', sans-serif;
line-height: 1;
}  .service-pricing--fee .fee-client-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
max-width: 880px;
margin: 0 0 32px;
align-items: start;
}
@media (max-width: 640px) {
.service-pricing--fee .fee-client-grid {
grid-template-columns: 1fr;
gap: 32px;
max-width: 480px;
}
}
.service-pricing--fee .fee-client-section {
margin-bottom: 0;
min-width: 0;
} .service-pricing--fee .fee-client-grid .fee-blocks-grid {
grid-template-columns: 1fr;
}
.fee-client-title {
font-size: 20px;
font-weight: 700;
color: var(--black);
border-left: 4px solid var(--yellow);
padding-left: 16px;
margin-bottom: 28px;
letter-spacing: 0.02em;
}
.fee-blocks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
}
.fee-block {
background: var(--white);
border: 1px solid var(--gray-100);
overflow: hidden;
}
.fee-block__title {
background: var(--black);
color: var(--white);
font-size: 12px;
font-weight: 700;
padding: 10px 16px;
letter-spacing: 0.05em;
}
.fee-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.fee-table tr {
border-bottom: 1px solid var(--gray-100);
}
.fee-table tr:last-child {
border-bottom: none;
}
.fee-table__label {
padding: 10px 16px;
text-align: left;
font-weight: 500;
color: var(--gray-700);
background: var(--gray-50);
width: 60%;
}
.fee-table__val {
padding: 10px 16px;
text-align: right;
font-weight: 700;
color: var(--black);
font-variant-numeric: tabular-nums;
} @media (max-width: 1024px) {
.service-hero {
padding: 160px 32px 80px;
}
.service-hero__title-en {
font-size: 44px;
}
.service-hero__title-jp {
font-size: 18px;
}
.service-features__grid,
.service-pricing__grid {
grid-template-columns: 1fr 1fr;
}
.service-pricing--hourly .hourly-grid {
grid-template-columns: 1fr;
gap: 32px;
}
.service-feature {
padding: 36px;
}
.svc-plan {
padding: 36px 28px;
}
}
@media (max-width: 768px) {
.service-hero {
padding: 120px 20px 56px;
} .service-hero::before {
display: none;
}
.service-hero__title-en {
font-size: 32px;
}
.service-hero__title-jp {
font-size: 16px;
}
.service-hero__lead {
font-size: 14px;
}
.service-features__grid,
.service-pricing__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.service-feature {
padding: 28px 24px;
}
.service-feature__title {
font-size: 18px;
}
.svc-plan {
padding: 32px 24px;
}
.svc-plan__price {
font-size: 30px;
}
.hourly-rate {
padding: 32px 24px;
}
.hourly-rate__price {
font-size: 44px;
}
.flow-step {
grid-template-columns: 48px 1fr;
gap: 20px;
padding: 24px 0;
}
.flow-step__num {
width: 48px;
height: 48px;
font-size: 12px;
}
.flow-steps::before {
left: 23px;
top: 24px;
bottom: 24px;
}
.flow-step__title {
font-size: 17px;
}
.service-cta {
padding: 100px 20px;
}
.service-cta__title {
font-size: 24px;
}
}  .about-mission {
background: var(--white);
padding: 100px 40px;
}
.about-mission__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.about-mission__lead {
font-family: 'Noto Serif JP', 'Yu Mincho', serif;
font-size: 22px;
font-weight: 400;
color: var(--black);
line-height: 2;
letter-spacing: 0.04em;
margin: 0 0 56px;
max-width: 880px;
}
.about-mission__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.about-pillar {
border-top: 3px solid var(--yellow);
padding: 32px 4px 0;
}
.about-pillar__num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 16px;
display: block;
}
.about-pillar__title {
font-size: 20px;
font-weight: 700;
color: var(--black);
margin: 0 0 16px;
letter-spacing: 0.02em;
line-height: 1.6;
}
.about-pillar__desc {
font-size: 14px;
color: var(--gray-700);
line-height: 2;
margin: 0;
} .about-greeting {
background: var(--gray-50);
padding: 100px 40px;
}
.about-greeting__inner {
max-width: var(--container-max);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: center;
}
.about-greeting__image {
position: relative;
aspect-ratio: 3 / 4;
background: transparent;
}
.about-greeting__visual-accent {
position: absolute;
top: 14px;
left: 14px;
right: -14px;
bottom: -14px;
background: var(--yellow-soft);
border: 1px solid rgba(26, 26, 26, 0.06);
z-index: 0;
pointer-events: none;
}
.about-greeting__visual-img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: transparent;
}
.about-greeting__body .section-tag {
margin-bottom: 16px;
}
.about-greeting__title {
font-family: 'Noto Serif JP', 'Yu Mincho', serif;
font-size: 32px;
font-weight: 400;
color: var(--black);
letter-spacing: 0.04em;
line-height: 1.7;
margin: 0 0 32px;
}
.about-greeting__text {
font-size: 15px;
color: var(--gray-700);
line-height: 2;
margin: 0 0 20px;
}
.about-greeting__signature {
font-size: 14px;
color: var(--gray-700);
margin: 32px 0 32px;
line-height: 1.8;
}
.about-greeting__signature strong {
color: var(--black);
font-size: 16px;
font-weight: 700;
display: block;
margin-top: 4px;
letter-spacing: 0.04em;
} .about-info {
background: var(--white);
padding: 100px 40px;
}
.about-info__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.about-info__table {
display: grid;
grid-template-columns: 200px 1fr;
gap: 0;
border-top: 1px solid var(--gray-100);
max-width: 960px;
margin: 40px auto 0;
}
.about-info__table dt,
.about-info__table dd {
padding: 24px 0;
border-bottom: 1px solid var(--gray-100);
margin: 0;
line-height: 1.9;
}
.about-info__table dt {
font-size: 13px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.06em;
}
.about-info__table dd {
font-size: 14px;
color: var(--gray-700);
} .about-members {
background: var(--gray-50);
padding: 100px 40px;
}
.about-members__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.about-members__grid {
display: grid;
grid-template-columns: 1fr;
max-width: 480px;
margin: 40px auto 48px;
gap: 24px;
}
.about-member {
background: var(--white);
padding: 32px 24px;
text-align: center;
}
.about-member__photo {
width: 96px;
height: 96px;
border-radius: 50%;
background: var(--gray-100);
margin: 0 auto 20px;
overflow: hidden;
position: relative;
}
.about-member__role {
font-family: 'Roboto', sans-serif;
font-size: 10px;
letter-spacing: 0.28em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 10px;
}
.about-member__name {
font-size: 16px;
font-weight: 700;
color: var(--black);
margin: 0 0 4px;
letter-spacing: 0.04em;
}
.about-member__name-en {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.16em;
color: var(--gray-500);
margin-bottom: 16px;
}
.about-member__bio {
font-size: 12px;
color: var(--gray-700);
line-height: 1.9;
text-align: left;
margin: 0;
}
.about-members__more {
text-align: center;
} .about-subpages {
background: var(--white);
padding: 100px 40px;
}
.about-subpages__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.about-subpages__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--gray-100);
border-left: 1px solid var(--gray-100);
}
.about-subpage {
display: block;
padding: 36px 32px;
border-right: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
background: var(--white);
text-decoration: none;
transition: background 0.2s ease;
position: relative;
}
.about-subpage:hover {
background: var(--gray-50);
}
.about-subpage:hover .about-subpage__arrow {
transform: translateX(4px);
}
.about-subpage__num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 12px;
display: block;
}
.about-subpage__title-en {
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.04em;
line-height: 1.3;
margin: 0 0 6px;
}
.about-subpage__title-jp {
font-size: 14px;
color: var(--gray-700);
margin: 0 0 16px;
letter-spacing: 0.04em;
}
.about-subpage__desc {
font-size: 13px;
color: var(--gray-700);
line-height: 1.9;
margin: 0;
}
.about-subpage__arrow {
position: absolute;
top: 36px;
right: 32px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: var(--black);
transition: transform 0.2s ease;
} @media (max-width: 1024px) {
.about-mission__grid {
grid-template-columns: 1fr 1fr;
}
.about-greeting__inner {
grid-template-columns: 1fr;
gap: 48px;
}
.about-greeting__image {
max-width: 480px;
margin: 0 auto;
}
.about-subpages__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.about-mission,
.about-greeting,
.about-info,
.about-members,
.about-subpages {
padding: 64px 20px;
}
.about-mission__lead {
font-size: 17px;
}
.about-mission__grid {
grid-template-columns: 1fr;
gap: 32px;
}
.about-greeting__title {
font-size: 22px;
}
.about-info__table {
grid-template-columns: 100px 1fr;
}
.about-info__table dt,
.about-info__table dd {
padding: 16px 0;
font-size: 13px;
}
.about-subpages__grid {
grid-template-columns: 1fr;
border-left: 0;
}
.about-subpage {
padding: 28px 24px;
border-right: 0;
}
.about-subpage__title-en {
font-size: 18px;
}
.about-subpage__arrow {
top: 28px;
right: 24px;
}
}  .subpage-section {
padding: 100px 40px;
position: relative;
}
.subpage-section--gray {
background: var(--gray-50);
}
.subpage-section--white {
background: var(--white);
} .subpage-section .section-tag::before {
background: var(--yellow);
height: 2px;
width: 32px;
}
.subpage-section__inner {
max-width: var(--container-max);
margin: 0 auto;
} .subpage-section__inner--narrow {
max-width: var(--container-max);
}
.subpage-section__inner--narrow > .subpage-section__lead,
.subpage-section__inner--narrow > .flow-steps,
.subpage-section__inner--narrow > .about-info__table,
.subpage-section__inner--narrow > .legal-content,
.subpage-section__inner--narrow > .greeting-detail,
.subpage-section__inner--narrow > p,
.subpage-section__inner--narrow > dl,
.subpage-section__inner--narrow > ol,
.subpage-section__inner--narrow > ul {
max-width: 880px;
}
.subpage-section__lead {
font-size: 15px;
color: var(--gray-700);
line-height: 2;
margin: 0 0 48px;
max-width: 760px;
} .legal-content {
max-width: 880px;
margin: 0 auto;
}
.legal-content > .legal-block:first-child {
margin-top: 0;
}
.legal-block {
margin-top: 56px;
}
.legal-block__num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 12px;
display: block;
}
.legal-block__title {
font-size: 20px;
font-weight: 700;
color: var(--black);
margin: 0 0 20px;
letter-spacing: 0.04em;
line-height: 1.6;
padding-bottom: 14px;
border-bottom: 1px solid var(--gray-100);
}
.legal-block p {
font-size: 14px;
color: var(--gray-700);
line-height: 2;
margin: 0 0 16px;
}
.legal-block ul,
.legal-block ol {
font-size: 14px;
color: var(--gray-700);
line-height: 2;
padding-left: 1.6em;
margin: 0 0 16px;
}
.legal-block li {
margin-bottom: 6px;
}
.legal-meta {
font-size: 13px;
color: var(--gray-500);
border-top: 1px solid var(--gray-100);
padding-top: 24px;
margin-top: 64px;
line-height: 1.9;
} .greeting-detail {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 72px;
align-items: start;
}
.greeting-detail__image {
position: relative;
aspect-ratio: 3 / 4;
background: transparent;
}
.greeting-visual__accent {
position: absolute;
top: 14px;
left: 14px;
right: -14px;
bottom: -14px;
background: var(--yellow-soft);
border: 1px solid rgba(26, 26, 26, 0.06);
z-index: 0;
pointer-events: none;
}
.greeting-visual__img {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: contain;
display: block;
background: transparent;
}
.greeting-detail__body p {
font-size: 15px;
color: var(--gray-700);
line-height: 2.1;
margin: 0 0 22px;
}
.greeting-detail__signature {
font-size: 14px;
color: var(--gray-700);
line-height: 1.9;
margin: 40px 0 0;
}
.greeting-detail__signature strong {
color: var(--black);
font-size: 18px;
font-weight: 700;
display: block;
margin-top: 4px;
letter-spacing: 0.04em;
} .office-access {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 56px;
align-items: start;
}
.office-access__map {
aspect-ratio: 16 / 11;
background: var(--gray-100);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Roboto', sans-serif;
font-size: 12px;
letter-spacing: 0.28em;
color: var(--gray-700);
font-weight: 700;
border: 1px solid var(--gray-100);
}
.office-access__details dt {
font-size: 13px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.06em;
margin: 24px 0 6px;
}
.office-access__details dt:first-child {
margin-top: 0;
}
.office-access__details dd {
font-size: 14px;
color: var(--gray-700);
line-height: 1.9;
margin: 0;
} .philosophy-statement {
background: var(--white);
padding: 140px 40px;
text-align: center;
}
.philosophy-statement__inner {
max-width: 880px;
margin: 0 auto;
}
.philosophy-statement__small {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.4em;
color: var(--yellow);
font-weight: 700;
margin-bottom: 32px;
}
.philosophy-statement__main {
font-family: 'Noto Serif JP', 'Yu Mincho', serif;
font-size: 36px;
font-weight: 400;
color: var(--black);
letter-spacing: 0.06em;
line-height: 2;
margin: 0;
}
.philosophy-values {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.philosophy-value {
background: var(--white);
padding: 36px 28px;
border-top: 3px solid var(--yellow);
}
.philosophy-value__label {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 14px;
}
.philosophy-value__title {
font-size: 18px;
font-weight: 700;
color: var(--black);
margin: 0 0 14px;
letter-spacing: 0.02em;
line-height: 1.6;
}
.philosophy-value__desc {
font-size: 13px;
color: var(--gray-700);
line-height: 2;
margin: 0;
} .quality-policy {
background: var(--gray-50);
padding: 100px 40px;
}
.quality-policy__inner {
max-width: 880px;
margin: 0 auto;
text-align: center;
}
.quality-policy__statement {
font-family: 'Noto Serif JP', 'Yu Mincho', serif;
font-size: 24px;
font-weight: 400;
color: var(--black);
letter-spacing: 0.04em;
line-height: 2.2;
margin: 32px 0 0;
}
.quality-pillars {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.quality-pillar {
background: var(--white);
padding: 36px 32px;
border: 1px solid var(--gray-100);
}
.quality-pillar__num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 14px;
display: block;
}
.quality-pillar__title {
font-size: 18px;
font-weight: 700;
color: var(--black);
margin: 0 0 14px;
letter-spacing: 0.02em;
line-height: 1.6;
}
.quality-pillar__desc {
font-size: 14px;
color: var(--gray-700);
line-height: 2;
margin: 0;
} .member-detail {
display: grid;
grid-template-columns: 280px 1fr;
gap: 56px;
background: var(--white);
border: 1px solid var(--gray-100);
border-top: 3px solid var(--yellow);
padding: 48px;
margin-bottom: 48px;
}
.member-detail__photo {
position: relative;
aspect-ratio: 4 / 3;
background: var(--white);
overflow: hidden;
}
.member-detail__photo .portrait-img {
object-position: center center;
} .portrait-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%;
display: block;
}
.member-detail__role {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--yellow);
font-weight: 700;
margin-bottom: 14px;
}
.member-detail__name {
font-size: 28px;
font-weight: 700;
color: var(--black);
margin: 0 0 6px;
letter-spacing: 0.04em;
}
.member-detail__name-en {
font-family: 'Roboto', sans-serif;
font-size: 13px;
letter-spacing: 0.18em;
color: var(--gray-500);
margin-bottom: 24px;
}
.member-detail__bio {
font-size: 14px;
color: var(--gray-700);
line-height: 2;
margin: 0 0 24px;
}
.member-detail__list {
display: grid;
grid-template-columns: 100px 1fr;
gap: 0;
border-top: 1px solid var(--gray-100);
}
.member-detail__list dt {
padding: 12px 0;
font-size: 12px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.06em;
border-bottom: 1px solid var(--gray-100);
margin: 0;
}
.member-detail__list dd {
padding: 12px 0;
font-size: 13px;
color: var(--gray-700);
line-height: 1.9;
border-bottom: 1px solid var(--gray-100);
margin: 0;
}
.members-team-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
} @media (max-width: 1024px) {
.greeting-detail {
grid-template-columns: 1fr;
gap: 48px;
}
.greeting-detail__image {
max-width: 480px;
margin: 0 auto;
}
.office-access {
grid-template-columns: 1fr;
gap: 32px;
}
.philosophy-values {
grid-template-columns: 1fr 1fr;
}
.quality-pillars {
grid-template-columns: 1fr;
}
.member-detail {
grid-template-columns: 1fr;
gap: 32px;
padding: 32px;
}
.member-detail__photo {
max-width: 280px;
margin: 0 auto;
}
.members-team-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.subpage-section {
padding: 64px 20px;
}
.philosophy-statement {
padding: 80px 20px;
}
.philosophy-statement__main {
font-size: 22px;
line-height: 1.9;
}
.philosophy-values {
grid-template-columns: 1fr;
}
.quality-policy {
padding: 64px 20px;
}
.quality-policy__statement {
font-size: 18px;
}
.member-detail {
padding: 24px;
}
.member-detail__name {
font-size: 22px;
}
.member-detail__list {
grid-template-columns: 80px 1fr;
}
.members-team-grid {
grid-template-columns: 1fr;
}
.legal-block {
margin-top: 40px;
}
.legal-block__title {
font-size: 17px;
}
} .page-404 {
background: var(--gray-50);
padding: 200px 40px 160px;
text-align: center;
}
.page-404__inner {
max-width: 720px;
margin: 0 auto;
}
.page-404__num {
font-family: 'Roboto', sans-serif;
font-size: 180px;
font-weight: 900;
line-height: 1;
letter-spacing: -0.04em;
color: var(--yellow);
margin-bottom: 40px;
}
.page-404__tag {
justify-content: center;
margin-bottom: 24px;
}
.page-404__title {
font-family: 'Noto Serif JP', 'Yu Mincho', serif;
font-size: 32px;
font-weight: 400;
color: var(--black);
letter-spacing: 0.04em;
line-height: 1.7;
margin: 0 0 28px;
}
.page-404__title .accent-dot {
color: var(--pink);
}
.page-404__desc {
font-size: 15px;
color: var(--gray-700);
line-height: 2;
margin: 0 0 56px;
}
.page-404__actions {
display: inline-flex;
flex-wrap: wrap;
gap: 16px;
justify-content: center;
}
@media (max-width: 768px) {
.page-404 {
padding: 140px 20px 100px;
}
.page-404__num {
font-size: 120px;
margin-bottom: 32px;
}
.page-404__title {
font-size: 22px;
}
.page-404__desc {
font-size: 14px;
}
.page-404__actions {
flex-direction: column;
width: 100%;
}
.page-404__actions .btn-primary,
.page-404__actions .btn-secondary {
width: 100%;
}
}  .recruit-message {
background: var(--white);
padding: 140px 40px;
text-align: center;
}
.recruit-message__inner {
max-width: 880px;
margin: 0 auto;
}
.recruit-message__main {
font-family: 'Noto Serif JP', 'Yu Mincho', serif;
font-size: 32px;
font-weight: 400;
color: var(--black);
letter-spacing: 0.06em;
line-height: 2;
margin: 32px 0 0;
} .position-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.position-card {
background: var(--white);
border: 1px solid var(--gray-100);
border-top: 3px solid var(--yellow);
padding: 40px 36px;
}
.position-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.position-card__num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
}
.position-card__tag {
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
color: var(--black);
background: var(--gray-50);
border: 1px solid var(--gray-100);
padding: 4px 12px;
white-space: nowrap;
}
.position-card__title {
font-size: 22px;
font-weight: 700;
color: var(--black);
margin: 0 0 16px;
letter-spacing: 0.02em;
line-height: 1.5;
}
.position-card__desc {
font-size: 14px;
color: var(--gray-700);
line-height: 2;
margin: 0 0 20px;
}
.position-card__section-title {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
color: var(--gray-700);
margin: 20px 0 10px;
padding-bottom: 8px;
border-bottom: 1px solid var(--gray-100);
}
.position-card__list {
list-style: none;
margin: 0;
padding: 0;
}
.position-card__list li {
font-size: 13px;
color: var(--gray-700);
line-height: 1.8;
padding-left: 18px;
position: relative;
margin-bottom: 6px;
}
.position-card__list li::before {
content: '';
position: absolute;
left: 0;
top: 10px;
width: 8px;
height: 1px;
background: var(--yellow);
} .apply-form {
margin-top: 8px;
} @media (max-width: 1024px) {
.recruit-message {
padding: 100px 32px;
}
.recruit-message__main {
font-size: 26px;
}
.position-cards {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.recruit-message {
padding: 80px 20px;
}
.recruit-message__main {
font-size: 20px;
line-height: 1.9;
}
.position-card {
padding: 28px 24px;
}
.position-card__title {
font-size: 18px;
}
}  .news-list {
list-style: none;
margin: 0;
padding: 0;
}
.news-list__item {
border-bottom: 1px solid var(--gray-100);
}
.news-list__item:first-child {
border-top: 1px solid var(--gray-100);
}
.news-list__link {
display: flex;
align-items: baseline;
gap: 20px;
padding: 24px 0;
text-decoration: none;
color: inherit;
transition: opacity 0.2s ease;
}
.news-list__link:hover {
opacity: 0.65;
}
.news-list__date {
font-size: 13px;
color: var(--gray-500);
white-space: nowrap;
letter-spacing: 0.1em;
flex-shrink: 0;
}
.news-list__cat {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
background: var(--yellow);
color: var(--black);
padding: 3px 10px;
white-space: nowrap;
flex-shrink: 0;
}
.news-list__title {
font-size: 15px;
line-height: 1.65;
color: var(--black);
}
.news-pagination {
margin-top: 56px;
text-align: center;
}
.news-pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
margin: 0 4px;
font-size: 14px;
color: var(--black);
text-decoration: none;
border: 1px solid var(--gray-100);
transition: border-color 0.18s ease, background 0.18s ease;
}
.news-pagination .page-numbers:hover,
.news-pagination .page-numbers.current {
background: var(--yellow);
border-color: var(--yellow);
color: var(--black);
}
.news-empty {
text-align: center;
color: var(--gray-500);
padding: 64px 0;
font-size: 14px;
} .news-single__date {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: var(--gray-400);
letter-spacing: 0.1em;
margin: 20px 0 16px;
}
.news-single__cat {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
background: var(--yellow);
color: var(--black);
padding: 3px 10px;
}
.news-single__title {
font-size: clamp(22px, 3vw, 34px);
font-weight: 700;
color: var(--black);
line-height: 1.65;
letter-spacing: 0.02em;
margin: 0;
max-width: 800px;
} .news-single__thumb {
margin-bottom: 48px;
}
.news-single__thumb img {
width: 100%;
height: auto;
display: block;
}
.news-content {
font-size: 15px;
line-height: 2;
color: var(--gray-700);
}
.news-content p {
margin: 0 0 1.6em;
}
.news-content h2 {
font-size: 20px;
font-weight: 700;
color: var(--black);
margin: 2.4em 0 0.8em;
padding-left: 16px;
border-left: 3px solid var(--yellow);
}
.news-content h3 {
font-size: 17px;
font-weight: 700;
color: var(--black);
margin: 2em 0 0.6em;
}
.news-content ul,
.news-content ol {
padding-left: 1.6em;
margin: 0 0 1.6em;
}
.news-content li {
margin-bottom: 0.5em;
}
.news-back {
margin-top: 64px;
padding-top: 32px;
border-top: 1px solid var(--gray-100);
}
.news-back__link {
font-size: 14px;
color: var(--gray-700);
text-decoration: none;
transition: color 0.18s ease;
}
.news-back__link:hover {
color: var(--black);
} @media (max-width: 768px) {
.news-list__link {
flex-wrap: wrap;
gap: 8px;
padding: 20px 0;
}
.news-list__date {
font-size: 12px;
}
.news-list__title {
width: 100%;
font-size: 14px;
}
.news-single__title {
font-size: 20px;
}
}  .contact-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 80px;
max-width: var(--container-max);
margin: 0 auto;
padding: 56px 40px 96px;
align-items: start;
} .contact-layout > section {
padding: 0;
} .contact-types {
background: var(--gray-50);
padding: 80px 40px;
}
.contact-types__inner {
max-width: var(--container-max);
margin: 0 auto;
}
.contact-types__lead {
font-size: 15px;
color: var(--gray-700);
line-height: 2;
margin: 0 0 40px;
max-width: 720px;
}
.contact-types__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.contact-type {
position: relative;
background: var(--white);
border: 1px solid var(--gray-100);
padding: 36px 32px;
cursor: pointer;
transition: border-color 0.18s ease, transform 0.18s ease;
display: block;
}
.contact-type:hover {
border-color: var(--black);
transform: translateY(-2px);
}
.contact-type input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.contact-type__num {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 16px;
display: block;
}
.contact-type__title {
font-size: 18px;
font-weight: 700;
color: var(--black);
margin: 0 0 12px;
letter-spacing: 0.02em;
line-height: 1.5;
}
.contact-type__desc {
font-size: 13px;
color: var(--gray-700);
line-height: 1.9;
margin: 0;
}
.contact-type__check {
position: absolute;
top: 20px;
right: 20px;
width: 22px;
height: 22px;
border: 1px solid var(--gray-100);
border-radius: 50%;
background: var(--white);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, border-color 0.18s ease;
}
.contact-type__check::after {
content: '';
width: 10px;
height: 10px;
border-radius: 50%;
background: transparent;
transition: background 0.18s ease;
}
.contact-type input[type="radio"]:checked ~ .contact-type__check {
border-color: var(--black);
background: var(--white);
}
.contact-type input[type="radio"]:checked ~ .contact-type__check::after {
background: var(--yellow);
}
.contact-type:has(input[type="radio"]:checked) {
border-color: var(--black);
border-top: 3px solid var(--yellow);
padding-top: 34px;
} .contact-form {
background: var(--white);
}
.contact-form__intro {
margin-bottom: 48px;
}
.contact-form__intro p {
font-size: 14px;
color: var(--gray-700);
line-height: 2;
margin: 0 0 8px;
}
.contact-form__intro .required-note {
font-size: 12px;
color: var(--gray-500);
margin-top: 12px;
}
.contact-form__intro .required-note .required-mark {
color: var(--pink);
font-weight: 700;
}
.form-row {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 28px;
}
.form-row--inline {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 24px;
row-gap: 28px;
margin-bottom: 28px;
}
.form-row--inline .form-row {
margin-bottom: 0;
} .form-row .wpcf7-form-control-wrap {
display: block;
width: 100%;
margin: 0;
}
.form-row .wpcf7-form-control-wrap > br {
display: none;
}
.form-row p {
margin: 0;
}
.wpcf7-not-valid-tip {
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--pink);
}
.wpcf7 form .wpcf7-response-output {
margin: 24px 0 0;
padding: 14px 16px;
border: 1px solid var(--gray-300);
font-size: 14px;
line-height: 1.7;
}
.form-label {
font-size: 13px;
font-weight: 700;
color: var(--black);
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 8px;
}
.required-mark {
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 700;
color: var(--pink);
background: rgba(245, 60, 101, 0.08);
padding: 2px 8px;
letter-spacing: 0.1em;
}
.optional-mark {
display: inline-block;
font-family: 'Roboto', sans-serif;
font-size: 10px;
font-weight: 500;
color: var(--gray-500);
background: var(--gray-50);
padding: 2px 8px;
letter-spacing: 0.1em;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
color: var(--black);
background: var(--gray-50);
border: 1px solid var(--gray-150);
padding: 14px 16px;
letter-spacing: 0.02em;
transition: border-color 0.18s ease, background 0.18s ease;
-webkit-appearance: none;
appearance: none;
border-radius: 0;
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
background: var(--gray-100);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
background: var(--white);
border-color: var(--black);
}
.form-textarea {
min-height: 180px;
resize: vertical;
line-height: 1.9;
font-family: 'Noto Sans JP', sans-serif;
}
.form-select {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%231a1a1a' stroke-width='1.5' d='M1 1l5 5 5-5'/></svg>");
background-repeat: no-repeat;
background-position: right 18px center;
padding-right: 44px;
cursor: pointer;
}
.form-help {
font-size: 12px;
color: var(--gray-500);
line-height: 1.7;
} .form-consent {
background: var(--gray-50);
padding: 24px 28px;
border-left: 3px solid var(--yellow);
margin: 36px 0 28px;
}
.form-consent label {
display: flex;
gap: 12px;
align-items: flex-start;
cursor: pointer;
font-size: 13px;
color: var(--gray-700);
line-height: 1.9;
}
.form-consent input[type="checkbox"] {
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 2px;
accent-color: var(--black);
}
.form-consent a {
color: var(--black);
text-decoration: underline;
text-underline-offset: 3px;
}
.form-consent a:hover {
color: var(--pink);
} .form-submit {
display: flex;
justify-content: center;
margin-top: 16px;
}
.form-submit .btn-primary {
min-width: 280px;
padding: 18px 32px;
font-size: 14px;
letter-spacing: 0.1em;
} .contact-aside {
position: sticky;
top: 120px;
display: flex;
flex-direction: column;
gap: 20px;
}
.contact-card {
background: var(--white);
border: 1px solid var(--gray-100);
padding: 32px 28px;
}
.contact-card--accent {
border-top: 3px solid var(--yellow);
}
.contact-card__label {
font-family: 'Roboto', sans-serif;
font-size: 11px;
letter-spacing: 0.3em;
color: var(--gray-700);
font-weight: 700;
margin-bottom: 16px;
}
.contact-card__title {
font-size: 16px;
font-weight: 700;
color: var(--black);
margin: 0 0 16px;
letter-spacing: 0.02em;
line-height: 1.6;
}
.contact-card__body {
font-size: 13px;
color: var(--gray-700);
line-height: 1.9;
margin: 0 0 16px;
}
.contact-card__body strong {
color: var(--black);
font-weight: 700;
}
.contact-card__list {
list-style: none;
margin: 0;
padding: 0;
font-size: 13px;
color: var(--gray-700);
line-height: 2;
}
.contact-card__list dt {
font-weight: 700;
color: var(--black);
font-size: 12px;
letter-spacing: 0.04em;
margin-top: 12px;
}
.contact-card__list dt:first-child {
margin-top: 0;
}
.contact-card__list dd {
margin: 4px 0 0;
}
.contact-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
color: var(--black);
text-decoration: none;
border-bottom: 1px solid var(--black);
padding-bottom: 2px;
}
.contact-card__link:hover {
color: var(--pink);
border-bottom-color: var(--pink);
} @media (max-width: 1024px) {
.contact-layout {
grid-template-columns: 1fr;
gap: 56px;
padding: 72px 32px;
}
.contact-aside {
position: static;
}
.contact-types__grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.contact-layout {
padding: 56px 20px;
gap: 40px;
}
.contact-types {
padding: 56px 20px;
}
.contact-types__grid {
grid-template-columns: 1fr;
gap: 16px;
}
.contact-type {
padding: 28px 24px;
}
.form-row--inline {
grid-template-columns: 1fr;
gap: 0;
margin-bottom: 0;
}
.form-row--inline .form-row {
margin-bottom: 28px;
}
.form-submit .btn-primary {
min-width: 0;
width: 100%;
}
}@media (max-width: 1024px) {
:root {
--section-py: 100px;
}
.hero {
padding: 160px 32px 56px;
}
.hero-body {
grid-template-columns: minmax(0, 1fr) 320px;
gap: 48px;
}
.hero-statement {
font-size: 28px;
line-height: 1.9;
}
.hero-mark {
margin-bottom: 64px;
}
.hero-visual__overlay {
right: -16px;
padding: 14px 18px 16px;
min-width: 110px;
}
.hero-visual__num {
font-size: 24px;
}
.hero-visual__caption {
left: -24px;
}
.hero-footer {
gap: 32px;
}
.philosophy-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.philosophy-mark {
position: static;
}
.philosophy-title {
font-size: 26px;
}
.section-title {
font-size: 36px;
}
.services-grid,
.service-list {
grid-template-columns: repeat(2, 1fr);
}
.stats-lead {
grid-template-columns: 1fr;
gap: 32px;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.stat-item {
border-bottom: 1px solid var(--gray-100);
}
.stat-item:nth-child(2) {
border-right: 0;
}
.stat-item:nth-child(3),
.stat-item:nth-child(4) {
border-bottom: 0;
}
.stat-num {
font-size: 52px;
}
.insights-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.footer-inner {
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.megamenu-inner {
grid-template-columns: 220px 1fr;
gap: 32px;
padding: 40px 32px;
}
.megamenu-grid {
grid-template-columns: repeat(2, 1fr);
}
.megamenu-head__title {
font-size: 26px;
}
} @media (max-width: 768px) {
:root {
--section-py: 80px;
}
.header-inner {
padding: 14px 20px;
}
.megamenu,
.megamenu-overlay {
display: none !important;
}
.floating-logo {
top: 16px;
left: 16px;
width: 50px;
height: 50px;
}
.floating-logo__img {
width: 26px;
height: auto;
}
.global-nav .primary-menu,
.global-nav ul {
position: fixed;
top: 0;
right: 0;
width: min(80vw, 320px);
height: 100vh;
background: var(--white);
flex-direction: column;
align-items: flex-start;
padding: 100px 32px 32px;
gap: 8px;
transform: translateX(100%);
transition: transform 0.3s ease;
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
overflow-y: auto;
}
.global-nav .primary-menu__item {
width: 100%;
}
.global-nav .primary-menu__item > a {
flex-direction: row;
justify-content: flex-start;
align-items: baseline;
gap: 12px;
padding: 14px 0;
width: 100%;
border-bottom: 1px solid var(--gray-100);
}
.global-nav .primary-menu__item > a::after {
display: none;
}
.global-nav .nav-cta {
margin-top: 16px;
width: 100%;
flex-direction: row !important;
justify-content: center;
align-items: center;
text-align: center;
padding: 14px 22px !important;
border-bottom: 0 !important;
}
.global-nav.is-open .primary-menu,
.global-nav.is-open ul {
transform: translateX(0);
}
.global-nav .nav-cta {
display: inline-block;
}
.nav-toggle {
display: block;
}
.hero {
padding: 120px 20px 40px;
min-height: auto;
}
.hero-body {
grid-template-columns: 1fr;
gap: 56px;
}
.hero-side {
order: 2;
padding-right: 24px;
}
.hero-visual {
max-width: 100%;
aspect-ratio: 5 / 4;
}
.hero-visual__overlay {
top: 16px;
right: -16px;
padding: 14px 16px;
min-width: 100px;
}
.hero-visual__num {
font-size: 22px;
}
.hero-visual__caption {
left: -24px;
bottom: 8px;
}
.hero-statement {
font-size: 22px;
line-height: 1.9;
margin-bottom: 40px;
}
.hero-mark {
margin-bottom: 40px;
}
.hero-mark__line {
width: 40px;
}
.hero-mark__id {
font-size: 10px;
letter-spacing: 0.3em;
}
.hero-scroll {
padding-top: 56px;
}
.hero-footer {
grid-template-columns: 1fr;
gap: 20px;
margin-top: 48px;
padding-top: 28px;
}
.hero-footer__col:not(:first-child)::before {
display: none;
}
.philosophy {
padding: 80px 20px;
}
.philosophy-title {
font-size: 22px;
}
.philosophy-body {
font-size: 15px;
line-height: 2;
}
section {
padding: var(--section-py) 20px;
}
.section-title {
font-size: 30px;
margin-bottom: 48px;
}
.reasons-grid,
.services-grid,
.pricing-grid,
.service-list {
grid-template-columns: 1fr;
}
.service-list__card {
padding: 32px 24px 28px;
}
.stats {
padding: 72px 20px;
}
.stats-lead h2 {
font-size: 28px;
}
.stats-grid {
grid-template-columns: 1fr;
}
.stat-item {
border-right: 0;
border-bottom: 1px solid var(--gray-100);
padding: 32px 0;
}
.stat-item:last-child {
border-bottom: 0;
}
.stat-num {
font-size: 48px;
}
.insights-head {
flex-direction: column;
align-items: flex-start;
}
.reasons-grid {
gap: 56px;
}
.message-inner {
grid-template-columns: 1fr;
gap: 48px;
}
.message h2 {
font-size: 28px;
}
.price-card.is-featured {
transform: none;
}
.price-card.is-featured:hover {
transform: translateY(-8px);
}
.final-cta {
padding: 100px 20px;
}
.final-cta h2 {
font-size: 30px;
}
.site-footer {
padding: 80px 20px 32px;
}
.footer-inner {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 48px;
}
.floating-cta {
display: block;
}
.cta-group {
flex-direction: column;
}
.btn-primary,
.btn-secondary {
width: 100%;
justify-content: center;
}
}