@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300;400;500;600&family=Noto+Sans+JP:wght@300;400;500&display=swap');

/* ===== RESET & BASE ===== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Serif JP',serif;
  color:#1a1a1a;
  background:#f7f4ef;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
ul,ol{list-style:none}

/* ===== CSS VARIABLES ===== */
:root{
  --kon:#163450;
  --kon-deep:#0e2235;
  --kon-mid:#1e4468;
  --kon-light:#2a5580;
  --gold:#c9a96e;
  --gold-light:#d4ba8a;
  --gold-pale:#e8dcc6;
  --shiro:#f7f4ef;
  --shoji:#ede8df;
  --text:#2c2c2c;
  --text-light:#46535e;
  --sans:'Noto Sans JP',sans-serif;
  --serif:'Noto Serif JP',serif;
  --max-w:1000px;
  --content-w:720px;
}

/* ===== HEADER / NAVIGATION ===== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .4s,box-shadow .4s;
}
.site-header.scrolled{
  background:rgba(14,34,53,.95);
  box-shadow:0 1px 20px rgba(0,0,0,.2);
  backdrop-filter:blur(8px);
}
.header-inner{
  max-width:var(--max-w);margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 32px;
}
.logo{display:flex;align-items:center;gap:12px;color:var(--gold-pale)}
.logo-mark{
  width:42px;height:42px;border-radius:50%;
  border:1.5px solid rgba(201,169,110,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;
}
.logo-mark-img{
  width:40px;height:40px;
  object-fit:contain;
}
.logo-text{font-size:14px;letter-spacing:3px;font-weight:400}
.nav-links{display:flex;gap:20px;font-family:var(--sans);font-size:11px;letter-spacing:1.5px}
.nav-links a{color:rgba(247,244,239,.7);transition:color .3s}
.nav-links a:hover,.nav-links a.active{color:var(--gold-light)}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--gold-pale);margin:5px 0;transition:.3s}

/* ===== HERO ===== */
.hero{
  position:relative;height:100vh;min-height:600px;max-height:900px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
}
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,34,53,.7) 0%,rgba(22,52,80,.6) 50%,rgba(14,34,53,.8) 100%);
}
.hero-texture{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(201,169,110,.03) 0px,rgba(201,169,110,.03) 1px,transparent 1px,transparent 30px),
  repeating-linear-gradient(0deg,rgba(201,169,110,.02) 0px,rgba(201,169,110,.02) 1px,transparent 1px,transparent 60px);
  pointer-events:none;z-index:1;
}
.hero-fade{
  position:absolute;bottom:-1px;left:0;right:0;height:120px;
  background:linear-gradient(transparent,var(--shiro));z-index:2;
}
.hero-content{position:relative;z-index:3;padding:0 24px}
.hero-label{font-size:12px;letter-spacing:6px;color:var(--gold);margin-bottom:16px;font-weight:300}
.hero-title{font-size:28px;font-weight:300;color:var(--shiro);letter-spacing:5px;line-height:1.9}
.hero-title em{font-style:normal;font-weight:500;font-size:42px;display:block;letter-spacing:14px;margin-top:6px}
.hero-tagline{font-size:13px;color:rgba(247,244,239,.6);letter-spacing:3px;font-weight:300;margin-top:20px}
.hero-cta{
  display:inline-block;margin-top:32px;padding:12px 44px;
  border:1px solid var(--gold);color:var(--gold);
  font-size:12px;letter-spacing:3px;font-family:var(--sans);
  transition:all .4s;
}
.hero-cta:hover{background:var(--gold);color:var(--kon-deep)}

/* ===== PAGE HERO (sub pages) ===== */
.page-hero{
  position:relative;height:360px;
  display:flex;align-items:flex-end;justify-content:center;
  overflow:hidden;padding-bottom:48px;
}
.page-hero .hero-bg::after{
  background:linear-gradient(180deg,rgba(14,34,53,.6) 0%,rgba(14,34,53,.85) 100%);
}
.page-hero-content{position:relative;z-index:3;text-align:center}
.page-hero-en{font-size:12px;letter-spacing:6px;color:var(--gold);font-weight:300;margin-bottom:8px}
.page-hero-title{font-size:28px;color:var(--shiro);letter-spacing:6px;font-weight:400}

/* ===== DIVIDERS ===== */
.divider{display:flex;align-items:center;justify-content:center;gap:16px;padding:40px 0}
.divider .line{width:50px;height:.5px;background:var(--kon);opacity:.12}
.divider .diamond{width:5px;height:5px;border:.5px solid var(--kon);opacity:.12;transform:rotate(45deg)}

/* ===== SECTIONS ===== */
.section{max-width:var(--content-w);margin:0 auto;padding:0 24px}
.section-num{font-family:var(--sans);font-size:11px;letter-spacing:4px;color:var(--kon-mid);opacity:.65;margin-bottom:6px}
.section-en{font-size:11px;letter-spacing:5px;color:var(--kon);opacity:.40;text-transform:uppercase;font-family:var(--sans);margin-bottom:6px}
.section-title{font-size:22px;font-weight:400;letter-spacing:3px;color:var(--kon-deep);margin-bottom:20px;line-height:1.7}
.section-body{font-size:15.5px;line-height:2.2;color:var(--text-light);font-weight:300;letter-spacing:.3px}
.section-body strong{font-weight:500;color:var(--kon-deep)}

/* ===== PHOTO GRIDS ===== */
.photo-grid{
  display:grid;gap:4px;margin:32px auto;
  max-width:var(--content-w);padding:0 24px;
}
.photo-grid.g-3{grid-template-columns:1fr 1fr}
.photo-grid.g-2{grid-template-columns:1fr 1fr}
.photo-grid.g-1{grid-template-columns:1fr}
.photo-item{
  position:relative;overflow:hidden;
  aspect-ratio:3/2;
}
.photo-item.tall{aspect-ratio:2/3;grid-row:span 2}
.photo-item.wide{grid-column:span 2;aspect-ratio:16/7}
.photo-item img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s ease;
}
.photo-item:hover img{transform:scale(1.03)}
.photo-caption{
  position:absolute;bottom:0;left:0;right:0;
  padding:8px 12px;
  background:linear-gradient(transparent,rgba(14,34,53,.6));
  font-size:10px;color:rgba(247,244,239,.7);
  letter-spacing:2px;font-family:var(--sans);
  text-transform:uppercase;
}

/* ===== BANNER ===== */
.banner{
  width:100%;padding:56px 24px;
  background:linear-gradient(135deg,var(--kon-deep),var(--kon));
  margin:48px 0;text-align:center;position:relative;overflow:hidden;
}
.banner::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(201,169,110,.025) 0px,rgba(201,169,110,.025) 1px,transparent 1px,transparent 34px);
  pointer-events:none;
}
.banner-text{
  color:var(--shoji);font-size:18px;letter-spacing:3px;
  font-weight:300;line-height:2.2;position:relative;
}
.banner-text em{font-style:normal;color:var(--gold);font-weight:400}

/* ===== FEATURES ===== */
.features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
  max-width:var(--content-w);margin:32px auto;padding:0 24px;
}
.feat{
  text-align:center;padding:24px 12px;
  border:.5px solid rgba(22,52,80,.06);background:rgba(22,52,80,.015);
}
.feat-icon{
  width:40px;height:40px;margin:0 auto 12px;
  border:.5px solid var(--kon-mid);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--kon-mid);opacity:.75;
}
.feat-label{font-size:13px;letter-spacing:2px;color:var(--kon-deep);margin-bottom:4px;font-weight:400}
.feat-desc{font-size:12px;color:var(--text-light);line-height:1.8;font-weight:300;font-family:var(--sans)}

/* ===== INFO CARD ===== */
.info-card{
  max-width:var(--content-w);margin:24px auto;
  padding:24px 28px;background:#fff;
  border:.5px solid rgba(22,52,80,.08);
}
.info-row{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:12px 0;border-bottom:.5px solid rgba(22,52,80,.05);
  font-size:14px;
}
.info-row:last-child{border:none}
.info-label{color:var(--text-light);font-family:var(--sans);font-size:12px;letter-spacing:1px}
.info-value{color:var(--kon-deep);font-weight:400}

/* ===== CTA ===== */
.cta-section{text-align:center;padding:56px 24px 24px}
.cta-button{
  display:inline-block;padding:15px 60px;
  background:var(--kon);color:var(--gold-pale);
  font-size:14px;letter-spacing:4px;font-family:var(--serif);
  transition:all .3s;border:none;cursor:pointer;
}
.cta-button:hover{background:var(--kon-mid)}
.cta-note{font-size:12px;color:var(--text-light);margin-top:10px;letter-spacing:1px;font-family:var(--sans)}

/* ===== FLOATING RESERVE BUTTON ===== */
.float-reserve{
  position:fixed;bottom:24px;right:24px;z-index:90;
  padding:12px 28px;background:var(--kon);color:var(--gold);
  font-size:12px;letter-spacing:2px;font-family:var(--sans);
  box-shadow:0 4px 20px rgba(14,34,53,.3);
  transition:all .3s;
}
.float-reserve:hover{background:var(--kon-mid);transform:translateY(-2px)}

/* ===== Q&A ===== */
.qa-item{
  max-width:var(--content-w);margin:0 auto;padding:0 24px;
}
.qa-question{
  padding:16px 0 8px;font-size:15px;font-weight:500;color:var(--kon-deep);
  letter-spacing:.5px;cursor:pointer;
  border-bottom:.5px solid rgba(22,52,80,.08);
  display:flex;align-items:baseline;gap:10px;
}
.qa-question::before{
  content:'Q.';font-family:var(--sans);font-size:12px;
  color:var(--gold);font-weight:500;letter-spacing:1px;flex-shrink:0;
}
.qa-answer{
  padding:12px 0 20px 28px;font-size:14px;line-height:2;
  color:var(--text-light);font-weight:300;
  border-bottom:.5px solid rgba(22,52,80,.05);
}

/* ===== CONTACT FORM ===== */
.form-group{max-width:var(--content-w);margin:0 auto;padding:0 24px}
.form-field{margin-bottom:20px}
.form-field label{
  display:block;font-family:var(--sans);font-size:12px;
  letter-spacing:1px;color:var(--text-light);margin-bottom:6px;
}
.form-field input,.form-field textarea,.form-field select{
  width:100%;padding:10px 14px;
  border:.5px solid rgba(22,52,80,.15);
  background:#fff;font-family:var(--sans);font-size:14px;
  color:var(--text);outline:none;
  transition:border-color .3s;
}
.form-field input:focus,.form-field textarea:focus{border-color:var(--kon-mid)}
.form-field textarea{min-height:120px;resize:vertical}
.form-submit{
  display:inline-block;padding:12px 48px;
  background:var(--kon);color:var(--gold-pale);
  font-size:13px;letter-spacing:3px;font-family:var(--serif);
  border:none;cursor:pointer;transition:all .3s;
}
.form-submit:hover{background:var(--kon-mid)}

/* ===== FOOTER ===== */
.site-footer{
  background:var(--kon-deep);color:rgba(247,244,239,.55);
  text-align:center;padding:48px 24px 28px;margin-top:56px;
}
.footer-logo{font-size:20px;color:var(--gold-pale);letter-spacing:8px;margin-bottom:8px;font-weight:400}
.footer-addr{font-size:12px;letter-spacing:1.5px;margin-bottom:18px;font-family:var(--sans)}
.footer-sns{display:flex;gap:24px;justify-content:center;margin-bottom:20px}
.footer-sns a{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(201,169,110,.4);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:rgba(247,244,239,.7);
  font-family:var(--sans);letter-spacing:0;
  transition:all .3s;
}
.footer-sns a:hover{border-color:var(--gold);color:var(--gold);background:rgba(201,169,110,.1)}
.footer-sns a svg{width:18px;height:18px;fill:currentColor}
.footer-copy{font-size:10px;letter-spacing:2px;opacity:.6;margin-top:16px}

/* ===== UTILITIES ===== */
.mt-0{margin-top:0}.mt-1{margin-top:16px}.mt-2{margin-top:32px}.mt-3{margin-top:48px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:16px}.mb-2{margin-bottom:32px}
.text-center{text-align:center}
.text-gold{color:var(--gold)}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .header-inner{padding:12px 16px}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:center;gap:0;
    background:rgba(14,34,53,.97);padding:16px 0;
    backdrop-filter:blur(8px);
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:10px 0;font-size:12px}
  .nav-toggle{display:block}
  .hero{min-height:500px}
  .hero-title{font-size:22px}
  .hero-title em{font-size:32px;letter-spacing:8px}
  .section{padding:0 16px}
  .section-title{font-size:18px}
  .features{grid-template-columns:1fr;gap:12px}
  .photo-grid{padding:0 16px}
  .photo-grid.g-3{grid-template-columns:1fr}
  .photo-grid.g-3 .photo-item.tall{aspect-ratio:3/2;grid-row:auto}
  .float-reserve{bottom:16px;right:16px;padding:10px 20px;font-size:11px}
  .page-hero{height:280px}
  .lang-switch{top:auto;bottom:100%;right:0;margin-bottom:4px}
}

/* ===== LANGUAGE SWITCHER ===== */
.lang-switch{
  display:flex;gap:4px;align-items:center;
  font-family:var(--sans);font-size:10px;letter-spacing:.5px;
  margin-left:16px;
}
.lang-switch a{
  color:rgba(247,244,239,.6);padding:3px 6px;
  border:1px solid rgba(247,244,239,.15);border-radius:2px;
  transition:all .3s;white-space:nowrap;
}
.lang-switch a:hover{color:var(--gold-light);border-color:var(--gold-light)}
.lang-switch a.active{color:var(--gold);border-color:rgba(201,169,110,.5)}