@charset 'utf-8';
 .header {
position: fixed; top: 0; left: 0; right: 0; z-index: 900;
height: var(--nav-h);
background: #fff;
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(200,184,164,.15);
transition: box-shadow .3s;
}
.header.scrolled { box-shadow: var(--shadow-card); }
.header-inner {
max-width: 1340px; margin-inline: auto;
padding-inline: clamp(20px,4vw,48px);
height: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 20px;
} .logo {
font-family: var(--font-serif); font-size: 13px; font-weight: 600;
color: var(--charcoal); letter-spacing: .05em;
white-space: nowrap; flex-shrink: 0;
} .pc-nav { display: flex; align-items: center; }
.nav-links { display: flex; gap: 0; }
.nav-links a {
display: block; padding: 6px 11px;
font-size: 11.5px; letter-spacing: .07em;
color: var(--text-muted); transition: color .2s; white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active { color: var(--coral); } .header-cta {
margin-left: 14px;
background: var(--coral); color: #fff !important;
padding: 10px 22px; border-radius: var(--radius-pill);
font-size: 12.5px; font-weight: 500; letter-spacing: .08em;
white-space: nowrap; flex-shrink: 0;
transition: background .25s, transform .2s, box-shadow .25s;
box-shadow: var(--shadow-glow);
}
@media (hover: hover) {
.header-cta:hover { background: var(--coral-dk); transform: translateY(-2px); }
}   .header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
background: rgba(255,252,250,.95);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(200,184,164,.18);
}
.header-container {
max-width: 1340px;
margin: 0 auto;
padding: 0 40px;
height: 75px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
} .logo a {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.logo__main {
font-family: var(--font-serif);
font-size: 18px; font-weight: 600;
color: var(--charcoal);
letter-spacing: .06em; line-height: 1;
white-space: nowrap;
}
.logo__main em { font-style: normal; color: var(--coral); }
.logo__divider {
width: 1px; height: 14px;
background: var(--stone);
flex-shrink: 0;
}
.logo__sub {
font-size: 13px;
letter-spacing: .1em;
color: var(--brown-mid);
white-space: nowrap;
}
.header nav {
display: flex;
align-items: center;
gap: 0;
}
.nav-links {
display: flex;
list-style: none;
gap: 0;
margin: 0;
padding: 0;
}
.nav-links li a {
display: block;
padding: 8px 14px;
font-size: 14px;
letter-spacing: .08em;
color: var(--text-muted);
transition: color .2s;
white-space: nowrap;
}
@media (hover: hover) {
.nav-links li a:hover { color: var(--coral); }
}
.contact-btn {
margin-left: 16px;
background: var(--coral);
color: #fff !important;
padding: 10px 22px;
border-radius: var(--radius-pill);
font-size: 13px;
font-weight: 500;
letter-spacing: .08em;
white-space: nowrap;
transition: background .25s, transform .2s, box-shadow .25s;
box-shadow: 0 4px 16px rgba(217,119,87,.35);
flex-shrink: 0;
}
@media (hover: hover) {
.contact-btn:hover {
background: var(--coral-dk);
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(217,119,87,.45);
}
}  #sp-menu-chk { display: none; } .sp-header {
display: none;
position: fixed; top: 0; left: 0; right: 0; z-index: 900;
height: 60px;
background: rgba(253,248,243,.97);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(200,184,164,.15);
align-items: center; justify-content: space-between;
padding-inline: 20px;
box-shadow: 0 2px 12px rgba(44,36,32,.08);
} .sp-logo {
display: flex;
align-items: center;
gap: 10px;
}
.sp-logo__bar {
width: 2px; height: 28px;
background: var(--coral);
border-radius: 2px;
flex-shrink: 0;
}
.sp-logo__main {
font-family: var(--font-serif);
font-size: 16px; font-weight: 600;
color: var(--charcoal);
letter-spacing: .06em; line-height: 1;
white-space: nowrap;
margin-left: -5px;
}
.sp-logo__main em { font-style: normal; color: var(--coral); }
.sp-logo__divider {
width: 1px; height: 14px;
background: var(--stone);
flex-shrink: 0;
}
.sp-logo a {
display: flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.sp-logo__sub {
font-size: 10px;
letter-spacing: .1em;
color: var(--brown-mid);
white-space: nowrap;
} .hamburger {
width: 44px; height: 44px; cursor: pointer;
display: flex; flex-direction: column;
justify-content: center; align-items: flex-end;
gap: 5px; position: relative; z-index: 1001;
padding-right: 10px;
}
.hamburger i {
display: block; height: 1.5px; border-radius: 2px;
background: var(--charcoal);
transition: all .35s cubic-bezier(.4,0,.2,1);
}
.hamburger i:nth-child(1) { width: 22px; }
.hamburger i:nth-child(2) { width: 14px; } .hamburger i:nth-child(3) { width: 22px; } #sp-menu-chk:checked ~ .sp-header .hamburger i:nth-child(1) {
width: 22px;
transform: translateY(6.5px) rotate(45deg);
background: var(--coral);
}
#sp-menu-chk:checked ~ .sp-header .hamburger i:nth-child(2) {
opacity: 0;
width: 0;
transform: scaleX(0);
}
#sp-menu-chk:checked ~ .sp-header .hamburger i:nth-child(3) {
width: 22px;
transform: translateY(-6.5px) rotate(-45deg);
background: var(--coral);
} .sp-overlay {
display: none; position: fixed; inset: 0; z-index: 940;
background: rgba(44,36,32,.45);
opacity: 0; pointer-events: none;
transition: opacity .42s ease;
}
#sp-menu-chk:checked ~ .sp-overlay {
opacity: 1; pointer-events: auto;
} .sp-drawer {
display: none; position: fixed; left: 0; right: 0; bottom: 0;
z-index: 950;
background: var(--warm-white);
border-radius: 28px 28px 0 0;
transform: translateY(100%);
transition: transform .42s cubic-bezier(.4,0,.2,1);
box-shadow: 0 -8px 48px rgba(44,36,32,.18);
overflow: hidden;
}
#sp-menu-chk:checked ~ .sp-drawer {
transform: translateY(0);
} .sp-drawer__grip {
width: 40px; height: 4px; border-radius: 2px;
background: var(--stone); margin: 14px auto 0;
} .sp-drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px 14px;
border-bottom: 1px solid var(--sand);
}
.sp-drawer__head-en {
font-family: var(--font-latin); font-size: 13px;
letter-spacing: .22em; text-transform: uppercase;
color: var(--stone);
} .sp-drawer__close {
font-size: 13px; letter-spacing: .06em;
color: var(--text-muted); cursor: pointer;
display: flex; align-items: center; gap: 5px;
}
.sp-drawer__close::before {
content: '✕'; color: var(--coral); font-size: 10px;
} .sp-drawer__grid {
display: grid; grid-template-columns: 1fr 1fr;
gap: 1px; background: var(--sand);
}
.sp-drawer__grid a {
background: var(--warm-white);
padding: 16px 18px;
display: flex; flex-direction: column; gap: 3px;
transition: background .2s, color .2s;
-webkit-tap-highlight-color: transparent;
}
.sp-drawer__grid a .en {
font-family: var(--font-latin); font-size: 9.5px;
letter-spacing: .16em; text-transform: uppercase;
color: var(--stone); transition: color .2s;
}
.sp-drawer__grid a .ja { font-size: 14px;
color: var(--charcoal); letter-spacing: .05em;
transition: color .2s;
}
.sp-drawer__grid a:active,
@media (hover: hover) {
.sp-drawer__grid a:hover                { background: var(--coral-pale); }
}
.sp-drawer__grid a:active .en,
@media (hover: hover) {
.sp-drawer__grid a:hover  .en           { color: var(--coral-lt); }
}
.sp-drawer__grid a:active .ja,
@media (hover: hover) {
.sp-drawer__grid a:hover  .ja           { color: var(--coral); }
} .sp-drawer__cta {
padding: 16px 20px 32px;
background: var(--warm-white);
}
.sp-drawer__cta a {
display: flex; align-items: center; justify-content: center; gap: 8px;
background: var(--coral); color: #fff;
padding: 15px; border-radius: var(--radius-pill);
font-size: 13.5px; font-weight: 500; letter-spacing: .08em;
box-shadow: 0 4px 20px rgba(217,119,87,.32);
transition: background .25s;
}
@media (hover: hover) {
.sp-drawer__cta a:hover { background: var(--coral-dk); }
} @media (max-width: 1220px) {
body { padding-top: var(--sp-nav-h); } .header     { display: none; } .sp-header  { display: flex; }
.sp-overlay { display: block; }
.sp-drawer  { display: block; }
}
#scroll-chara {
position: fixed;
bottom: -130px;
right: -130px;
width: 120px;
z-index: 9999;
transition: bottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
right 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
pointer-events: none;
}
#scroll-chara.is-show {
bottom: -5px;
right: -5px;
}
#scroll-chara img {
width: 100%;
height: auto;
display: block;
}
@media (max-width: 600px) {
#scroll-chara {
width: 50px;
}
}