/* ============================================================
   1. ベース変数・リセット
   ============================================================ */
:root{
  --bg-base:      #FAF6F0;
  --bg-soft:      #F0E8DC;
  --bg-card:      #FFFFFF;
  --border-soft:  #E3D9C8;

  --text-main:    #2B2622;
  --text-sub:     #6B6258;

  --key-blue:      #1F3A52;
  --key-blue-soft: #E7EDF1;

  --secondary-green: #3F4A3C;
  --secondary-green-deep: #2E362B;

  --font-mincho: 'Zen Old Mincho', 'EB Garamond', serif;
  --font-sans:   'Noto Sans JP', sans-serif;

  --radius-s: 2px;
  --transition: 0.25s ease;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background:var(--bg-base);
  color:var(--text-main);
  font-family:var(--font-sans);
  line-height:1.8;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }

h1,h2,h3{
  font-family:var(--font-mincho);
  font-weight:600;
  line-height:1.4;
  margin:0 0 .6em;
  color:var(--text-main);
}
h1{ font-size:2.6rem; font-weight:900; }
h2{ font-size:1.9rem; }
h3{ font-size:1.25rem; }
p{ margin:0 0 1em; color:var(--text-sub); }

.container{ max-width:1120px; margin:0 auto; padding:0 24px; }
.section{ padding:96px 0; }
.section--soft{ background:var(--bg-soft); }

/* ============================================================
   濃色セクション（ブルー背景／パートナー案内・お問い合わせ用）
   ============================================================ */
.section--blue{
  background:var(--key-blue);
  color:#F5F1E8;
}
.section--blue h1,
.section--blue h2,
.section--blue h3,
.section--blue p{
  color:#F5F1E8;
}
.section--blue .eyebrow{
  color:#F5F1E8;
  border-left-color:#F5F1E8;
}

.eyebrow{
  display:block;
  font-family:var(--font-mincho);
  font-size:.85rem;
  letter-spacing:.15em;
  color:var(--key-blue);
  margin-bottom:.8em;
  border-left:3px solid var(--key-blue);
  padding-left:.6em;
}

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:16px 32px; font-size:.95rem; font-weight:700;
  border-radius:var(--radius-s);
  transition:background var(--transition), color var(--transition), border-color var(--transition);
  white-space:nowrap;
}
.btn--primary{ background:var(--key-blue); color:#fff; }
.btn--primary:hover{ background:#152a3b; }
.btn--outline{ background:transparent; border:1px solid var(--secondary-green); color:var(--secondary-green); }
.btn--outline:hover{ background:var(--secondary-green); color:#fff; }

.btn--on-blue{ background:#fff; color:var(--key-blue); }
.btn--on-blue:hover{ background:var(--key-blue-soft); }

/* ============================================================
   2. ヘッダー・ナビゲーション
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(250,246,240,0.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border-soft);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  height:64px;
  padding:0 24px;
}
@media (min-width:640px){
  .header-inner{ padding:0 32px; }
}
@media (min-width:1400px){
  .header-inner{ padding:0 48px; }
}
@media (max-width:640px){
  .header-inner{ height:56px; }
}

.logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:100%;
}
.logo__mark{
  height:68px;
  width:auto;
  flex:0 0 auto;
  object-fit:contain;
}

@media (max-width:640px){
  .logo__mark{ height:60px; }
}

.main-nav{ display:none; }
.main-nav ul{ display:flex; align-items:center; gap:36px; }
.main-nav a{
  font-size:.9rem; font-weight:500; padding-bottom:4px;
  border-bottom:1px solid transparent;
  transition:border-color var(--transition), color var(--transition);
}
.main-nav a:hover, .main-nav a.is-active{
  color:var(--key-blue); border-bottom-color:var(--key-blue);
}

.main-nav .nav-cta{
  padding:10px 22px;
  background:var(--key-blue);
  color:#fff;
  border-radius:var(--radius-s);
  border-bottom:none;
  font-weight:700;
  transition:background var(--transition);
}
.main-nav .nav-cta:hover{
  background:#152a3b;
  border-bottom:none;
  color:#fff;
}
.main-nav .nav-cta.is-active{
  color:#fff;
  background:#152a3b;
  border-bottom-color:transparent;
}

.nav-toggle{ width:32px; height:24px; position:relative; flex:0 0 auto; }
.nav-toggle span{
  position:absolute; left:0; width:100%; height:2px;
  background:var(--text-main);
  transition:transform var(--transition), opacity var(--transition);
}
.nav-toggle span:nth-child(1){ top:0; }
.nav-toggle span:nth-child(2){ top:11px; }
.nav-toggle span:nth-child(3){ top:22px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(11px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-11px) rotate(-45deg); }

.mobile-nav{
  max-height:0; overflow:hidden;
  transition:max-height var(--transition);
  background:var(--bg-base);
  border-bottom:1px solid var(--border-soft);
}
.mobile-nav.is-open{ max-height:360px; }
.mobile-nav ul{ padding:8px 24px 20px; }
.mobile-nav a{
  display:block; padding:12px 0;
  border-bottom:1px solid var(--border-soft);
  font-size:.95rem;
}
.mobile-nav .nav-cta{
  color:var(--key-blue);
  font-weight:700;
}

@media (min-width:900px){
  .main-nav{ display:block; }
  .nav-toggle, .mobile-nav{ display:none; }
}

/* ============================================================
   3. ファーストビュー
   ============================================================ */
.hero{
  position:relative;
  overflow:hidden;
  width:100%;
  padding:100px 0 120px;
}

.hero-decor{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}

.hero-decor__glow{
  position:absolute;
  top:-260px;
  right:-160px;
  width:640px;
  height:640px;
  background:radial-gradient(circle, rgba(31,58,82,.09), transparent 70%);
}

.hero-decor__ring{
  position:absolute;
  top:-150px;
  right:2%;
  width:460px;
  height:460px;
}
.hero-decor__dots{
  position:absolute;
  top:20%;
  right:8%;
  width:240px;
  height:240px;
  background-image:radial-gradient(circle, rgba(31,58,82,.24) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle, rgba(0,0,0,.9) 0%, transparent 72%);
  mask-image:radial-gradient(circle, rgba(0,0,0,.9) 0%, transparent 72%);
}
.hero-decor__diagonal{
  position:absolute;
  bottom:-60px;
  left:2%;
  width:300px;
  height:300px;
}
.hero-decor__glow-left{
  position:absolute;
  bottom:-220px;
  left:-180px;
  width:480px;
  height:480px;
  background:radial-gradient(circle, rgba(63,74,60,.06), transparent 70%);
}

.hero-copy{
  position:relative;
  z-index:1;
  max-width:720px;
}
.hero-copy__mark{
  width:56px;
  height:3px;
  background:var(--key-blue);
  margin-bottom:28px;
}
.hero-copy h1{ font-size:2.1rem; }
.hero-copy .lead{ font-size:1.05rem; color:var(--text-sub); margin-bottom:2em; }
.hero-cta{ display:flex; flex-direction:column; gap:14px; }

@media (min-width:900px){
  .hero-copy h1{ font-size:2.9rem; }
  .hero-cta{ flex-direction:row; }
}

@media (max-width:640px){
  .hero{ padding:88px 0 96px; }
  .hero-decor__glow{ width:380px; height:380px; top:-160px; right:-140px; }
  .hero-decor__ring{ width:280px; height:280px; top:-100px; right:-6%; }
  .hero-decor__dots{ width:150px; height:150px; top:12%; right:2%; }
  .hero-decor__diagonal{ display:none; }
  .hero-decor__glow-left{ width:280px; height:280px; bottom:-140px; left:-120px; }
}

/* ============================================================
   4. サービス概要
   ============================================================ */
.services{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
  align-items:stretch;
}
.service-card{
  background:var(--bg-card);
  border:1px solid var(--border-soft);
  padding:32px;
  display:flex;
  flex-direction:column;
}
.service-card .num{
  font-family:var(--font-mincho);
  color:var(--key-blue);
  font-size:.85rem;
  letter-spacing:.1em;
}
.service-card h3{ margin-bottom:.5em; }
.service-card p{ margin-bottom:0; }
@media (min-width:900px){
  .services{ grid-template-columns:repeat(3, 1fr); }
}

/* ============================================================
   5. 私たちについて
   ============================================================ */
.about-excerpt{ max-width:680px; }
.about-excerpt p{ font-size:1.02rem; color:var(--text-main); }

/* ============================================================
   6. 選ばれる理由
   ============================================================ */
.reasons{ display:grid; grid-template-columns:1fr; gap:40px; }
.reason .num{
  font-family:var(--font-mincho); font-size:2.2rem; color:var(--key-blue);
  display:block; margin-bottom:.3em;
}
@media (min-width:900px){ .reasons{ grid-template-columns:repeat(3,1fr); } }

/* ============================================================
   7. パートナー案内バナー（ブルー）
   ============================================================ */
.partner-banner{ display:flex; flex-direction:column; gap:24px; align-items:flex-start; }
@media (min-width:900px){
  .partner-banner{ flex-direction:row; align-items:center; justify-content:space-between; }
}

/* ============================================================
   8. フッター（テキストのみ）
   ============================================================ */
.site-footer{ background:var(--secondary-green-deep); color:#E8E4D8; padding:64px 0 32px; }
.footer-grid{
  display:grid; gap:32px; grid-template-columns:1fr;
  padding-bottom:32px; border-bottom:1px solid rgba(255,255,255,0.15);
}
.footer-grid a{ color:#E8E4D8; opacity:.85; }
.footer-grid a:hover{ opacity:1; text-decoration:underline; }
.footer-nav li{ margin-bottom:10px; }
.footer-bottom{ padding-top:24px; font-size:.8rem; opacity:.6; }
@media (min-width:900px){ .footer-grid{ grid-template-columns:2fr 1fr 1fr; } }

.footer-brand__text{
  font-family:var(--font-mincho);
  font-size:1.1rem;
  color:#E8E4D8;
  display:block;
  margin-bottom:12px;
}

/* ============================================================
   9. お問い合わせページ
   ============================================================ */
.contact-intro{ max-width:640px; }

.contact-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:start;
}
@media (min-width:960px){
  .contact-layout{ grid-template-columns:.85fr 1.15fr; gap:64px; }
}

.contact-side{ padding-top:4px; }
.contact-side .eyebrow{ margin-bottom:1em; }
.contact-side h2{ font-size:1.3rem; color:#F5F1E8; }
.contact-side p{ color:#D9D2C4; font-size:.92rem; }

.contact-side__list{
  display:flex; flex-direction:column; gap:18px;
  margin-top:28px; padding-top:24px;
  border-top:1px solid rgba(245,241,232,.2);
}
.contact-side__item{ display:flex; gap:14px; align-items:flex-start; }
.contact-side__item .mark{
  flex:0 0 auto; width:6px; height:6px; margin-top:9px;
  background:#F5F1E8; opacity:.7;
}
.contact-side__item p{ margin:0; font-size:.88rem; color:#D9D2C4; }
.contact-side__item strong{ color:#F5F1E8; display:block; font-size:.92rem; margin-bottom:2px; }

.contact-card{
  background:#fff;
  border:1px solid rgba(255,255,255,.08);
  padding:40px 36px;
  box-shadow:0 24px 48px -28px rgba(15,26,36,.45);
}
@media (min-width:640px){
  .contact-card{ padding:48px; }
}

.contact-form{ display:flex; flex-direction:column; gap:22px; }
.contact-form .form-row{ display:flex; flex-direction:column; }
.contact-form label{
  display:block; font-size:.82rem; font-weight:700;
  margin-bottom:8px; color:var(--text-main); letter-spacing:.03em;
}
.contact-form input, .contact-form textarea{
  width:100%; padding:13px 16px; border:1px solid var(--border-soft);
  background:var(--bg-base); font-family:inherit; font-size:.95rem;
  color:var(--text-main);
  transition:border-color var(--transition), background var(--transition);
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--key-blue); background:#fff;
}
.contact-form textarea{ resize:vertical; min-height:140px; }

.form-grid-2{
  display:grid; grid-template-columns:1fr; gap:22px;
}
@media (min-width:560px){
  .form-grid-2{ grid-template-columns:1fr 1fr; }
}

.radio-group{
  display:flex;
  flex-wrap:nowrap;
  gap:12px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.radio-group label{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  white-space:nowrap;
  font-weight:400;
  font-size:.88rem;
  color:var(--text-main);
  padding:10px 16px;
  border:1px solid var(--border-soft);
  background:var(--bg-base);
  cursor:pointer;
  transition:border-color var(--transition), background var(--transition);
}
.radio-group input[type="radio"]{
  accent-color:var(--key-blue);
  width:15px; height:15px; margin:0;
}
.radio-group label:has(input:checked){
  border-color:var(--key-blue);
  background:var(--key-blue-soft);
}

.contact-form .form-submit{
  align-self:flex-start;
  margin-top:6px;
  background:var(--key-blue);
  color:#fff;
}
.contact-form .form-submit:hover{ background:#152a3b; }
.contact-card .form-note{
  font-size:.8rem; color:var(--text-sub); margin-top:-8px;
}
.form-message{ display:none; margin-top:4px; font-size:.9rem; }
.form-message.is-success{ display:block; color:#2E362B; }
.form-message.is-error{ display:block; color:#B3261E; }

/* ============================================================
   10. コラム一覧
   ============================================================ */
.column-grid{ display:grid; grid-template-columns:1fr; gap:32px; }
.column-card{ background:#fff; border:1px solid var(--border-soft); }
.column-card .ph{
  background:#EFE9DF; aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-sub); font-size:.8rem;
}
.column-card .body{ padding:24px; }
.column-card .date{ font-size:.78rem; color:var(--text-sub); letter-spacing:.05em; }
@media (min-width:700px){ .column-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .column-grid{ grid-template-columns:repeat(3,1fr); } }

.column-empty{
  border:1px dashed var(--border-soft);
  padding:48px 24px;
  text-align:center;
  color:var(--text-sub);
  font-size:.95rem;
}

/* ============================================================
   11. 代理店ページ：ステップ表示
   ============================================================ */
.steps{ display:grid; grid-template-columns:1fr; gap:0; border-top:1px solid var(--border-soft); }
.step{ display:grid; grid-template-columns:80px 1fr; gap:24px; padding:32px 0; border-bottom:1px solid var(--border-soft); }
.step .num{ font-family:var(--font-mincho); font-size:1.8rem; color:var(--key-blue); }

/* ============================================================
   12. スクロールフェードイン
   ============================================================ */
.fade-in{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.fade-in.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .fade-in{ opacity:1; transform:none; transition:none; } }