/* ========================================
   ヨユーデザイン — 共通スタイル
   common.css
   ======================================== */

/* リセット */
*{margin:0;padding:0;box-sizing:border-box}

/* CSS変数 */
:root{
  --black:#000;--white:#fff;
  --off:#F9F7F2;
  --gray-dark:#1C1C1C;
  --gray-mid:#2E2E2E;
  --g100:#E6E4DF;--g200:#CECECE;--g300:#AAAAAA;--g500:#777;--g600:#555;
  --yellow:#F2E47A;--yellow-bg:#FBF7D6;--yellow-text:#4A4000;
  --green:#A8D8B0;--green-bg:#DFF2E3;--green-text:#154022;
  --connect-bg:#E0DEDB;--connect-text:#222;
  --border:1.5px solid #000;
  --border-light:1px solid #E6E4DF;
  --mono:'Manrope',monospace;
  --ease:cubic-bezier(0.4,0,0.2,1);
}

html{scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;
  background:var(--white);color:var(--black);
  font-size:17px;line-height:2;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ── NAV ── */
.yd-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 3rem;height:64px;
  background:rgba(255,255,255,0.97);
  border-bottom:var(--border-light);
}
body{padding-top:64px;}
@media(max-width:900px){
  body{padding-top:56px;}
}
.yd-nav-logo{
  font-family:var(--mono);font-size:13px;font-weight:600;
  letter-spacing:0.14em;color:var(--black);white-space:nowrap;
}
.yd-nav-links{display:flex;align-items:center;list-style:none}
.yd-nav-links a{
  display:block;font-size:14px;font-weight:400;color:var(--g600);
  padding:0 1rem;height:64px;line-height:64px;
  letter-spacing:0.02em;border-bottom:2px solid transparent;
  transition:color 0.15s,border-color 0.15s;white-space:nowrap;
}
.yd-nav-links a:hover{color:var(--black)}
.yd-nav-links a[aria-current="page"]{color:var(--black);border-bottom-color:var(--yellow)}
.yd-nav-cta{
  font-size:13px;font-weight:600;letter-spacing:0.08em;
  padding:0.65rem 1.4rem;background:var(--yellow);color:var(--black);
  border:none;cursor:pointer;font-family:inherit;white-space:nowrap;
  transition:background 0.15s;
}
.yd-nav-cta:hover{background:#edd84a}
.yd-nav-burger{
  display:none;background:none;border:none;cursor:pointer;
  font-size:22px;color:var(--black);padding:4px;align-items:center;
}
.yd-mob-menu{
  display:none;position:fixed;top:56px;left:0;right:0;
  background:var(--white);border-bottom:var(--border);z-index:99;
}
.yd-mob-menu.open{display:block}
.yd-mob-menu a{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;font-size:16px;font-weight:400;
  color:var(--black);border-bottom:var(--border-light);
}
.yd-mob-menu a:last-child{border-bottom:none}
.yd-mob-menu a span{
  font-size:12px;color:var(--g300);
  font-family:var(--mono);letter-spacing:0.08em;
}

/* ── FOOTER ── */
.yd-footer{
  background:var(--gray-dark);border-top:1px solid #333;
  padding:2.5rem 3rem;
  display:flex;align-items:center;justify-content:space-between;
}
.yd-footer-logo{
  font-family:var(--mono);font-size:12px;font-weight:600;
  color:#555;letter-spacing:0.12em;
}
.yd-footer-links{display:flex;gap:2rem;list-style:none;}
.yd-footer-links a{
  font-size:12px;color:#555;letter-spacing:0.04em;transition:color 0.2s;
}
.yd-footer-links a:hover{color:#999}
.yd-footer-copy{font-size:11px;color:#333;letter-spacing:0.04em;}

/* ── ABOUT BAR ── */
.yd-about-bar{
  background:var(--gray-dark);
  border-top:1px solid #222;border-bottom:1px solid #222;
  padding:1rem 3rem;
}
.yd-about-bar-inner{
  max-width:960px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  gap:2rem;flex-wrap:wrap;
}
.yd-about-bar-label{
  font-family:var(--mono);font-size:10px;
  letter-spacing:0.14em;text-transform:uppercase;color:#444;
}
.yd-about-bar a{
  font-size:12px;color:#555;transition:color 0.15s;
}
.yd-about-bar a:hover{color:#999}

/* ── 共通レイアウト ── */
section{padding:7rem 3rem;border-bottom:var(--border)}
.container{max-width:960px;margin:0 auto}
.sec-label{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--g300);margin-bottom:2.5rem;
}
.sec-label::before{content:'';width:28px;height:1px;background:var(--g300);flex-shrink:0}

/* ── 共通ボタン ── */
.btn-primary{
  display:inline-block;font-size:14px;font-weight:600;
  letter-spacing:0.06em;padding:0.85rem 2rem;
  background:var(--black);color:var(--white);transition:opacity 0.15s;
}
.btn-primary:hover{opacity:0.75}
.btn-cta{
  display:inline-block;font-size:15px;font-weight:600;
  letter-spacing:0.06em;padding:1rem 2.4rem;
  background:var(--yellow);color:var(--black);transition:background 0.15s;
}
.btn-cta:hover{background:#edd84a}
.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  font-size:14px;font-weight:400;color:var(--g600);transition:color 0.15s;
}
.btn-ghost:hover{color:var(--black)}
.btn-with-copy{display:flex;flex-direction:column;align-items:flex-start;gap:0.4rem}
.btn-microcopy{font-size:12px;color:var(--g300);letter-spacing:0.04em;}

/* ── カテゴリタグ ── */
.cat-tag{
  display:inline-block;font-family:var(--mono);font-size:11px;
  letter-spacing:0.1em;padding:0.35rem 1rem;border-radius:999px;
  font-weight:500;
}
.cat-tag.life{background:var(--green-bg);color:var(--green-text);}
.cat-tag.money{background:var(--yellow-bg);color:var(--yellow-text);}
.cat-tag.connect{background:var(--connect-bg);color:var(--connect-text);}

/* ── NEXT STEPセクション ── */
.yd-next{padding:7rem 3rem;background:var(--gray-dark);color:var(--white);border-bottom:none;}
.yd-next-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;}
.yd-next-label{font-family:var(--mono);font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#888;margin-bottom:2rem;}
.yd-next-headline{font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;line-height:1.4;margin-bottom:1.5rem;color:var(--white);}
.yd-next-headline em{font-style:normal;color:var(--yellow);}
.yd-next-body{font-size:15px;color:#BBBBBB;line-height:2.1;margin-bottom:2.5rem;}
.btn-next-page{
  display:inline-block;font-size:15px;font-weight:600;
  letter-spacing:0.06em;padding:1rem 2.4rem;
  background:var(--yellow);color:var(--black);transition:background 0.15s;
}
.btn-next-page:hover{background:#edd84a}
.yd-next-aside{display:flex;flex-direction:column;gap:1px;background:#333;border:1px solid #333;}
.yd-next-aside-item{background:var(--gray-mid);padding:1.5rem 1.75rem;border-bottom:1px solid #333;}
.yd-next-aside-item:last-child{border-bottom:none}
.yd-next-aside-num{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;color:#555;margin-bottom:0.4rem;}
.yd-next-aside-title{font-size:0.95rem;font-weight:600;color:#CCC;line-height:1.4;}
.yd-next-aside-link{font-size:12px;color:#555;display:inline-flex;align-items:center;gap:4px;transition:color 0.15s;margin-top:0.3rem;}
.yd-next-aside-link:hover{color:#888}

/* ── アニメーション ── */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── モバイル共通 ── */
@media(max-width:900px){
  .yd-nav{padding:0 1.25rem;height:56px;}
  .yd-nav-links{display:none}
  .yd-nav-burger{display:flex}
  section{padding:5rem 1.25rem}
  .yd-next{padding:5rem 1.25rem}
  .yd-next-inner{grid-template-columns:1fr;gap:3rem;}
  .yd-footer{flex-direction:column;gap:1.25rem;text-align:center;padding:2.5rem 1.25rem;}
  .yd-footer-links{justify-content:center;flex-wrap:wrap;}
  .yd-about-bar{padding:1rem 1.25rem}
}