:root {
--main-color: #434343;
--bg-color: #FFFFFF;
--font-logo: "Times New Roman", Times, serif;
--font-main: "Times New Roman", Times, "Noto Serif JP", serif;
--header-height: 80px;
}
body {
color: var(--main-color);
background-color: var(--bg-color);
line-height: 1.8;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
font-family: var(--font-main);
}
.ais-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height);
background-color: rgba(255, 255, 255, 0.95);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
z-index: 1005;
transition: transform 0.4s ease;
}
.ais-header-logo {
font-family: var(--font-logo);
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.02em;
color: var(--main-color);
z-index: 1002;
text-decoration: none;
}
.ais-header-logo:hover {
opacity: 0.7;
}
.ais-header-contact-btn {
font-family: var(--font-main);
font-size: 0.9rem;
font-weight: bold;
color: var(--main-color);
border: 1px solid var(--main-color);
padding: 0.6rem 2rem;
text-decoration: none;
transition: all 0.3s ease;
}
.ais-header-contact-btn:hover {
background-color: var(--main-color);
color: #FFFFFF;
}
.ais-footer {
position: relative;
background-color: #FFFFFF;
color: var(--main-color);
padding: 0;
text-align: left;
border-top: none;
z-index: 10;
}
.ais-footer-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--main-color);
color: #FFFFFF;
overflow: hidden;
opacity: 0;
pointer-events: none;
z-index: 2;
}
.ais-footer-overlay a,
.ais-footer-overlay p,
.ais-footer-overlay span {
color: #FFFFFF !important;
}
.ais-footer-content {
padding: 4rem 0;
width: 100%;
height: 100%;
background-color: transparent;
}
.ais-footer-container {
width: 100%;
max-width: none;
margin: 0 auto;
padding: 0 2rem;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.ais-footer-logo {
font-family: var(--font-logo);
font-size: 1.5rem;
font-weight: bold;
letter-spacing: 0.02em;
margin-bottom: 1.5rem;
display: inline-block;
}
.ais-footer-info {
font-family: var(--font-main);
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 2.5rem;
line-height: 1.8;
}
.ais-footer-links {
display: flex;
justify-content: flex-start;
gap: 2rem;
margin-bottom: 4rem;
flex-wrap: wrap;
}
.ais-footer-links a {
font-family: var(--font-main);
font-size: 0.9rem;
opacity: 0.8;
transition: opacity 0.3s ease;
text-decoration: none;
position: relative;
}
.ais-footer-links a::after {
content: '';
position: absolute;
width: 100%;
height: 1px;
bottom: -2px;
left: 0;
background-color: currentColor;
transform: scaleX(0);
transform-origin: bottom right;
transition: transform 0.3s ease-out;
}
.ais-footer-links a:hover {
opacity: 1;
}
.ais-footer-links a:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.ais-copyright {
font-family: var(--font-main);
font-size: 0.8rem;
opacity: 0.5;
width: 100%;
text-align: center;
}
html.ais-js .ais-reveal {
opacity: 1;
transform: none;
transition: none;
visibility: hidden;
}
html.ais-js .ais-reveal.is-visible {
opacity: 1;
transform: none;
visibility: visible;
}
.ais-typing-cursor::after {
animation: ais-blink 1s step-end infinite;
background-color: #1a1a1a;
content: '';
display: inline-block;
height: 1.1em;
margin-left: 2px;
vertical-align: text-bottom;
width: 3px;
}
@keyframes ais-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
html.ais-js .ais-reveal {
opacity: 1;
transform: none;
transition: none;
visibility: visible;
}
}
.ais-contact-grid {
border-top: 1px solid var(--main-color);
display: grid;
gap: 3rem;
grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
padding-top: 4rem;
}
.ais-contact-kicker {
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.18em;
margin-bottom: 1.5rem;
}
.ais-contact-title {
color: #1a1a1a;
font-size: clamp(3rem, 8vw, 7rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1;
margin-bottom: 2rem;
}
.ais-contact-lead {
font-size: 1.05rem;
line-height: 2;
max-width: 32rem;
}
.ais-contact-form {
display: grid;
gap: 1.4rem;
}
.ais-hp-field {
height: 0;
left: -10000px;
overflow: hidden;
position: absolute;
width: 0;
}
.ais-form-row {
display: grid;
gap: 0.45rem;
}
.ais-form-row label,
.ais-privacy-check {
font-size: 0.95rem;
font-weight: 700;
}
.ais-form-row label span {
margin-left: 0.25rem;
}
.ais-form-row input,
.ais-form-row textarea {
appearance: none;
background: #fff;
border: 1px solid rgba(67, 67, 67, 0.45);
border-radius: 0;
color: #1a1a1a;
font: inherit;
line-height: 1.6;
padding: 0.95rem 1rem;
width: 100%;
}
.ais-form-row input:focus,
.ais-form-row textarea:focus {
border-color: #1a1a1a;
outline: 2px solid rgba(67, 67, 67, 0.18);
outline-offset: 2px;
}
.ais-privacy-check {
align-items: flex-start;
display: flex;
gap: 0.75rem;
line-height: 1.7;
}
.ais-privacy-check input {
margin-top: 0.35rem;
}
.ais-privacy-check a {
text-decoration: underline;
text-underline-offset: 0.2em;
}
.ais-form-status {
font-size: 0.95rem;
min-height: 1.6em;
}
.ais-form-status.is-success {
color: #275c36;
}
.ais-form-status.is-error {
color: #8f2e20;
}
.ais-submit-btn {
align-items: center;
background: #434343;
border: 1px solid #434343;
color: #fff;
cursor: pointer;
display: inline-flex;
font: inherit;
font-weight: 700;
justify-content: center;
letter-spacing: 0.08em;
min-height: 3.75rem;
padding: 1rem 2rem;
transition: background-color 0.25s ease, color 0.25s ease;
}
.ais-submit-btn:hover,
.ais-submit-btn:focus-visible {
background: #1a1a1a;
}
.ais-submit-btn:disabled {
cursor: progress;
opacity: 0.6;
}
.hover-underline {
position: relative;
display: inline-block;
}
.hover-underline::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 1px;
bottom: 0;
left: 0;
background-color: #434343;
transform-origin: bottom right;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-underline:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
.arrow-icon {
transition: transform 0.3s ease;
}
.group:hover .arrow-icon {
transform: translateX(4px);
}
@media (max-width: 768px) {
:root { --header-height: 70px; }
.ais-header, .ais-footer-container { padding: 0 1.25rem; }
.ais-footer-links { flex-direction: column; gap: 1rem; }
.ais-contact-grid { grid-template-columns: 1fr; padding-top: 3rem; }
}