@charset "UTF-8";

/* ===================================================
   婚活LP - 佐藤大輔
   テーマ: Apple風 (モダン・クリーン・透明感)
   カラー: Apple Grey / White / Apple Blue
   =================================================== */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
}

body {
    /* Apple風の洗練されたシステムフォントスタック */
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
    background: #F5F5F7;
    color: #1D1D1F;
    line-height: 1.6;
    letter-spacing: -0.015em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img { display:block; max-width:100%; height:auto; }
a { text-decoration:none; color:inherit; }

/* ---------- カラー変数 ---------- */
:root {
    --apple-gray: #1D1D1F;
    --apple-bg: #F5F5F7;
    --white: #FFFFFF;
    --text: #1D1D1F;
    --text-light: #86868B;
    --text-muted: #A1A1A6;
    --line-green: #06C755;
    --apple-blue: #0071E3;
    
    /* 既存のHTMLクラス名と互換性を持たせるためのエイリアス */
    --navy: #1D1D1F; 
    --beige: #F5F5F7;
    --beige-dark: #F5F5F7; 
    --gold: #1D1D1F; 
}

/* ===========================================
   ヘッダー（固定）
   =========================================== */
.site-header {
    position: fixed; top:0; left:0; width:100%; z-index:100;
    /* Apple風のガラスモーフィズム */
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: background-color 0.4s ease;
}

.header-inner {
    max-width: 1200px; margin:0 auto; padding:0 40px;
    height: 72px; display:flex; align-items:center; justify-content:space-between;
}
.header-logo { font-weight:700; font-size:1.1rem; color:var(--text); letter-spacing:-0.02em; }
.header-logo .sub { font-weight:500; font-size:.8rem; color:var(--text-muted); margin-left:8px; }

.header-nav { display:flex; align-items:center; gap:32px; }
.header-nav a { font-size:.85rem; font-weight:500; color:var(--text); opacity:0.8; transition:opacity .3s; }
.header-nav a:hover { opacity:1; color:var(--apple-blue); }
.nav-divider { width:1px; height:14px; background:rgba(0,0,0,0.15); }
.header-sns { display:flex; gap:16px; }
.header-sns a { font-size:1.1rem; color:var(--text); opacity:0.8; }
.header-sns a:hover { opacity:1; color:var(--apple-blue); }

/* ハンバーガー */
.hamburger {
    display:none; flex-direction:column; gap:6px;
    cursor:pointer; background:none; border:none; padding:8px; z-index:200;
}
.hamburger span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px; transition:.3s; }
.hamburger.active span:nth-child(1) { transform:rotate(45deg) translate(5px,6px); }
.hamburger.active span:nth-child(2) { opacity:0; }
.hamburger.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-6px); }

/* ===========================================
   共通レイアウト
   =========================================== */
.container { max-width:1200px; margin:0 auto; padding:0 40px; }

.split {
    display:flex; align-items:center; gap:80px;
}
.split--reverse { flex-direction:row-reverse; }
.split__text { flex:1; min-width:0; }
.split__photo { flex:1; min-width:0; }

/* ---------- セクション番号ラベル ---------- */
.section-label {
    font-size:.75rem; font-weight:700; color:var(--text-muted);
    letter-spacing:.1em; margin-bottom:12px; text-transform: uppercase;
}

/* ---------- セクション見出し ---------- */
.section-title {
    font-size:2.8rem; font-weight:700; color:var(--text);
    margin-bottom:24px; line-height:1.2; letter-spacing:-0.03em;
}

/* ---------- セクション小見出し ---------- */
.section-subtitle {
    font-size:1.4rem; font-weight:600; color:var(--text);
    margin-bottom:20px; line-height:1.4; letter-spacing:-0.02em;
}

/* ---------- 本文 ---------- */
.section-body {
    font-size:1.05rem; color:var(--text-light); line-height:1.8;
}
.section-body .highlight {
    color: var(--text);
    font-weight:600;
}

/* ===========================================
   写真コンテナ (くっきり・はっきり・透明感)
   =========================================== */
.photo-frame {
    border-radius:24px; overflow:hidden;
    /* より美しく柔らかい影（Apple製品のような落ち影） */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08); 
    aspect-ratio: 3/4;
    position:relative;
    max-width: 420px;
    margin: 0 auto;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .5s cubic-bezier(0.16, 1, 0.3, 1);
    background: #fff;
}
.photo-frame:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}
.photo-frame img {
    width:100%; height:100%; object-fit:cover;
    transform: scale(1.08);
    transform-origin: center;
    /* 写真をくっきり・はっきり・透明感を出すフィルター */
    filter: brightness(1.05) contrast(1.08) saturate(1.15);
}

/* セクション別の画像アスペクト比 */
.photo-frame--hobby       { aspect-ratio: 4/3; max-width: 500px; }

/* 丸みのバリエーション */
.photo-frame--rounded-top { border-radius: 200px 200px 24px 24px; }
.photo-frame--circle { border-radius:50%; aspect-ratio:1/1; max-width:360px; }

/* -------------------------------------------
   人物位置の微調整（顔切れ防止）
   ------------------------------------------- */
.photo-frame--work img, .photo-frame--circle img {
    object-position: 75% 20%;
}
.photo-frame--hero img {
    object-position: 75% center;
}

/* ===========================================
   セクション背景
   =========================================== */
.bg-beige { background: #F5F5F7; }
.bg-beige-dark { background: #F5F5F7; } 
.bg-white { background: #FFFFFF; }

.section-padding { padding:120px 0; }
.hero-section { padding-top:calc(72px + 100px); padding-bottom:100px; }

/* ===========================================
   TYPOGRAPHY & TEXT
   =========================================== */
.hero-name-block {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}
.hero-name-en {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
    line-height: 1;
}
.hero-name-jp {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-light);
    letter-spacing: 0.1em;
    margin-top: 8px;
}

/* ===========================================
   01. ヒーロー
   =========================================== */
.hero-headline {
    font-size:3.5rem; font-weight:700; color:var(--text);
    line-height:1.15; margin-bottom:24px; letter-spacing:-0.04em;
}
.hero-sub {
    font-size:1.25rem; color:var(--text-light); font-weight:500;
    line-height:1.6; margin-bottom:48px; letter-spacing:-0.01em;
}

/* ===========================================
   CTAボタン
   =========================================== */
.btn-cta {
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--text); color:var(--white);
    padding:18px 36px; 
    border-radius:980px; /* Apple風のピル形状 */
    font-weight:600;
    font-size:1.05rem; letter-spacing:-0.01em;
    transition: all .3s ease;
}
.btn-cta:hover {
    transform:scale(1.02);
    background: #333336;
}
.btn-cta i { margin-left:10px; font-size:1rem; }

.btn-line {
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--line-green); color:var(--white);
    padding:20px 48px; border-radius:980px; font-weight:600;
    font-size:1.1rem; letter-spacing:-0.01em;
    box-shadow: 0 10px 20px rgba(6,199,85,.2);
    transition: all .3s ease;
}
.btn-line:hover {
    transform:scale(1.02);
    box-shadow: 0 15px 30px rgba(6,199,85,.3);
}
.btn-line i { margin-right:10px; font-size:1.3rem; }

/* ===========================================
   03. プロフィールテーブル
   =========================================== */
.profile-table {
    width:100%; max-width:700px; margin:0;
    border-collapse:collapse;
    background:var(--white);
}
.profile-table th,
.profile-table td {
    padding:24px 0; text-align:left; font-size:1.05rem;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}
.profile-table th {
    width:35%; color:var(--text); font-weight:600;
}
.profile-table th i { width:32px; text-align:left; color:var(--text-muted); }
.profile-table td { color:var(--text-light); font-weight:500; }
.profile-table tr:last-child th,
.profile-table tr:last-child td { border-bottom:none; }

/* ===========================================
   05. ホビーアイコン
   =========================================== */
.hobby-icons {
    display:flex; gap:48px; margin-top:48px;
}
.hobby-icon {
    text-align:center; color:var(--text);
}
.hobby-icon i { font-size:2rem; margin-bottom:12px; display:block; color:var(--text); }
.hobby-icon span { font-size:.8rem; font-weight:600; letter-spacing:.05em; color:var(--text-light); }

/* ===========================================
   06. SNSフィード (Instagram風UI)
   =========================================== */
.sns-mockup {
    max-width:600px; margin:0 auto;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius:32px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    border:1px solid rgba(255, 255, 255, 0.5);
    overflow:hidden;
    text-align:left;
    transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sns-mockup:hover {
    transform: translateY(-4px) scale(1.01);
}
.sns-header {
    display:flex; align-items:center; padding:20px 24px;
}
.sns-avatar {
    width:44px; height:44px; border-radius:50%;
    object-fit:cover; margin-right:16px;
    filter: brightness(1.05) contrast(1.08) saturate(1.15);
}
.sns-user { font-weight:600; font-size:1rem; color:var(--text); }
.sns-location { font-size:.8rem; color:var(--text-muted); display:block; margin-top:2px; }

.sns-frame {
    width:100%; overflow:hidden;
}
.sns-frame img { 
    width:100%; display:block;
    transform: scale(1.08);
    transform-origin: center;
    filter: brightness(1.05) contrast(1.08) saturate(1.15);
}

.sns-actions {
    padding:20px 24px 12px; display:flex; justify-content:space-between;
    font-size:1.6rem; color:var(--text);
}
.sns-actions-left { display:flex; gap:20px; }
.sns-caption {
    padding:0 24px 24px; font-size:1rem; color:var(--text); line-height:1.5;
}

.sns-icons { display:flex; justify-content:center; gap:32px; margin-bottom:48px; }
.sns-icons a { font-size:1.8rem; color:var(--text); opacity:0.8; transition:all .3s; }
.sns-icons a:hover { opacity:1; transform:scale(1.1); }

/* ===========================================
   07. CTA セクション
   =========================================== */
.cta-card {
    background: #FFFFFF; border-radius:32px;
    padding:60px 40px; text-align:center; position:relative;
    box-shadow: 0 20px 60px rgba(0,0,0,0.06);
    margin-top:40px;
}
.cta-badge {
    position:absolute; top:-16px; left:50%; transform:translateX(-50%);
    background:var(--text); color:var(--white);
    font-size:.85rem; font-weight:600; padding:8px 24px;
    border-radius:980px; white-space:nowrap;
}
.cta-micro {
    font-size:.9rem; color:var(--text-muted); margin-top:20px; font-weight:500;
}

/* ===========================================
   フッター
   =========================================== */
.site-footer {
    background:var(--apple-bg); padding:60px 40px; text-align:center;
}
.footer-copyright {
    font-size:.85rem; color:var(--text-muted); font-weight:500;
}
.footer-link {
    color:inherit; text-decoration:none; transition:opacity .3s;
}
.footer-link:hover { color:var(--text); }

/* ===========================================
   スクロールアニメーション
   =========================================== */
.reveal {
    opacity:0; transform:translateY(40px);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
    opacity:1; transform:translateY(0);
}

/* ===========================================
   レスポンシブ
   =========================================== */
@media (max-width:768px) {
    html { scroll-padding-top:60px; }
    .header-inner { padding:0 20px; height:60px; }
    .header-logo .sub { display:none; }
    .hamburger { display:flex; }

    .header-nav {
        position:fixed; top:0; right:-100%; width:100%; max-width:320px;
        height:100vh; 
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        flex-direction:column; align-items:flex-start;
        padding:100px 40px 40px; gap:0;
        box-shadow:-10px 0 30px rgba(0,0,0,.05);
        transition:right .4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .header-nav.open { right:0; }
    .header-nav a { font-size:1.2rem; font-weight:600; padding:20px 0; width:100%; border-bottom:1px solid rgba(0,0,0,.05); }
    .nav-divider { display:none; }
    .header-sns { margin-top:32px; gap:24px; }
    .header-sns a { font-size:1.5rem; }

    .menu-overlay {
        display:none; position:fixed; inset:0;
        background:rgba(0,0,0,.4); z-index:90;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .menu-overlay.active { display:block; }

    .container { padding:0 24px; }
    .split { flex-direction:column; gap:40px; }
    .split--reverse { flex-direction:column; }
    .hero-section { padding-top:calc(60px + 60px); padding-bottom:60px; }
    .section-padding { padding:80px 0; }
    
    .hero-headline { font-size:2.2rem; margin-bottom:16px; }
    .hero-sub { font-size:1.1rem; margin-bottom:32px; }
    .section-title { font-size:2rem; margin-bottom:20px; }
    .section-subtitle { font-size:1.2rem; }
    
    .photo-frame { aspect-ratio:4/3; border-radius: 20px; }
    .photo-frame--rounded-top { border-radius: 120px 120px 20px 20px; }
    .photo-frame--circle { max-width: 280px; }
    
    .profile-table th, .profile-table td { padding: 20px 0; display:block; width:100%; }
    .profile-table th { padding-bottom: 8px; border-bottom: none; color:var(--text-light); font-size:0.9rem; }
    .profile-table td { padding-top: 0; font-size:1.1rem; color:var(--text); }
    
    .hobby-icons { gap:32px; justify-content:space-between; }
    .cta-card { padding:40px 24px; border-radius: 24px; }
    .btn-cta, .btn-line { width:100%; }
    .site-footer { padding:40px 24px; }
}