:root {
--sky: #d6eef8;
--sky-mid: #a8d8ee;
--sky-deep: #6cb8de;
--sky-text: #2a6a8a;
--sky-dark: #1a4f6a;
--cloud: #f0f8fc;
--soft-gray: #7a9aaa;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Zen Maru Gothic', sans-serif;
background: var(--cloud);
color: var(--sky-dark);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem 1.5rem;
}
.page-wrap {
width: 100%;
max-width: 580px;
}
/* PAGE HEADER */
.page-header {
text-align: center;
margin-bottom: 2.5rem;
}
.page-label {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
font-size: 0.72rem;
letter-spacing: 0.45em;
color: var(--sky-text);
text-transform: uppercase;
display: block;
margin-bottom: 0.8rem;
}
.page-title {
font-family: 'Shippori Mincho', serif;
font-size: 1.9rem;
font-weight: 600;
color: var(--sky-dark);
margin-bottom: 0.8rem;
}
.page-desc {
font-size: 0.88rem;
color: var(--soft-gray);
line-height: 1.9;
}
/* FORM CARD */
.form-card {
background: white;
border-radius: 24px;
padding: 2.5rem 2.2rem;
border: 1.5px solid var(--sky-mid);
box-shadow: 0 10px 40px rgba(42,106,138,0.1);
}
/* TYPE SELECTOR */
.type-section {
margin-bottom: 2.2rem;
}
.type-label {
font-size: 0.82rem;
font-weight: 500;
color: var(--sky-dark);
margin-bottom: 1rem;
display: block;
}
.type-btns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.type-btn {
position: relative;
cursor: pointer;
}
.type-btn input[type="radio"] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.type-btn-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 10px;
border-radius: 16px;
border: 2px solid var(--sky-mid);
background: var(--cloud);
transition: all 0.25s;
cursor: pointer;
width: 100%;
user-select: none;
}
.type-btn-circle {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--sky-mid);
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s;
flex-shrink: 0;
}
.type-btn-circle::after {
content: '';
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--sky-text);
opacity: 0;
transform: scale(0.3);
transition: all 0.2s;
}
.type-btn-text {
font-size: 0.85rem;
font-weight: 500;
color: var(--soft-gray);
transition: color 0.2s;
text-align: center;
line-height: 1.4;
}
/* checked state */
.type-btn input:checked + .type-btn-inner {
border-color: var(--sky-text);
background: var(--sky);
box-shadow: 0 4px 16px rgba(42,106,138,0.15);
}
.type-btn input:checked + .type-btn-inner .type-btn-circle {
border-color: var(--sky-text);
background: var(--sky-text);
}
.type-btn input:checked + .type-btn-inner .type-btn-circle::after {
opacity: 1;
transform: scale(1);
background: white;
}
.type-btn input:checked + .type-btn-inner .type-btn-text {
color: var(--sky-dark);
font-weight: 700;
}
.type-btn-inner:hover {
border-color: var(--sky-deep);
background: var(--sky);
}
/* DIVIDER */
.divider {
display: flex;
align-items: center;
gap: 12px;
font-family: 'Josefin Sans', sans-serif;
font-size: 0.7rem;
letter-spacing: 0.2em;
color: var(--sky-text);
margin: 1.8rem 0 1.4rem;
}
.divider::before, .divider::after {
content: '';
flex: 1;
height: 1px;
background: var(--sky-mid);
}
/* FORM FIELDS */
.field { margin-bottom: 1.3rem; }
.field label {
display: block;
font-size: 0.83rem;
font-weight: 500;
color: var(--sky-dark);
margin-bottom: 0.45rem;
}
.badge {
display: inline-block;
font-size: 0.62rem;
padding: 2px 8px;
border-radius: 4px;
margin-left: 5px;
font-weight: 500;
letter-spacing: 0.04em;
}
.badge-req { background: var(--sky-text); color: white; }
.badge-opt { background: var(--sky-mid); color: var(--sky-dark); }
.field input, .field select {
width: 100%;
padding: 13px 16px;
border: 1.5px solid var(--sky-mid);
border-radius: 12px;
background: var(--cloud);
font-family: 'Zen Maru Gothic', sans-serif;
font-size: 0.88rem;
color: var(--sky-dark);
outline: none;
transition: all 0.2s;
}
.field input:focus, .field select:focus {
border-color: var(--sky-text);
background: white;
box-shadow: 0 0 0 3px rgba(42,106,138,0.1);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field-hint { font-size: 0.74rem; color: var(--soft-gray); margin-top: 4px; }
.field textarea {
width: 100%;
padding: 13px 16px;
border: 1.5px solid var(--sky-mid);
border-radius: 12px;
background: var(--cloud);
font-family: 'Zen Maru Gothic', sans-serif;
font-size: 0.88rem;
color: var(--sky-dark);
outline: none;
resize: vertical;
transition: all 0.2s;
}
.field textarea:focus {
border-color: var(--sky-text);
background: white;
box-shadow: 0 0 0 3px rgba(42,106,138,0.1);
}
/* AGREE */
.agree-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 0.82rem;
color: var(--sky-dark);
margin: 1.8rem 0 1.5rem;
cursor: pointer;
}
.agree-row input[type="checkbox"] {
width: 18px; height: 18px;
margin-top: 1px;
accent-color: var(--sky-text);
flex-shrink: 0;
cursor: pointer;
}
/* SUBMIT */
.submit-btn {
width: 100%;
padding: 18px;
background: var(--sky-text);
color: white;
border: none;
border-radius: 60px;
font-family: 'Zen Maru Gothic', sans-serif;
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.15em;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 8px 28px rgba(42,106,138,0.28);
}
.submit-btn:hover {
background: var(--sky-dark);
transform: translateY(-2px);
box-shadow: 0 12px 36px rgba(42,106,138,0.38);
}
.submit-btn:active {
transform: translateY(0);
}
/* HOME BUTTON */
.home-btn {
display: inline-block;
margin-top: 1.2rem;
padding: 13px 36px;
border: 2px solid var(--sky-mid);
border-radius: 60px;
background: white;
color: var(--sky-text);
font-family: 'Zen Maru Gothic', sans-serif;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.12em;
text-decoration: none;
transition: all 0.25s;
cursor: pointer;
}
.home-btn:hover {
border-color: var(--sky-text);
background: var(--sky);
transform: translateY(-2px);
}
/* TEL BANNER */
.tel-banner {
background: linear-gradient(135deg, #e8f5fb 0%, #d0ecf7 100%);
border: 1.5px solid var(--sky-mid);
border-radius: 20px;
text-align: center;
padding: 1.6rem 1.5rem;
margin-bottom: 1.8rem;
box-shadow: 0 4px 18px rgba(42,106,138,0.1);
}
.tel-banner-label {
font-size: 0.8rem;
color: var(--soft-gray);
letter-spacing: 0.12em;
margin-bottom: 0.5rem;
display: block;
}
.tel-banner-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0;
text-decoration: none;
color: var(--sky-dark);
transition: opacity 0.2s;
}
.tel-banner-link:hover { opacity: 0.65; }
.tel-banner-number {
font-family: 'Shippori Mincho', serif;
font-weight: 400;
font-size: 2.2rem;
letter-spacing: 0.15em;
color: var(--sky-dark);
line-height: 1;
}
.tel-banner-hours {
font-size: 0.74rem;
color: var(--soft-gray);
margin-top: 0.5rem;
display: block;
letter-spacing: 0.05em;
}
/* THANK YOU */
.thank-you {
display: none;
text-align: center;
padding: 3rem 1rem;
animation: fadeInUp 0.6s ease forwards;
}
.thank-you.show { display: block; }
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.ty-icon {
font-size: 3.5rem;
margin-bottom: 1.5rem;
display: block;
}
.ty-title {
font-family: 'Shippori Mincho', serif;
font-size: 1.4rem;
color: var(--sky-dark);
margin-bottom: 1.2rem;
font-weight: 600;
line-height: 1.6;
}
.ty-body {
font-size: 0.88rem;
color: var(--soft-gray);
line-height: 2.1;
max-width: 380px;
margin: 0 auto;
}
.ty-line {
width: 50px;
height: 2px;
background: var(--sky-mid);
margin: 1.5rem auto;
border-radius: 2px;
}
.ty-brand {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
font-size: 0.75rem;
letter-spacing: 0.4em;
color: var(--sky-text);
text-transform: uppercase;
}
/* SITE HEADER */
.site-header {
text-align: center;
margin-bottom: 2.8rem;
padding: 2rem 0 2.2rem;
border-bottom: 1px solid var(--sky-mid);
position: relative;
}
.logo-text {
display: block;
font-family: 'Cinzel', serif;
font-weight: 400;
font-size: clamp(1.1rem, 3vw, 1.55rem);
letter-spacing: 0.32em;
color: var(--sky-dark);
text-transform: uppercase;
margin-bottom: 0.2rem;
text-decoration: none;
}
.logo-text:hover { opacity: 0.7; }
.logo-name {
font-family: 'Josefin Sans', sans-serif;
font-weight: 300;
font-size: 1.05rem;
letter-spacing: 0.38em;
color: var(--sky-dark);
text-transform: uppercase;
display: block;
margin-bottom: 0.35rem;
}
.logo-sub {
font-family: 'Shippori Mincho', serif;
font-size: 0.78rem;
letter-spacing: 0.22em;
color: var(--soft-gray);
display: block;
}
.header-deco {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 1.1rem;
}
.header-deco-line {
width: 50px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--sky-mid));
}
.header-deco-line.r {
background: linear-gradient(90deg, var(--sky-mid), transparent);
}
.header-deco-diamond {
width: 5px; height: 5px;
background: var(--sky-mid);
transform: rotate(45deg);
}
/* MAP SECTION */
.map-section {
margin-top: 2.5rem;
border-radius: 20px;
overflow: hidden;
background: white;
border: 1.5px solid var(--sky-mid);
box-shadow: 0 8px 30px rgba(42,106,138,0.1);
}
.map-info {
padding: 1.4rem 1.6rem;
display: flex;
align-items: flex-start;
gap: 1rem;
flex-wrap: wrap;
}
.map-icon-col {
font-size: 1.4rem;
padding-top: 2px;
flex-shrink: 0;
}
.map-text h3 {
font-family: 'Shippori Mincho', serif;
font-size: 0.98rem;
color: var(--sky-dark);
font-weight: 600;
margin-bottom: 0.3rem;
}
.map-text p {
font-size: 0.8rem;
color: var(--soft-gray);
line-height: 1.8;
}
.map-frame {
width: 100%;
height: 260px;
border: none;
display: block;
}