/* ═══════════════════════════════════════════
   REJOYCE® BALLOON — Shared Stylesheet
═══════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;600&display=swap');

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
:root {
  --tb:    #A8DADC;
  --tb-md: #78C3C6;
  --tb-dk: #4EA8AB;
  --tb-dp: #348C8F;
  --tb-lt: #C8ECEE;
  --tb-pl: #E3F5F6;
  --tb-bg: #EEF8F9;
  --white: #FFFFFF;
  --offwh: #F7FCFC;
  --text:  #282828;
  --textm: #585858;
  --textl: #9A9A9A;
  --max:   1160px;
}
html { scroll-behavior:smooth; }
body { font-family:'Noto Sans JP',sans-serif; font-size:15px; line-height:1.8; color:var(--text); background:var(--white); -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--tb-dk); text-decoration:none; }

/* ── LAYOUT ── */
.wrap { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:28px; }
section { padding-block:100px; }

/* ── ANIMATIONS ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in { opacity:1; transform:translateY(0); }
.d1 { transition-delay:.10s; }
.d2 { transition-delay:.22s; }
.d3 { transition-delay:.34s; }
.d4 { transition-delay:.46s; }
@keyframes sline { 0%,100%{opacity:.3;transform:scaleY(.5)} 50%{opacity:1;transform:scaleY(1)} }
@keyframes fadein { from{opacity:0} to{opacity:1} }

/* ── GLASS ── */
.glass { background:rgba(255,255,255,.62); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(168,218,220,.3); }

/* ── TYPOGRAPHY ── */
.en  { font-family:'Cormorant Garamond',serif; font-size:11px; letter-spacing:.54em; color:var(--tb-md); text-transform:uppercase; display:block; }
.sec-h { font-family:'Noto Serif JP',serif; font-size:clamp(22px,4.5vw,34px); font-weight:400; line-height:1.65; margin-bottom:12px; }
.sec-lead { color:var(--textm); font-size:14px; max-width:500px; line-height:2.1; }
.rule { width:32px; height:1px; background:var(--tb-lt); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:15px 38px; border-radius:50px; font-size:13px; font-weight:600; letter-spacing:.06em; cursor:pointer; text-decoration:none; border:none; transition:transform .25s, box-shadow .25s, background .25s; line-height:1; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--tb-dp); color:var(--white); box-shadow:0 6px 22px rgba(52,140,143,.26); }
.btn-primary:hover { box-shadow:0 12px 34px rgba(52,140,143,.36); }
.btn-outline { background:transparent; color:var(--tb-dp); border:1.5px solid var(--tb-md); }
.btn-outline:hover { background:var(--tb-pl); }
.btn-white { background:var(--white); color:var(--tb-dp); box-shadow:0 4px 16px rgba(0,0,0,.09); }
.btn-ghost { background:rgba(255,255,255,.16); color:var(--white); border:1.5px solid rgba(255,255,255,.48); backdrop-filter:blur(8px); }
.btn-ghost:hover { background:rgba(255,255,255,.28); }
.btn-text { background:none; border:none; color:var(--tb-dp); font-size:12px; letter-spacing:.08em; font-weight:600; padding:0; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-family:'Cormorant Garamond',serif; font-size:13px; }
.btn-text::after { content:'→'; transition:transform .2s; }
.btn-text:hover::after { transform:translateX(5px); }
.btn-text:hover { transform:none; opacity:.8; }

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
.nav { position:sticky; top:0; z-index:200; background:rgba(255,255,255,.93); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(168,218,220,.15); }
.nav-inner { max-width:var(--max); margin-inline:auto; padding-inline:24px; height:60px; display:flex; align-items:center; gap:8px; }
.nav-brand { font-family:'Cormorant Garamond',serif; font-size:16px; font-style:italic; color:var(--tb-dp); letter-spacing:.08em; flex-shrink:0; margin-right:auto; }
.nav-links { display:none; list-style:none; gap:18px; align-items:center; }
.nav-links a { font-family:'Cormorant Garamond',serif; font-size:13px; letter-spacing:.06em; color:var(--textm); transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--tb-dp); }
.nav-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.nav-ig { color:var(--textl); display:flex; align-items:center; transition:color .2s; line-height:0; }
.nav-ig:hover { color:var(--tb-dp); }
.nav-res { padding:9px 18px; font-size:12px; letter-spacing:.05em; gap:5px; }
@media(min-width:860px){ .nav-links { display:flex; } }

/* ══════════════════════════════════════
   PAGE HERO (sub-pages)
══════════════════════════════════════ */
.page-hero { padding-block:110px 80px; text-align:center; background:var(--tb-bg); position:relative; overflow:hidden; }
.page-hero::after { content:''; position:absolute; inset:0; background:linear-gradient(145deg,var(--tb-bg) 0%,var(--tb-pl) 100%); pointer-events:none; }
.page-hero-inner { position:relative; z-index:1; max-width:680px; margin-inline:auto; padding-inline:28px; }
.page-hero .en { margin-bottom:20px; }
.page-hero-h { font-family:'Noto Serif JP',serif; font-size:clamp(24px,5vw,40px); font-weight:300; line-height:1.65; color:var(--text); margin-bottom:16px; }
.page-hero-sub { font-size:14px; color:var(--textm); line-height:2.1; max-width:440px; margin-inline:auto; }

/* ══════════════════════════════════════
   CONTACT FORM (shared)
══════════════════════════════════════ */
.contact-section { position:relative; background:linear-gradient(148deg,var(--tb-bg) 0%,var(--tb-pl) 55%,var(--tb-lt) 100%); padding-block:120px; overflow:hidden; }
.contact-section::before { content:''; position:absolute; border-radius:50%; border:1px solid rgba(168,218,220,.2); top:50%; left:50%; transform:translate(-50%,-50%); width:600px; height:600px; pointer-events:none; }
.contact-inner { position:relative; z-index:1; max-width:580px; margin-inline:auto; padding-inline:28px; }
.contact-head { text-align:center; margin-bottom:52px; }
.contact-h { font-family:'Noto Serif JP',serif; font-size:clamp(22px,4vw,30px); font-weight:400; line-height:1.7; margin-bottom:14px; }
.contact-lead { font-size:13px; color:var(--textm); line-height:2.1; }
.contact-form { background:rgba(255,255,255,.82); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid rgba(168,218,220,.26); border-radius:24px; padding:44px 34px; display:flex; flex-direction:column; gap:24px; }
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-label { font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--tb-dp); display:flex; align-items:center; gap:6px; }
.form-req { font-size:10px; background:var(--tb-pl); color:var(--tb-dp); border-radius:3px; padding:1px 6px; }
.form-input, .form-select, .form-textarea { width:100%; padding:13px 16px; border:1.5px solid rgba(168,218,220,.45); border-radius:10px; font-size:14px; font-family:inherit; color:var(--text); background:rgba(255,255,255,.9); transition:border .2s, box-shadow .2s; outline:none; -webkit-appearance:none; appearance:none; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color:var(--tb-dk); box-shadow:0 0 0 3px rgba(168,218,220,.18); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--textl); font-size:13px; }
.form-textarea { resize:vertical; min-height:120px; line-height:1.8; }
.form-select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%234EA8AB' d='M5 6L0 0h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; cursor:pointer; }
.form-submit .btn { width:100%; padding:17px; font-size:14px; }
.form-note { font-size:11px; color:var(--textl); text-align:center; margin-top:14px; line-height:1.9; }
.form-note a { color:var(--tb-dp); text-decoration:underline; text-underline-offset:2px; }

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer { background:var(--tb-dp); padding-block:60px 36px; }
.footer-grid { display:grid; grid-template-columns:1fr; gap:36px; margin-bottom:40px; }
.foot-brand { font-family:'Cormorant Garamond',serif; font-size:21px; font-style:italic; color:var(--white); letter-spacing:.1em; }
.foot-tagline { font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.38); margin-top:5px; }
.foot-desc { font-size:12px; color:rgba(255,255,255,.48); line-height:1.9; margin-top:12px; }
.foot-col h4 { font-family:'Cormorant Garamond',serif; font-size:11px; letter-spacing:.22em; color:rgba(255,255,255,.85); margin-bottom:14px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1); text-transform:uppercase; }
.foot-col ul { list-style:none; display:flex; flex-direction:column; gap:9px; }
.foot-col a { font-size:12px; color:rgba(255,255,255,.5); transition:color .2s; }
.foot-col a:hover { color:var(--white); }
.foot-bottom { padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:6px; justify-content:space-between; align-items:center; }
.foot-bottom p { font-size:10px; color:rgba(255,255,255,.26); }
.foot-ig { color:rgba(255,255,255,.4); display:inline-flex; align-items:center; transition:color .2s; }
.foot-ig:hover { color:var(--white); }
@media(min-width:640px){ .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; } }

/* ══════════════════════════════════════
   FAQ ACCORDION (shared)
══════════════════════════════════════ */
.faq-list { max-width:740px; margin-inline:auto; display:flex; flex-direction:column; gap:10px; }
.faq-item { background:var(--white); border:1px solid rgba(168,218,220,.18); border-radius:16px; overflow:hidden; }
.faq-q { width:100%; background:none; border:none; padding:20px 22px; text-align:left; cursor:pointer; display:flex; align-items:flex-start; gap:13px; font-size:14px; font-weight:600; color:var(--text); line-height:1.65; transition:background .2s; font-family:inherit; }
.faq-q:hover { background:var(--tb-bg); }
.faq-qball { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--tb-pl); border:1px solid var(--tb-lt); color:var(--tb-dp); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.faq-icon { margin-left:auto; flex-shrink:0; width:20px; height:20px; border:1.5px solid var(--tb-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; color:var(--tb-dk); transition:transform .3s; margin-top:3px; }
.faq-a { max-height:0; overflow:hidden; transition:max-height .36s ease; }
.faq-a-inner { padding:0 22px 22px 61px; font-size:14px; color:var(--textm); line-height:1.95; }
.faq-item.open .faq-a { max-height:400px; }
.faq-item.open .faq-icon { transform:rotate(45deg); }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media(max-width:480px){
  section { padding-block:70px; }
  .btn { padding:14px 28px; font-size:12px; }
  .contact-form { padding:28px 20px; }
  .faq-a-inner { padding-left:40px; }
}

/* ══════════════════════════════════════
   SHARED REVEAL SCRIPT HELPER
══════════════════════════════════════ */
/* (IntersectionObserver is inlined in each page's <script>) */