/* ===================================
   良志工房（ga-fa.com）
   Design System & Global Styles
   Theme D: Light Grey x Indigo x Teal
   =================================== */

/* --- Reset & Base --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#F3F4F6;
  --bg-deep:#E8EAF0;
  --bg-card:#FFFFFF;
  --text:#1E1B4B;
  --text-muted:rgba(30,27,75,.45);
  --accent:#0D9488;
  --border:rgba(30,27,75,.1);
  --header-bg:rgba(30,27,75,.97);
  --header-text:#E6EDF6;
  --header-text-muted:rgba(230,237,246,.55);
  --max-w:1120px;
  --r:18px;
  --font-ja:system-ui,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:var(--font-ja);
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:opacity .2s}
a:hover{opacity:.75}

/* --- Utility --- */
.wrap{max-width:var(--max-w);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* --- Header / Nav --- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--header-bg);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(230,237,246,.1);
}
.site-header .wrap{
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.site-logo{
  font-size:1.1rem;font-weight:700;letter-spacing:.04em;
  color:var(--header-text);display:flex;align-items:center;gap:10px;
}
.site-logo a{color:inherit;display:flex;align-items:center;gap:10px}
.site-logo img{height:32px;width:auto}
.nav-list{
  display:flex;gap:32px;list-style:none;
}
.nav-list a{
  color:var(--header-text-muted);font-size:.875rem;font-weight:500;
  transition:color .2s;
}
.nav-list a:hover,.nav-list a[aria-current="page"]{color:var(--header-text);opacity:1}

/* Hamburger */
.nav-toggle{display:none;background:none;border:none;color:var(--header-text);cursor:pointer;padding:8px}
.nav-toggle svg{width:24px;height:24px}

@media(max-width:768px){
  .nav-toggle{display:block}
  .nav-list{
    display:none;flex-direction:column;gap:0;
    position:absolute;top:64px;left:0;right:0;
    background:#1E1B4B;border-bottom:1px solid rgba(230,237,246,.1);
  }
  .nav-list.is-open{display:flex}
  .nav-list li{border-top:1px solid rgba(230,237,246,.1)}
  .nav-list a{display:block;padding:16px 24px;font-size:1rem}
}

/* --- Section --- */
.section{padding:96px 0}
.section--alt{background:var(--bg-deep)}
.section__title{
  font-size:1.5rem;font-weight:700;margin-bottom:16px;
  letter-spacing:.02em;color:var(--text);
}
.section__lead{
  color:var(--text-muted);font-size:1rem;max-width:640px;margin-bottom:48px;
}

/* --- Hero --- */
.hero{
  padding:120px 0 96px;
  position:relative;overflow:hidden;
}
.hero__label{
  font-size:.8rem;letter-spacing:.12em;color:var(--text-muted);
  text-transform:uppercase;margin-bottom:24px;
}
.hero__title{
  font-size:clamp(1.8rem,4.5vw,3.2rem);
  font-weight:800;line-height:1.3;margin-bottom:24px;
  letter-spacing:.02em;color:var(--text);
}
.hero__sub{
  font-size:1.05rem;color:var(--text-muted);
  max-width:600px;line-height:1.8;margin-bottom:16px;
  font-style:italic;
}
.hero__body{
  max-width:600px;color:var(--text-muted);
  font-size:1.05rem;line-height:1.8;margin-bottom:40px;
}
.hero__cta{display:flex;gap:16px;flex-wrap:wrap}

/* --- Buttons --- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:var(--r);
  font-size:.9rem;font-weight:600;transition:all .2s;
  border:1px solid transparent;cursor:pointer;
}
.btn--primary{
  background:var(--accent);color:#fff;
}
.btn--primary:hover{opacity:.85}
.btn--ghost{
  background:transparent;color:var(--text);
  border-color:var(--border);
}
.btn--ghost:hover{border-color:var(--text-muted);opacity:1}

/* --- Reason Grid (4 columns) --- */
.pillar-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
@media(max-width:768px){
  .pillar-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .pillar-grid{grid-template-columns:1fr}
}
.pillar-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r);padding:32px 24px;
  transition:border-color .2s;
  box-shadow:0 1px 4px rgba(30,27,75,.07);
}
.pillar-card:hover{border-color:var(--accent)}
.pillar-card__icon{
  width:40px;height:40px;margin-bottom:16px;
  color:var(--accent);
}
.pillar-card__title{font-size:1rem;font-weight:700;margin-bottom:8px}
.pillar-card__text{font-size:.875rem;color:var(--text-muted);line-height:1.6}

/* --- Example list --- */
.example-list{
  display:flex;flex-direction:column;gap:16px;
  max-width:640px;
}
.example-list__item{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r);padding:20px 24px;
  font-size:.95rem;line-height:1.7;
  position:relative;padding-left:44px;
  box-shadow:0 1px 4px rgba(30,27,75,.07);
}
.example-list__item::before{
  content:"";position:absolute;left:20px;top:24px;
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);
}

/* --- Service Cards --- */
.service-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
}
.service-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r);padding:32px 28px;
  box-shadow:0 1px 4px rgba(30,27,75,.07);
}
.service-card--main{border-left:4px solid var(--accent)}
.service-card__name{font-size:1.1rem;font-weight:700;margin-bottom:4px}
.service-card__catch{font-size:.9rem;color:var(--accent);margin-bottom:12px}
.service-card__text{font-size:.875rem;color:var(--text-muted);line-height:1.7;margin-bottom:12px}
.service-card__detail{font-size:.8rem;color:var(--text-muted);line-height:1.6}
.service-card__detail dt{font-weight:600;color:var(--text);margin-top:8px}
.service-card__detail dd{margin-left:0}

/* --- Tool Cards --- */
.tool-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;
}
.tool-card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r);padding:32px 28px;
  display:flex;flex-direction:column;
  box-shadow:0 1px 4px rgba(30,27,75,.07);
}
.tool-card__name{font-size:1.1rem;font-weight:700;margin-bottom:8px}
.tool-card__desc{font-size:.875rem;color:var(--text-muted);margin-bottom:4px;flex:1}
.tool-card__bg{font-size:.8rem;color:var(--text-muted);font-style:italic;margin-bottom:16px}
.tool-card__link{
  font-size:.875rem;font-weight:600;color:var(--accent);
  display:inline-flex;align-items:center;gap:4px;
}
.tool-card__link::after{content:"\2197";font-size:.75rem}

/* --- Profile (TOP) --- */
.profile{
  display:flex;gap:40px;align-items:flex-start;
  max-width:720px;
}
@media(max-width:600px){
  .profile{flex-direction:column}
}
.profile__info{flex:1}
.profile__name{font-size:1.2rem;font-weight:700;margin-bottom:4px}
.profile__title{font-size:.85rem;color:var(--text-muted);margin-bottom:12px}
.profile__bio{font-size:.95rem;line-height:1.7;margin-bottom:8px}
.profile__career{font-size:.85rem;color:var(--text-muted);line-height:1.7;margin-bottom:16px}

/* --- FAQ --- */
.faq-list{max-width:720px}
.faq-item{border-bottom:1px solid var(--border);padding:24px 0}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{
  font-size:.95rem;font-weight:700;margin-bottom:8px;
  display:flex;gap:8px;
}
.faq-q::before{content:"Q.";color:var(--accent);font-weight:800}
.faq-a{font-size:.9rem;color:var(--text-muted);line-height:1.7;padding-left:28px}

/* --- CTA Section --- */
.cta-section{text-align:center;padding:96px 0}
.cta-section__title{font-size:1.4rem;font-weight:700;margin-bottom:12px;color:var(--text)}
.cta-section__lead{
  color:var(--text-muted);font-size:.95rem;max-width:520px;
  margin:0 auto 12px;line-height:1.7;
}
.cta-section__limit{
  font-size:.85rem;color:var(--accent);margin-bottom:32px;
}
.cta-section__region{
  font-size:.8rem;color:var(--text-muted);margin-top:16px;
}

/* --- Steps --- */
.steps{
  display:flex;gap:32px;counter-reset:step;
}
@media(max-width:768px){
  .steps{flex-direction:column}
}
.step{
  flex:1;background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--r);padding:32px 24px;
  counter-increment:step;
  box-shadow:0 1px 4px rgba(30,27,75,.07);
}
.step::before{
  content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:.85rem;font-weight:800;margin-bottom:16px;
}
.step__title{font-size:1rem;font-weight:700;margin-bottom:8px}
.step__text{font-size:.875rem;color:var(--text-muted);line-height:1.6}

/* --- Footer --- */
.site-footer{
  background:#1E1B4B;
  border-top:1px solid rgba(230,237,246,.1);
  padding:48px 0;
  font-size:.8rem;color:var(--header-text-muted);
}
.site-footer .wrap{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:16px;
}
.site-footer .wrap p{color:var(--header-text-muted)}
.footer-links{display:flex;gap:24px;list-style:none}
.footer-links a{color:var(--header-text-muted);font-size:.8rem}
.footer-links a:hover{color:var(--header-text)}

/* --- Form (Contact page) --- */
.form{max-width:560px}
.form__group{margin-bottom:24px}
.form__label{display:block;font-size:.85rem;font-weight:600;margin-bottom:8px}
.form__input,.form__textarea,.form__select{
  width:100%;padding:12px 16px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:12px;color:var(--text);font-size:.9rem;
  font-family:inherit;
}
.form__input:focus,.form__textarea:focus,.form__select:focus{
  outline:none;border-color:var(--accent);
}
.form__textarea{min-height:120px;resize:vertical}

/* --- Article (About / Service pages) --- */
.article{max-width:720px}
.article h2{font-size:1.3rem;font-weight:700;margin:48px 0 16px;letter-spacing:.02em}
.article h3{font-size:1.1rem;font-weight:700;margin:32px 0 12px}
.article p{margin-bottom:16px;line-height:1.8}
.article ul,.article ol{margin-bottom:16px;padding-left:24px}
.article li{margin-bottom:8px;line-height:1.7}
.article li::marker{color:var(--accent)}

/* --- Page Header --- */
.page-header{padding:80px 0 48px;border-bottom:1px solid var(--border)}
.page-header__title{font-size:1.6rem;font-weight:700;margin-bottom:8px}
.page-header__lead{color:var(--text-muted);font-size:.95rem;max-width:600px}

/* --- Closing message --- */
.closing{
  font-size:.95rem;color:var(--text);line-height:1.8;
  max-width:640px;margin-top:32px;padding:24px 28px;
  background:var(--bg-card);border-left:4px solid var(--accent);
  border-radius:0 var(--r) var(--r) 0;
  box-shadow:0 1px 4px rgba(30,27,75,.07);
}