.page {
padding: var(--sp-6) 0 var(--sp-8);
}
.page__head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--sp-6);
padding-bottom: var(--sp-5);
border-bottom: 1px solid var(--c-border-soft);
}
.page__head .hikara-breadcrumb {
font-size: var(--fs-xs);
letter-spacing: 0.06em;
color: var(--c-text-mute);
margin-bottom: var(--sp-3);
}
.page__head .hikara-breadcrumb a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.page__head .hikara-breadcrumb span[aria-hidden] { margin: 0 .35rem; }
.page__title {
font-family: var(--ff-display);
font-size: var(--fs-4xl);
font-weight: 500;
line-height: 1.1;
margin: 0;
color: var(--c-text);
}
.page__content {
font-size: var(--fs-base);
color: var(--c-text);
line-height: 1.7;
max-width: 760px;
margin: 0 auto;
}
.page__content h2 {
font-family: var(--ff-display);
font-size: var(--fs-2xl);
font-weight: 500;
margin: var(--sp-6) 0 var(--sp-3);
}
.page__content h2:first-child { margin-top: 0; }
.page__content h3 {
font-family: var(--ff-display);
font-size: var(--fs-xl);
font-weight: 500;
margin: var(--sp-5) 0 var(--sp-2);
}
.page__content p { margin: 0 0 var(--sp-3); }
.page__content p:last-child { margin-bottom: 0; }
.page__content strong { font-weight: 600; }
.page__content a {
color: var(--c-text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.page__content a:hover { color: var(--c-accent-dark); }
.page__content ul,
.page__content ol {
margin: 0 0 var(--sp-3) 0;
padding-left: var(--sp-5);
}
.page__content li { margin-bottom: 6px; line-height: 1.6; } .about-page { padding: var(--sp-7) 0 var(--sp-8); }
.about-hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-7);
align-items: center;
margin-bottom: var(--sp-8);
}
.about-hero__text h1 {
font-family: var(--ff-display);
font-size: clamp(36px, 4.6vw, 60px);
font-weight: 500;
line-height: 1.05;
margin: 0 0 var(--sp-4);
}
.about-hero__text p {
font-size: var(--fs-lg);
color: var(--c-text-soft);
line-height: 1.6;
margin: 0;
}
.about-hero__media {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 12px;
overflow: hidden;
background: var(--c-bg-soft);
}
.about-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.about-pillars { margin-bottom: var(--sp-8); }
.about-pillars__head { text-align: center; margin-bottom: var(--sp-6); }
.about-pillars__head h2 {
font-family: var(--ff-display);
font-size: var(--fs-3xl);
font-weight: 500;
margin: 0;
}
.about-pillars__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
.about-pillar {
background: var(--c-bg-soft);
border: 1px solid var(--c-border-soft);
border-radius: 10px;
padding: var(--sp-5);
text-align: left;
}
.about-pillar__icon {
width: 44px; height: 44px;
border-radius: 50%;
background: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-3);
border: 1px solid var(--c-border-soft);
}
.about-pillar__icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.about-pillar h3 {
font-family: var(--ff-display);
font-size: var(--fs-xl);
font-weight: 500;
margin: 0 0 6px;
}
.about-pillar p {
font-size: var(--fs-sm);
color: var(--c-text-soft);
line-height: 1.5;
margin: 0;
}
.about-why {
background: var(--c-bg-soft);
border-radius: 12px;
padding: var(--sp-7);
margin-bottom: var(--sp-8);
display: grid;
grid-template-columns: auto 1fr;
gap: var(--sp-6);
align-items: start;
}
.about-why__icon {
width: 56px; height: 56px;
border-radius: 50%;
background: #fff;
border: 1px solid var(--c-border-soft);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.about-why__icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.about-why h2 {
font-family: var(--ff-display);
font-size: var(--fs-2xl);
font-weight: 500;
margin: 0 0 var(--sp-3);
}
.about-why p {
font-size: var(--fs-base);
color: var(--c-text-soft);
line-height: 1.6;
margin: 0;
}
.about-closing {
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.about-closing__quote {
font-family: var(--ff-display);
font-style: italic;
font-size: var(--fs-2xl);
font-weight: 400;
line-height: 1.35;
margin: 0 0 var(--sp-5);
}
.about-closing__ctas {
display: flex;
justify-content: center;
gap: var(--sp-3);
flex-wrap: wrap;
}
.about-closing .btn { min-width: 220px; } .about-page__breadcrumb {
font-size: var(--fs-sm);
color: var(--c-text-mute);
margin-bottom: var(--sp-4);
}
.about-page__breadcrumb a {
color: var(--c-text-soft);
text-decoration: none;
transition: color var(--t-base) var(--ease);
}
.about-page__breadcrumb a:hover { color: var(--c-text); }
.about-page__breadcrumb span[aria-hidden="true"] { margin: 0 6px; } .about-hero__rating {
display: flex !important;
align-items: center;
gap: 8px;
width: fit-content !important;
margin: var(--sp-4) 0 0 auto !important; padding: 6px 14px;
background: rgba(184, 149, 106, 0.08);
border-radius: 999px;
font-size: var(--fs-sm) !important;
color: var(--c-text) !important;
}
.about-hero__rating a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--t-base) var(--ease);
}
.about-hero__rating a:hover { color: var(--c-accent-dark); }
.about-hero__rating svg {
width: 14px;
height: 14px;
color: var(--c-accent);
fill: var(--c-accent);
}
.about-hero__rating strong { font-weight: 600; } .about-story {
max-width: 760px;
margin: 0 auto var(--sp-8);
}
.about-story h2 {
font-family: var(--ff-display);
font-size: var(--fs-3xl);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-4);
text-align: center;
}
.about-story p {
font-size: var(--fs-base);
color: var(--c-text);
line-height: 1.7;
margin: 0 0 var(--sp-3);
}
.about-story p:last-child { margin-bottom: 0; } .about-commitments {
max-width: 960px;
margin: 0 auto var(--sp-8);
}
.about-commitments h2 {
font-family: var(--ff-display);
font-size: var(--fs-3xl);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-5);
text-align: center;
}
.about-commitments__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-4);
}
.about-commitments__list li {
display: flex;
align-items: flex-start;
gap: var(--sp-3);
padding: var(--sp-4);
background: #fff;
border: 1px solid var(--c-border-soft);
border-radius: 10px;
}
.about-commitment__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
flex-shrink: 0;
border-radius: 50%;
background: var(--c-bg-soft);
color: var(--c-accent-dark);
}
.about-commitment__icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.about-commitments__list h3 {
font-family: var(--ff-display);
font-size: var(--fs-lg);
font-weight: 500;
margin: 0 0 4px;
color: var(--c-text);
}
.about-commitments__list p {
font-size: var(--fs-sm);
color: var(--c-text-soft);
line-height: 1.6;
margin: 0;
}
.about-commitments__legal {
text-align: center;
margin: var(--sp-4) 0 0;
font-size: var(--fs-sm);
color: var(--c-text-soft);
line-height: 1.6;
}
.about-commitments__legal a {
color: var(--c-text);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--t-base) var(--ease);
}
.about-commitments__legal a:hover { color: var(--c-accent-dark); } .about-stats {
max-width: 1000px;
margin: 0 auto var(--sp-8);
padding: var(--sp-6) var(--sp-5);
background: var(--c-bg-soft);
border-radius: 12px;
}
.about-stats h2 {
font-family: var(--ff-display);
font-size: var(--fs-2xl);
font-weight: 500;
letter-spacing: -0.01em;
text-align: center;
margin: 0 0 var(--sp-5);
}
.about-stats__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-4);
}
.about-stat {
text-align: center;
display: flex;
flex-direction: column;
gap: 4px;
}
.about-stat__value {
font-family: var(--ff-display);
font-size: var(--fs-4xl);
font-weight: 500;
line-height: 1;
color: var(--c-accent-dark);
}
.about-stat__label {
font-size: var(--fs-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-soft);
} .about-guides {
max-width: 1100px;
margin: 0 auto var(--sp-8);
}
.about-guides__head {
text-align: center;
max-width: 720px;
margin: 0 auto var(--sp-5);
}
.about-guides__head h2 {
font-family: var(--ff-display);
font-size: var(--fs-3xl);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-2);
}
.about-guides__head p {
font-size: var(--fs-base);
color: var(--c-text-soft);
margin: 0;
}
.about-guides__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
}
.about-guide {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--sp-4) var(--sp-4) var(--sp-4);
background: #fff;
border: 1px solid var(--c-border-soft);
border-radius: 12px;
text-decoration: none;
color: var(--c-text);
transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.about-guide:hover {
border-color: var(--c-accent);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(184, 149, 106, 0.08);
}
.about-guide__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.about-guide__head h3 {
font-family: var(--ff-display);
font-size: var(--fs-xl);
font-weight: 500;
margin: 0;
color: var(--c-text);
}
.about-guide__head svg {
width: 18px;
height: 18px;
color: var(--c-accent-dark);
flex-shrink: 0;
transition: transform var(--t-base) var(--ease);
}
.about-guide:hover .about-guide__head svg { transform: translateX(3px); }
.about-guide__subtitle {
font-size: var(--fs-sm);
color: var(--c-text-soft);
margin: 0;
font-style: italic;
}
.about-guide__topics {
font-size: var(--fs-xs);
color: var(--c-text-mute);
letter-spacing: 0.02em;
line-height: 1.5;
margin: 6px 0 0;
} .about-blog {
max-width: 1100px;
margin: 0 auto var(--sp-8);
}
.about-blog__head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--sp-5);
}
.about-blog__head h2 {
font-family: var(--ff-display);
font-size: var(--fs-3xl);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-2);
}
.about-blog__head p {
font-size: var(--fs-base);
color: var(--c-text-soft);
margin: 0;
}
.about-blog__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-4);
margin-bottom: var(--sp-4);
}
.about-blog-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--c-border-soft);
border-radius: 12px;
text-decoration: none;
color: var(--c-text);
overflow: hidden;
transition: border-color var(--t-base) var(--ease), transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.about-blog-card:hover {
border-color: var(--c-accent);
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(184, 149, 106, 0.08);
}
.about-blog-card__thumb {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--c-bg-soft);
overflow: hidden;
}
.about-blog-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-slow) var(--ease);
}
.about-blog-card:hover .about-blog-card__thumb img { transform: scale(1.04); }
.about-blog-card__body {
padding: var(--sp-4);
display: flex;
flex-direction: column;
gap: 8px;
}
.about-blog-card__date {
font-size: var(--fs-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--c-text-soft);
}
.about-blog-card__title {
font-family: var(--ff-display);
font-size: var(--fs-xl);
font-weight: 500;
line-height: 1.2;
margin: 0;
color: var(--c-text);
}
.about-blog-card__read {
display: inline-flex;
align-items: center;
gap: 4px;
margin: 4px 0 0;
font-size: var(--fs-sm);
color: var(--c-accent-dark);
}
.about-blog-card__read svg {
width: 14px;
height: 14px;
transition: transform var(--t-base) var(--ease);
}
.about-blog-card:hover .about-blog-card__read svg { transform: translateX(3px); }
.about-blog__more {
text-align: center;
margin: 0;
}
.about-blog__more a {
font-size: var(--fs-sm);
color: var(--c-text);
text-decoration: underline;
text-underline-offset: 3px;
transition: color var(--t-base) var(--ease);
}
.about-blog__more a:hover { color: var(--c-accent-dark); } .about-page__updated {
text-align: center;
font-size: var(--fs-xs);
color: var(--c-text-mute);
margin: var(--sp-7) 0 0;
letter-spacing: 0.04em;
} .about-social {
max-width: 800px;
margin: 0 auto var(--sp-8);
padding: var(--sp-5) var(--sp-5);
background: linear-gradient(135deg, rgba(184, 149, 106, 0.08) 0%, rgba(184, 149, 106, 0.03) 100%);
border: 1px solid var(--c-border-soft);
border-radius: 12px;
}
.about-social__inner {
display: flex;
align-items: center;
gap: var(--sp-4);
}
.about-social svg {
width: 32px;
height: 32px;
flex-shrink: 0;
color: var(--c-accent-dark);
}
.about-social__inner > div { flex: 1; }
.about-social__inner h2 {
font-family: var(--ff-display);
font-size: var(--fs-xl);
font-weight: 500;
margin: 0 0 4px;
color: var(--c-text);
}
.about-social__inner p {
margin: 0;
font-size: var(--fs-sm);
color: var(--c-text-soft);
line-height: 1.5;
}
.about-social .btn { flex-shrink: 0; } .about-faq {
max-width: 800px;
margin: 0 auto var(--sp-8);
}
.about-faq h2 {
font-family: var(--ff-display);
font-size: var(--fs-3xl);
font-weight: 500;
letter-spacing: -0.01em;
margin: 0 0 var(--sp-5);
text-align: center;
}
.about-faq__list {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
@media (max-width: 820px) {
.about-page { padding: var(--sp-5) 0 var(--sp-6); }
.about-hero { grid-template-columns: 1fr; gap: var(--sp-5); margin-bottom: var(--sp-6); }
.about-hero__text h1 { font-size: var(--fs-4xl); }
.about-hero__text p { font-size: var(--fs-base); }
.about-hero__media { aspect-ratio: 4 / 3; order: -1; }
.about-pillars { margin-bottom: var(--sp-6); }
.about-pillars__head h2 { font-size: var(--fs-2xl); }
.about-pillars__grid { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.about-pillar { padding: var(--sp-4); }
.about-pillar h3 { font-size: var(--fs-lg); }
.about-why { grid-template-columns: 1fr; padding: var(--sp-5); gap: var(--sp-4); margin-bottom: var(--sp-6); }
.about-why h2 { font-size: var(--fs-xl); }
.about-closing__quote { font-size: var(--fs-xl); }
.about-story { margin-bottom: var(--sp-6); }
.about-story h2 { font-size: var(--fs-2xl); }
.about-commitments { margin-bottom: var(--sp-6); }
.about-commitments h2 { font-size: var(--fs-2xl); }
.about-commitments__list { grid-template-columns: 1fr; gap: var(--sp-3); }
.about-stats { padding: var(--sp-5) var(--sp-4); margin-bottom: var(--sp-6); }
.about-stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.about-stat__value { font-size: var(--fs-3xl); }
.about-faq { margin-bottom: var(--sp-6); }
.about-faq h2 { font-size: var(--fs-2xl); }
.about-guides { margin-bottom: var(--sp-6); }
.about-guides__head h2 { font-size: var(--fs-2xl); }
.about-guides__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
.about-blog { margin-bottom: var(--sp-6); }
.about-blog__head h2 { font-size: var(--fs-2xl); }
.about-blog__grid { grid-template-columns: 1fr; gap: var(--sp-3); }
.about-blog-card__title { font-size: var(--fs-lg); }
.about-social { margin-bottom: var(--sp-6); padding: var(--sp-4); }
.about-social__inner { flex-direction: column; text-align: center; }
.about-social__inner > div { width: 100%; }
} .contact-page { padding: var(--sp-7) 0 var(--sp-8); }
.contact-page__head {
text-align: center;
max-width: 640px;
margin: 0 auto var(--sp-7);
}
.contact-page__head h1 {
font-family: var(--ff-display);
font-size: var(--fs-4xl);
font-weight: 500;
line-height: 1.1;
margin: 0 0 var(--sp-3);
}
.contact-page__head p {
font-size: var(--fs-base);
color: var(--c-text-soft);
line-height: 1.6;
margin: 0;
}
.contact-layout {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: var(--sp-7);
align-items: start;
}
.contact-form {
background: var(--c-bg-soft);
border-radius: 10px;
padding: var(--sp-6);
border: 1px solid var(--c-border-soft);
}
.contact-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
}
.contact-form__field { margin-bottom: var(--sp-4); }
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__label {
display: block;
font-size: var(--fs-sm);
font-weight: 500;
margin-bottom: 6px;
}
.contact-form__required { color: var(--c-accent); margin-left: 2px; }
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
width: 100%;
font: inherit;
font-size: var(--fs-base);
color: var(--c-text);
background: #fff;
border: 1px solid var(--c-border);
border-radius: 6px;
padding: 12px 14px;
transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.contact-form__select {
appearance: none;
-webkit-appearance: none;
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' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
.contact-form__textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
outline: none;
border-color: var(--c-text);
box-shadow: 0 0 0 3px rgba(26,26,26,0.08);
}
.contact-form__legal {
font-size: var(--fs-xs);
color: var(--c-text-soft);
line-height: 1.5;
margin: var(--sp-3) 0 var(--sp-4);
}
.contact-form__submit { width: 100%; }
.contact-form__success {
display: none;
padding: var(--sp-5);
background: #f0faf3;
border: 1px solid #c8e6cf;
border-radius: 8px;
text-align: center;
}
.contact-form__success-icon {
width: 48px; height: 48px;
border-radius: 50%;
background: #16a34a;
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-3);
}
.contact-form__success-icon svg { width: 24px; height: 24px; }
.contact-form__success h3 {
font-family: var(--ff-display);
font-size: var(--fs-2xl);
font-weight: 500;
margin: 0 0 8px;
}
.contact-form__success p {
font-size: var(--fs-sm);
color: var(--c-text-soft);
margin: 0;
line-height: 1.5;
}
.contact-form.is-sent .contact-form__success { display: block; }
.contact-form.is-sent .contact-form__fields,
.contact-form.is-sent .contact-form__legal,
.contact-form.is-sent .contact-form__submit,
.contact-form.is-sent .contact-form__error { display: none; }
.contact-info {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.contact-card {
background: #fff;
border: 1px solid var(--c-border-soft);
border-radius: 10px;
padding: var(--sp-5);
}
.contact-card__icon {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--c-bg-soft);
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: var(--sp-3);
}
.contact-card__icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.contact-card__title {
font-family: var(--ff-display);
font-size: var(--fs-xl);
font-weight: 500;
margin: 0 0 6px;
}
.contact-card__text {
font-size: var(--fs-sm);
color: var(--c-text-soft);
line-height: 1.5;
margin: 0 0 var(--sp-3);
}
.contact-card__link {
font-size: var(--fs-base);
font-weight: 500;
color: var(--c-text);
border-bottom: 1px solid var(--c-text);
padding-bottom: 2px;
text-decoration: none;
transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.contact-card__link:hover {
color: var(--c-accent-dark);
border-color: var(--c-accent-dark);
}
@media (max-width: 820px) {
.contact-page { padding: var(--sp-5) 0 var(--sp-6); }
.contact-page__head { margin-bottom: var(--sp-5); }
.contact-page__head h1 { font-size: var(--fs-3xl); }
.contact-layout { grid-template-columns: 1fr; gap: var(--sp-5); }
.contact-form { padding: var(--sp-5); }
.contact-form__row { grid-template-columns: 1fr; gap: 0; }
}