@charset "UTF-8";
/* ============================================================
   about.css
   Aboutページ専用スタイル
   ============================================================ */

.about-page{
    --ap-bg2:#120810;
    --ap-pink:#f04597;
    --ap-line:#f04597;
    --ap-line-gray:#636363;
    --ap-blue:#29abe2;

    position:relative;
    overflow:hidden;

    background:
        radial-gradient(1200px 600px at 15% 0%, rgba(240,69,151,.10), transparent 60%),
        radial-gradient(1000px 700px at 100% 30%, rgba(154,114,255,.10), transparent 60%),
        var(--ap-bg2);
    padding:140px 0 120px;
}

.pink {
    color: var(--ap-pink);
}

.blue {
    color: var(--ap-blue);
}

.about-page .container{
    width:min(1320px,92%);
    margin:0 auto;
    position:relative;
    z-index:1;
}

/* data-splitの対象になる文字群（インライン要素でもtransformが効くように） */
.ap-ai-title span[data-split]{
    display:inline-block;
}

/* data-neonの発光色（背景に埋もれないよう固定） */
.ap-eyebrow[data-neon],
.ap-skill-title[data-neon]{
    color:#f2f7fb;
}

/* ---- SKILLSより上（ap-top）：ページ表示と同時に一斉着火 ---- */
@keyframes tcDropIn{
    from{ opacity:0; transform:translate3d(0,-70px,0); }
    to{ opacity:1; transform:translate3d(0,0,0); }
}
@keyframes tcDropInBig{
    from{ opacity:0; transform:translate3d(0,-90px,0); }
    to{ opacity:1; transform:translate3d(0,0,0); }
}

.about-page .ap-top [data-reveal]{
    opacity:0;
    animation:tcDropIn .8s cubic-bezier(.2,.8,.2,1) both;
    animation-delay:var(--d,0s);
}

.about-page .ap-top .ap-photo[data-reveal],
.about-page .ap-top .ap-info[data-reveal]{
    animation-name:tcDropInBig;
}

.about-page .ap-top [data-split] .char{
    animation:tcNeonIn .9s cubic-bezier(.2,.8,.2,1) both;
    animation-delay:calc(var(--i,0) * .035s + var(--d,0s));
}

.about-page .ap-top [data-neon]{
    animation:tcNeonFlicker var(--flick,3.2s) linear .4s infinite;
}

/* ---- SKILLS以降：スクロールで画面に入ったタイミングで着火（元の仕組み） ----
   base.cssの[data-reveal]は下から迫り上がる向きなので、
   ここだけ「上から落ちてくる」向きに --p/--y を使って上書きする。 */
.about-page .ap-section-head [data-reveal],
.about-page .ap-skills [data-reveal],
.about-page .ap-lower [data-reveal]{
    transform:translate3d(0, calc(var(--y) + (1 - var(--p)) * -70px), 0);
}

.about-page .ap-skills .ap-skills-box[data-reveal],
.about-page .ap-lower .ap-software-row[data-reveal],
.about-page .ap-lower .ap-ai-card[data-reveal]{
    transform:translate3d(0, calc(var(--y) + (1 - var(--p)) * -90px), 0);
}
/* [data-split]の見出し文字・[data-neon]のラベルはここでは上書きしないので、
   SKILLS・AI TECHNOLOGY.・各スキルの見出しはスクロール連動のまま動く */

.about-page a{
    color:inherit;
}

/* ---- 上部：ABOUT見出し＋写真＋プロフィール ---- */

.ap-top{
    display:grid;
    grid-template-columns:1fr 1.05fr 1fr;
    gap:60px;
    align-items:start;
}

.ap-eyebrow{
    display:block;
    font-family:var(--font-en);
    font-size:.85rem;
    letter-spacing:.4em;
    color:var(--ap-pink);
    margin-bottom:18px;
}

.ap-heading{
    font-family:var(--font-en);
    font-weight:500;
    font-size:2.6rem;
    line-height:1.25;
    letter-spacing:.03em;
    margin-bottom:28px;
}

.ap-heading span{
    display:block;
}

.ap-highlight{
    display:inline-block;
    background:var(--ap-pink);
    color:#1a0b14;
    font-weight:700;
    padding:12px 22px;
    font-size:1.15rem;
    letter-spacing:.05em;
    margin-bottom:30px;
}

.ap-lead p{
    font-size:.92rem;
    line-height:2;
    color:var(--text-dim);
    margin-bottom:1.4em;
}

.ap-photo{
    overflow:hidden;
    border: 1px solid var(--ap-line-gray);
}

.ap-photo img{
    width:100%;
    display:block;
}

.ap-role{
    font-family:var(--font-en);
    font-weight:300;
    font-size:1.5rem;
    line-height:1.5;
    letter-spacing:.03em;
    padding-bottom:26px;
    border-top:1px solid var(--ap-line-gray);
    padding-top:26px;
}

.ap-role .pink{ color:var(--ap-pink); }

.ap-info{
    border-bottom:1px solid var(--ap-line-gray);
    margin-bottom:30px;
}

.ap-info dl{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding:20px 0 10px;
    border-top:1px solid var(--ap-line-gray);
    font-family:var(--font-mono);
}

.ap-info dt{
    font-size:.78rem;
    letter-spacing:.15em;
    color:var(--text-dim);
}

.ap-info dd{
    margin:0;
    font-size:.85rem;
    text-align:right;
}

.ap-sns{
    display:flex;
    gap:25px;    
    border-bottom:1px solid var(--ap-line-gray);
    padding-bottom:30px;
}

.ap-sns a{
    width:30px;
    height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--ap-pink);
    border-radius: 8px;
    transition:.3s;
}

.ap-sns a:hover{
    background:var(--ap-pink);
}

.ap-sns a:hover img{
    filter:brightness(0) saturate(100%);
}

/* ---- SKILLS ---- */

.ap-section-head{
    display:flex;
    align-items:center;
    gap:24px;
    margin:110px 0 50px;
}

.ap-section-head h2{
    font-family:var(--font-en);
    font-size:1.6rem;
    letter-spacing:.15em;
    color:var(--ap-pink);
    white-space:nowrap;
}

.ap-section-head::after{
    content:"";
    flex:1;
    height:1px;
    background:linear-gradient(90deg,var(--ap-pink),transparent);
}

.ap-skills{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}

.ap-skills-list{
    list-style-type: disc;
    list-style-position: inside;
}

.ap-skills-list li::marker {
  color:var(--ap-pink);
}

.ap-skills-box {
    padding-left:32px;
    border-left:1px solid var(--ap-line-gray);
}

.ap-skills li:first-child{
    padding-left:0;
    border-left:none;
}

.ap-skill-icon{
    width:56px;
    height:56px;
    margin-bottom:24px;
}

.ap-skill-title{
    font-family:var(--font-mono);
    font-size:.95rem;
    letter-spacing:.05em;
    margin-bottom:18px;
    color:var(--text);
}

.ap-skills ul{
    font-size:.85rem;
    line-height:2;
    color:var(--text-dim);
}

/* ---- SOFTWARE / AI TECHNOLOGY ---- */

.ap-lower{
    display:grid;
    grid-template-columns:1fr 1.15fr;
    gap:80px;
    margin-top:60px;
    padding-top:60px;
    padding-bottom:60px;
    border-top:1px solid var(--ap-line);
    border-bottom:1px solid var(--ap-line);
}

.ap-software{
    border-right: 1px solid var(--ap-line-gray);
}

.ap-software-list{
    display:flex;
    flex-direction:column;
    gap:26px;
}

.ap-software-row{
    display:grid;
    grid-template-columns:56px 1fr auto;
    align-items:center;
    gap:20px;
}

.ap-software-badge{
    width:56px;
    height:56px;
}

.ap-software-name{
    font-size:.95rem;
    letter-spacing:.02em;
}

.ap-dots{
    display:flex;
    gap:8px;
    margin-right: 50px;
}

.ap-dots span{
    width:14px;
    height:14px;
    border-radius:50%;
    border:1.5px solid var(--dot-color,var(--ap-pink));
    background:transparent;
}

.ap-dots span.is-filled{
    background:var(--dot-color,var(--ap-pink));
}

.ap-ai-title{
    font-family:var(--font-en);
    font-size:2.2rem;
    letter-spacing:.05em;
    margin-bottom:30px;
}

.ap-ai-title .pink{ color:var(--ap-pink); }

.ap-ai-images{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:2px;
    margin-bottom:26px;
    overflow:hidden;
}

.ap-ai-images img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ap-ai-lead{
    font-size:.9rem;
    line-height:1.9;
    color:var(--text-dim);
    margin-bottom:34px;
}

.ap-ai-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.ap-ai-card{
    border:1px solid;
    padding:22px 18px;
    font-size:.8rem;
    line-height:1.9;
    color:var(--text-dim);
}

.ap-ai-card h3{
    font-family:var(--font-en);
    font-size:1.05rem;
    letter-spacing:.03em;
    margin-bottom:14px;
    color:var(--text);
}

.ap-ai-card ul{
    list-style-type: circle;
    list-style-position: inside;
}

.ap-ai-card.is-pink{ border-color:var(--ap-pink); }
.ap-ai-card.is-pink h3{ color:var(--ap-pink); }

.ap-ai-card.is-cyan{ border-color:var(--cyan); }
.ap-ai-card.is-cyan h3{ color:var(--cyan); }

.ap-ai-card.is-violet{ border-color:var(--violet); }
.ap-ai-card.is-violet h3{ color:var(--violet); }

/* ---- SP ---- */

@media(max-width:900px){

    .ap-top{
        grid-template-columns:1fr;
        gap:50px;
    }

    .ap-skills{
        grid-template-columns:repeat(2,1fr);
        row-gap:40px;
    }

    .ap-skills li:nth-child(3){
        padding-left:0;
        border-left:none;
    }

    .ap-lower{
        grid-template-columns:1fr;
        gap:60px;
    }

    .ap-ai-grid{
        grid-template-columns:1fr;
    }

    .ap-heading{
        font-size:2rem;
    }

}