/* =============================================
   山口デジタルエージェント — 共通スタイル（2026-04-17 リビルド）
   全HPページで読み込む。ページ固有のCSSは各HTMLに残す。
   デザインパターンI（洗練 × 信頼 × 親しみ）
   ============================================= */

/* === RESET === */
*{margin:0;padding:0;box-sizing:border-box}

/* === DESIGN TOKENS === */
:root{
  /* ------- COLOR（R-039 ベース70 / メイン25 / アクセント5）------- */
  /* ベース 70% */
  --cream:     #fafaf7;
  --beige:     #f5f5f2;

  /* メイン 25% */
  --ink:       #1a1a1a;
  --mid-gray:  #737373;
  --sub-gray:  #a3a3a3;
  --gray-200:  #e5e5e5;
  --gray-100:  #f5f5f5;
  --white:     #ffffff;

  /* アクセント 5% */
  --green:     #22c55e;
  --green-dark:#16a34a;
  --green-soft:rgba(34,197,94,.08);

  /* ------- 余白トークン 8段階 ------- */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 48px;
  --s-6: 64px;
  --s-7: 96px;
  --s-8: 128px;

  /* ------- フォントサイズトークン 10段階 ------- */
  --t-1: 12px;
  --t-2: 14px;
  --t-3: 16px;
  --t-4: 18px;
  --t-5: 20px;
  --t-6: 24px;
  --t-7: 32px;
  --t-8: 48px;
  --t-9: 64px;
  --t-10: 80px;

  /* ------- 角丸 4段階 ------- */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 24px;

  /* ------- タイポグラフィ ------- */
  --font-heading: 'Noto Serif JP', 'Shippori Mincho', serif;
  --font-body:    'Noto Sans JP', system-ui, sans-serif;
  --font-number:  'Inter', system-ui, sans-serif;
}

/* === BASE === */
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";
  overflow-x:hidden;
  width:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink)}

/* === NAV === */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  border-bottom:1px solid var(--gray-200);
  background:rgba(250,250,247,.88);
  backdrop-filter:blur(16px);
}
.nav-inner{
  max-width:1200px;margin:0 auto;
  padding:0 var(--s-4);height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.logo{
  font-family:var(--font-heading);
  font-size:var(--t-3);font-weight:700;
  letter-spacing:.01em;color:var(--ink);text-decoration:none;
}
.logo span{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:var(--s-1)}
.nav-links a{
  font-size:var(--t-2);color:var(--mid-gray);
  text-decoration:none;font-weight:500;
  padding:6px 14px;border-radius:var(--r-1);
  transition:color .15s,background .15s;
}
.nav-links a:hover,.nav-links a.active{color:var(--ink);background:var(--beige);font-weight:600}
.nav-cta{
  background:var(--ink)!important;color:var(--white)!important;
  padding:9px 20px!important;border-radius:var(--r-1)!important;
  font-weight:700!important;transition:background .15s!important;
}
.nav-cta:hover{background:#2a2a2a!important}

/* === HAMBURGER === */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px;z-index:201}
.hamburger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .3s,opacity .3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* === MOBILE MENU === */
.mobile-menu{display:none;position:fixed;inset:0;z-index:200;background:var(--cream);padding:100px var(--s-4) var(--s-5);flex-direction:column;gap:4px;overflow-y:auto}
.mobile-menu.open{display:flex}
.mobile-menu-close{position:absolute;top:24px;right:24px;background:none;border:none;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center}
.mobile-menu-close::before,.mobile-menu-close::after{content:'';position:absolute;width:24px;height:2px;background:var(--ink);border-radius:2px}
.mobile-menu-close::before{transform:rotate(45deg)}
.mobile-menu-close::after{transform:rotate(-45deg)}
.mobile-menu a{font-size:var(--t-5);font-weight:600;color:var(--ink);text-decoration:none;padding:var(--s-2) 0;border-bottom:1px solid var(--gray-200);transition:color .15s;position:relative;z-index:1}
.mobile-menu a:hover{color:var(--green)}
.mobile-menu .mobile-cta{display:block;text-align:center;background:var(--ink);color:var(--white);padding:18px;border-radius:var(--r-2);font-size:var(--t-3);font-weight:700;margin-top:var(--s-3);border-bottom:none}

/* === PAGE HERO (サブページ共通) === */
.page-hero{
  padding:clamp(120px,16vh,180px) clamp(24px,5vw,80px) clamp(56px,8vh,96px);
  background:var(--cream);
  border-bottom:1px solid var(--gray-200);
}
.page-hero-inner{max-width:1200px;margin:0 auto}
.section-tag{
  font-family:var(--font-number);
  font-size:var(--t-1);font-weight:600;color:var(--green);
  letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:var(--s-3);display:inline-flex;align-items:center;gap:var(--s-1);
}
.section-tag::before{content:'';width:24px;height:1px;background:var(--green)}
.page-hero h1{
  font-family:var(--font-heading);
  font-size:clamp(36px,5.2vw,64px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
  margin-bottom:var(--s-3);line-height:1.25;
}
.page-hero p{
  font-size:var(--t-4);color:var(--mid-gray);
  max-width:640px;line-height:1.9;
  text-align:left;
}

/* === 共通コンポーネント === */
.section-title{
  font-family:var(--font-heading);
  font-size:clamp(28px,3.6vw,40px);font-weight:700;
  letter-spacing:-.01em;color:var(--ink);
  margin-bottom:var(--s-5);line-height:1.4;
}
.section-lead{
  font-size:var(--t-3);color:var(--mid-gray);
  max-width:720px;line-height:1.9;
  margin-bottom:var(--s-5);
}

/* === BUTTONS === */
.btn-primary{
  display:inline-block;background:var(--ink);color:var(--white);
  padding:16px 36px;border-radius:999px;
  font-size:var(--t-3);font-weight:700;text-decoration:none;
  transition:background .15s,transform .1s;
}
.btn-primary:hover{background:var(--green-dark);transform:translateY(-1px)}

.btn-accent{
  display:inline-block;background:var(--green);color:var(--white);
  padding:16px 36px;border-radius:999px;
  font-size:var(--t-3);font-weight:700;text-decoration:none;
  transition:background .15s,transform .1s;
}
.btn-accent:hover{background:var(--green-dark);transform:translateY(-1px)}

.btn-secondary{
  display:inline-block;padding:15px 34px;border-radius:999px;
  font-size:var(--t-3);font-weight:600;text-decoration:none;
  border:1.5px solid var(--gray-200);color:var(--ink);
  background:var(--white);transition:border-color .15s,background .15s;
}
.btn-secondary:hover{border-color:var(--ink);background:var(--beige)}

/* === CTA SECTION （全ページ共通フッターCTA）=== */
.cta-section{
  background:var(--ink);
  padding:clamp(72px,12vh,128px) clamp(24px,5vw,80px);
  text-align:center;position:relative;overflow:hidden;
}
.cta-section::before{
  content:'';position:absolute;
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(34,197,94,.06),transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;
}
.cta-inner{max-width:720px;margin:0 auto;position:relative;z-index:1}
.cta-title{
  font-family:var(--font-heading);
  font-size:clamp(26px,3.6vw,40px);font-weight:700;
  letter-spacing:-.01em;color:var(--white);
  margin-bottom:var(--s-3);line-height:1.4;
}
.cta-title span{color:var(--green);white-space:nowrap}
.cta-desc{
  font-size:var(--t-3);color:rgba(255,255,255,.55);
  margin-bottom:var(--s-5);line-height:1.9;
  text-align:center;max-width:560px;margin-left:auto;margin-right:auto;
}
.cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.cta-actions .btn-primary{background:var(--green);color:var(--white)}
.cta-actions .btn-primary:hover{background:#4ade80}
.cta-actions .btn-secondary{border-color:rgba(255,255,255,.2);color:var(--white);background:transparent}
.cta-actions .btn-secondary:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.05)}
.cta-bullets{
  list-style:none;display:flex;flex-direction:column;gap:10px;
  max-width:480px;margin:0 auto var(--s-5);text-align:left;
}
.cta-bullets li{
  font-size:var(--t-2);color:rgba(255,255,255,.75);
  padding-left:24px;position:relative;line-height:1.7;
}
.cta-bullets li::before{
  content:'';position:absolute;left:0;top:9px;
  width:14px;height:14px;border-radius:50%;background:var(--green);
  box-shadow:inset 0 0 0 3px var(--ink);
}

/* === FOOTER === */
footer{
  background:var(--ink);
  border-top:1px solid #2a2a2a;
  padding:var(--s-6) clamp(24px,5vw,80px) var(--s-5);
}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-5)}
.footer-brand .logo{font-family:var(--font-heading);font-size:var(--t-4);font-weight:700;color:var(--white)}
.footer-brand .logo span{color:var(--green)}
.footer-tagline{font-size:var(--t-1);color:#666;margin-top:14px;line-height:1.8}
.footer-col-title{font-size:var(--t-1);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#888;margin-bottom:var(--s-3)}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-links a{font-size:var(--t-2);color:#888;text-decoration:none;transition:color .15s}
.footer-links a:hover{color:var(--white)}
.footer-bottom{max-width:1200px;margin:var(--s-6) auto 0;padding-top:var(--s-4);border-top:1px solid #2a2a2a;display:flex;justify-content:space-between;align-items:center}
.footer-copy{font-size:var(--t-1);color:#555}

/* === SCROLL REVEAL === */
.reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.reveal-left{opacity:0;transform:translateX(-48px);transition:opacity .7s ease,transform .7s ease}
.reveal-right{opacity:0;transform:translateX(48px);transition:opacity .7s ease,transform .7s ease}
.reveal-scale{opacity:0;transform:scale(.96);transition:opacity .7s ease,transform .7s ease}
.reveal.visible,.reveal-left.visible,.reveal-right.visible,.reveal-scale.visible{opacity:1;transform:none}

/* === FAQ === */
.faq-section{padding:clamp(72px,12vh,128px) clamp(24px,5vw,80px);background:var(--beige);border-top:1px solid var(--gray-200)}
.faq-inner{max-width:880px;margin:0 auto}
.faq-item{border-bottom:1px solid var(--gray-200);padding:24px 0;cursor:pointer}
.faq-q{font-size:var(--t-4);font-weight:700;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q-mark{font-family:var(--font-heading);color:var(--green);font-weight:800;font-size:var(--t-4);flex-shrink:0;margin-right:10px}
.faq-q::after{content:'+';font-size:var(--t-6);color:var(--sub-gray);font-weight:300;transition:transform .3s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease,padding .3s ease}
.faq-item.open .faq-a{max-height:600px;padding-top:14px}
.faq-a p,.faq-a{font-size:var(--t-3);color:var(--mid-gray);line-height:1.9;padding-left:32px}

/* === GRAIN TEXTURE === */
body::after{
  content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;background-size:256px 256px;
}

/* === MEDIA QUERIES === */
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:block}
  .footer-inner{grid-template-columns:1fr;gap:var(--s-4)}
  .footer-bottom{flex-direction:column;gap:var(--s-1);text-align:center}
  .cta-actions{flex-direction:column;align-items:center}
  .cta-actions a{width:100%;max-width:320px;text-align:center}
}