/*
 * about-style.css
 * about.html専用のスタイリング（共通のstyle.cssと併用）
 */
main{
    max-width: 800px;
    margin: 0 auto;
}
/* ====== Tokens (scoped) - サイトの:root変数に統合 ====== */
.kj-about{
    /* 既存の:root変数を流用 */
    --brand: var(--color-primary);  /* #191970 (群青) */
    --ink: var(--color-text-dark);  /* #333 */
    --muted: #64748B;              /* 補助色はそのまま残す */
    
    --bg: var(--color-bg-light);   /* #f9f9f9 */
    --card: var(--color-text-light); /* #fff */
    --bd: #E5E7EB;
    --radius:16px;

    /* Breakpoints (残りはそのまま) */
}

/* ====== Reset-ish (local scope) ====== */
.kj-about, .kj-about * { box-sizing: border-box; padding: 0; }
.kj-about img { width: 230px; height: auto; display: block; }
.kj-about a { text-decoration: none; }


/* ===== ページ全体の背景（body）— 共通CSSと競合するため、ここでは省略（既存のstyle.cssに任せる） ===== */

/* ===== カードの透明度（メインサイトの雰囲気に合わせる） ===== */
/* 透明化を解除し、サイトの標準背景色に合わせます */
/* .kj-about {
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
} */
/* 背景を戻し、メインサイトに組み込みやすいデザインに */
.kj-about{
    background: var(--card); /* #FFFFFF に戻す */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); /* 影を追加 */
    border-radius: var(--radius);
    padding: clamp(20px, 4vw, 40px);
    max-width: min(1100px, 92vw);
    margin: 40px auto; /* ページコンテンツとして目立つように余白を調整 */
}


/* ====== Hero ====== */
.about-hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}
.about-headings{ text-align: center; }
.about-avatar{
    width: 72px; 
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    /* 💡 ブランドカラーを適用 */
    border: 3px solid var(--color-primary-light); 
    display: block;
}
.about-name{
    margin: 0;
    font-size: clamp(20px, 4.5vw, 28px);
    font-family: "Noto Serif JP","LINE Seed JP App",serif;
    color: var(--color-primary); /* 💡 ブランドカラーを適用 */
}
.about-roles{
    margin: .25rem 0;
    color: var(--muted);
    font-size: clamp(12px, 3vw, 14px);
    line-height: 1.6;
}
.about-tagline{
    margin: .25rem 0 0;
    font-size: clamp(14px, 3.3vw, 16px);
    line-height: 1.8;
    text-align: left;
}

/* ====== Headings ====== */
.about-strengths h2,
.about-services h2,
.about-faq h2{
    font-size: clamp(18px, 3.2vw, 20px);
    margin: 24px 0 12px; /* 縦の余白を少し増やす */
    color: var(--color-primary); /* 💡 ブランドカラーを適用 */
    border-bottom: 2px solid var(--color-primary-light); /* アンダーライン追加 */
    padding-bottom: 6px;
}

/* ====== Strengths ====== */
.strength-list {
    margin: 0; padding: 0; list-style: none;
    display: grid; gap: 12px; /* ギャップを調整 */ grid-template-columns: 1fr;
}
.strength-list li{
    background: #fcfcfc; /* カード内の背景をわずかに変える */
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 16px; /* パディングを増やす */
    display: flex; gap: 12px;
    align-items: center; /* アイコンとテキストを中央揃え */
}
.strength-list strong{ margin-right: 6px; color: var(--color-primary); }

/* ====== Services / FAQ / CTA (省略：元のCSSをcontact-style.cssのように必要な部分のみ残します) ====== */

.service-list{
    margin: 0; padding: 0; list-style: none;
    /* display: grid; */
     gap: 12px; /* ギャップを調整 */ grid-template-columns: 1fr;
}

.service-list li{
    background: #fcfcfc; /* カード内の背景をわずかに変える */
    border: 1px solid var(--bd);
    border-radius: 12px;
    padding: 16px; /* パディングを増やす */
    display: flex; gap: 12px;
    align-items: center; /* アイコンとテキストを中央揃え */
}

/* ====== CTA ====== */
.about-cta{
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 30px; /* 余白を調整 */
    justify-content: center;
}
.btn{ display:inline-block; padding:12px 24px; border-radius:999px; font-weight:700; transition: all 0.2s; }
.btn-primary{ 
    background: var(--color-accent); /* 💡 メインサイトのCTAに合わせアクセントカラー */
    color: var(--color-text-dark); 
    box-shadow: 0 3px 6px rgba(255, 215, 0, 0.4);
}
.btn-primary:hover{ 
    background: #e6c800; 
    transform: translateY(-1px);
    box-shadow: 0 5px 10px rgba(255, 215, 0, 0.5);
}
.btn-line{ background: var(--line); color:#fff; }
.btn-line:hover{ background: #05ae4a; }


/* ====== Responsive (元のコードのまま) ====== */
/* ... (元のメディアクエリコードを about-style.css にコピー) ... */


/* ====== Scroll reveal (元のコードのまま) ====== */
/* ... (元のスクロールリビールのコードを about-style.css にコピー) ... */