/* ===================================================
   Peaceful Summit Mist — Shared Stylesheet
   Peaceful Summit Mist Co., Ltd. © 2026
   =================================================== */

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&display=swap');

:root {
  --bg-cream:      #f8f6f2;
  --bg-light:      #f2f0ec;
  --bg-mist:       #eaecee;
  --text-dark:     #2c3338;
  --text-mid:      #5a6370;
  --text-light:    #8a9299;
  --green-deep:    #3d6b50;
  --green-mid:     #5a8a6a;
  --green-soft:    #7aaa8a;
  --green-light:   #e8f0eb;
  --mist-gray:     #8a9299;
  --mist-light:    #d4d8de;
  --mist-pale:     #eaecee;
  --sunrise:       #c9896e;
  --sunrise-soft:  #dba990;
  --sunrise-light: #f5d0b5;
  --cream-warm:    #f0ebe3;
  --white:         #ffffff;
  --shadow-soft:   0 2px 20px rgba(44,51,56,.06);
  --shadow-med:    0 4px 30px rgba(44,51,56,.10);
  --shadow-deep:   0 8px 48px rgba(44,51,56,.14);
  --radius:        6px;
  --radius-lg:     16px;
  --transition:    all 0.35s ease;
  --max-w:         1200px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  font-family:'Shippori Mincho','Noto Serif JP',serif;
  background-color:var(--bg-cream);
  color:var(--text-dark);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; transition:var(--transition); }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; }
input,textarea,select { font-family:inherit; }

h1,h2,h3,h4,h5,h6 {
  font-family:'Shippori Mincho',serif;
  font-weight:600; line-height:1.4; letter-spacing:.04em;
}
.en { font-family:'Cormorant Garamond',serif; }

.container { max-width:var(--max-w); margin:0 auto; padding:0 28px; }
.section    { padding:88px 0; }
.section-sm { padding:52px 0; }

.section-header { text-align:center; margin-bottom:60px; }
.section-label {
  display:inline-block;
  font-family:'Cormorant Garamond',serif;
  font-size:.82rem; letter-spacing:.25em; text-transform:uppercase;
  color:var(--green-mid); margin-bottom:12px;
}
.section-title { font-size:clamp(1.7rem,4vw,2.7rem); color:var(--text-dark); margin-bottom:14px; }
.section-subtitle { font-size:.97rem; color:var(--text-mid); max-width:580px; margin:0 auto; line-height:1.95; }

/* ===== NAV ===== */
.site-nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(248,246,242,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--mist-pale);
  transition:var(--transition);
}
.site-nav.scrolled { box-shadow:var(--shadow-soft); }
.nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:72px; max-width:var(--max-w); margin:0 auto; padding:0 28px;
}
.nav-logo { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-logo-text { display:flex; flex-direction:column; line-height:1.2; }
.nav-logo-ja { font-size:.64rem; color:var(--text-light); letter-spacing:.12em; }
.nav-logo-en {
  font-family:'Cormorant Garamond',serif;
  font-size:1.06rem; font-weight:500;
  color:var(--text-dark); letter-spacing:.06em;
}
.nav-links { display:flex; align-items:center; gap:26px; }
.nav-links > li { position:relative; }
.nav-links a {
  font-size:.87rem; color:var(--text-mid);
  padding:6px 0; border-bottom:1.5px solid transparent;
  letter-spacing:.04em; white-space:nowrap;
}
.nav-links a:hover,.nav-links a.active { color:var(--green-deep); border-bottom-color:var(--green-deep); }
.has-drop { position:relative; }
.nav-drop {
  position:absolute; top:calc(100% + 10px); left:50%;
  transform:translateX(-50%);
  background:var(--white); border:1px solid var(--mist-pale);
  border-radius:var(--radius); padding:6px 0; min-width:130px;
  box-shadow:var(--shadow-med);
  opacity:0; pointer-events:none; transition:opacity .25s ease,top .25s ease;
}
.has-drop:hover .nav-drop { opacity:1; pointer-events:all; top:calc(100% + 4px); }
.nav-drop li a { display:block; padding:8px 18px; font-size:.83rem; border-bottom:none; }
.nav-drop li a:hover { background:var(--green-light); color:var(--green-deep); }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; padding:4px; }
.nav-toggle span { display:block; width:24px; height:2px; background:var(--text-dark); border-radius:2px; transition:var(--transition); }
.nav-toggle.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* ===== FOOTER ===== */
.site-footer { background:var(--text-dark); color:rgba(255,255,255,.65); padding-top:72px; }
.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1.6fr; gap:48px;
  max-width:var(--max-w); margin:0 auto; padding:0 28px 56px;
}
.footer-brand-name { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--white); margin:14px 0 8px; letter-spacing:.06em; }
.footer-brand p { font-size:.82rem; line-height:1.85; color:rgba(255,255,255,.45); }
.footer-col h4 { font-size:.8rem; color:var(--white); letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1); }
.footer-col ul li { margin-bottom:8px; }
.footer-col ul li a { font-size:.82rem; color:rgba(255,255,255,.45); }
.footer-col ul li a:hover { color:var(--sunrise-light); }
.footer-contact-row { display:flex; gap:10px; font-size:.82rem; color:rgba(255,255,255,.45); margin-bottom:10px; align-items:flex-start; }
.footer-contact-row svg { flex-shrink:0; margin-top:3px; }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08); padding:20px 28px;
  max-width:var(--max-w); margin:0 auto;
  display:flex; justify-content:space-between; align-items:center;
}
.footer-bottom p { font-size:.72rem; color:rgba(255,255,255,.28); font-family:'Cormorant Garamond',serif; letter-spacing:.06em; }

/* ===== BUTTONS ===== */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 28px; border-radius:var(--radius);
  font-size:.9rem; letter-spacing:.05em;
  transition:var(--transition); border:none; outline:none;
}
.btn-primary { background:var(--green-deep); color:var(--white); }
.btn-primary:hover { background:var(--green-mid); transform:translateY(-2px); box-shadow:0 6px 20px rgba(61,107,80,.3); }
.btn-outline { background:transparent; color:var(--green-deep); border:1.5px solid var(--green-deep); }
.btn-outline:hover { background:var(--green-light); }
.btn-ghost { background:rgba(255,255,255,.12); color:var(--white); border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(4px); }
.btn-ghost:hover { background:rgba(255,255,255,.22); transform:translateY(-2px); }
.btn-sunrise { background:var(--sunrise); color:var(--white); }
.btn-sunrise:hover { background:var(--sunrise-soft); transform:translateY(-2px); }

/* ===== CARDS ===== */
.card { background:var(--white); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft); transition:var(--transition); }
.card:hover { transform:translateY(-5px); box-shadow:var(--shadow-med); }
.card-img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.card-img-wide { aspect-ratio:16/9; }
.card-body { padding:24px 28px; }
.card-tag { font-size:.72rem; color:var(--green-mid); letter-spacing:.18em; text-transform:uppercase; font-family:'Cormorant Garamond',serif; margin-bottom:8px; }
.card-title { font-size:1.06rem; color:var(--text-dark); margin-bottom:8px; line-height:1.5; }
.card-text { font-size:.88rem; color:var(--text-mid); line-height:1.85; }
.card-date { font-size:.74rem; color:var(--text-light); margin-top:14px; font-family:'Cormorant Garamond',serif; }

/* ===== GRIDS ===== */
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:36px; }
.grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:48px; align-items:center; }
.grid-1-2 { display:grid; grid-template-columns:1fr 2fr; gap:48px; align-items:center; }

/* ===== PAGE HERO ===== */
.page-hero {
  padding:148px 0 84px; text-align:center;
  background:linear-gradient(180deg,var(--green-light) 0%,var(--bg-cream) 100%);
  position:relative; overflow:hidden;
}
.page-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:90px;
  background:var(--bg-cream); clip-path:ellipse(65% 100% at 50% 100%);
}
.page-hero-label { font-family:'Cormorant Garamond',serif; font-size:.82rem; letter-spacing:.3em; text-transform:uppercase; color:var(--green-mid); margin-bottom:14px; }
.page-hero-title { font-size:clamp(1.9rem,5vw,3.2rem); color:var(--text-dark); margin-bottom:18px; position:relative; z-index:1; }
.page-hero-text { font-size:.97rem; color:var(--text-mid); max-width:580px; margin:0 auto; line-height:1.95; position:relative; z-index:1; }

/* ===== TOAST ===== */
.toast-wrap { position:fixed; bottom:28px; right:28px; z-index:9999; display:flex; flex-direction:column; gap:12px; pointer-events:none; }
.toast {
  background:var(--white); border-left:4px solid var(--green-deep);
  border-radius:var(--radius); padding:14px 20px;
  box-shadow:var(--shadow-deep); font-size:.88rem; color:var(--text-dark);
  max-width:320px; pointer-events:all;
  display:flex; align-items:center; gap:12px;
  animation:toastIn .35s ease forwards;
}
.toast.hiding { animation:toastOut .35s ease forwards; }
.toast.error { border-left-color:var(--sunrise); }
@keyframes toastIn  { from{transform:translateX(120%);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes toastOut { from{transform:translateX(0);opacity:1} to{transform:translateX(120%);opacity:0} }

/* ===== DECORATIVE ===== */
.divider   { width:56px; height:2px; background:var(--green-mid); margin:0 auto; }
.divider-l { margin:0; }
.mist-sep  { width:100%; height:1px; background:linear-gradient(90deg,transparent,var(--mist-light),transparent); margin:56px 0; }
.text-center { text-align:center; }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-40{margin-top:40px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}.mb-32{margin-bottom:32px}

.breadcrumb { display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--text-light); margin-bottom:36px; }
.breadcrumb a { color:var(--text-light); }
.breadcrumb a:hover { color:var(--green-deep); }
.breadcrumb-sep { color:var(--mist-gray); }

.quote-block { border-left:3px solid var(--green-mid); padding:20px 28px; background:var(--green-light); border-radius:0 var(--radius) var(--radius) 0; margin:32px 0; }
.quote-block p { font-family:'Cormorant Garamond',serif; font-size:1.22rem; font-style:italic; color:var(--green-deep); line-height:1.75; }
.quote-block cite { font-size:.78rem; color:var(--text-mid); margin-top:8px; display:block; }

.tag-pill { display:inline-block; padding:4px 12px; border-radius:99px; background:var(--green-light); color:var(--green-deep); font-size:.74rem; letter-spacing:.08em; margin:4px; transition:var(--transition); }
.tag-pill:hover { background:var(--green-deep); color:var(--white); }

.fig-caption { font-size:.77rem; color:var(--text-light); text-align:center; margin-top:10px; font-family:'Cormorant Garamond',serif; letter-spacing:.06em; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .section { padding:64px 0; }
  .grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .grid-2-1 { grid-template-columns:1fr; }
  .grid-1-2 { grid-template-columns:1fr; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .nav-links {
    display:none; position:fixed;
    top:72px; left:0; right:0; bottom:0;
    background:var(--bg-cream);
    flex-direction:column; align-items:center; justify-content:center;
    gap:20px; z-index:190; overflow-y:auto;
  }
  .nav-links.open { display:flex; }
  .nav-links a { font-size:1.1rem; }
  .nav-toggle { display:flex; }
  .nav-drop { position:static; transform:none; box-shadow:none; border:none; background:var(--green-light); opacity:1; pointer-events:all; display:none; border-radius:var(--radius); }
  .has-drop.open .nav-drop { display:block; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { flex-direction:column; gap:6px; text-align:center; }
  .page-hero { padding:120px 0 60px; }
}
@media (max-width:480px) {
  .container { padding:0 18px; }
  .grid-4 { grid-template-columns:1fr; }
  .btn { padding:11px 22px; font-size:.85rem; }
}