/* ===================================================
   Tokens
=================================================== */
:root{
    --bg: #0b0f19;
    --bg-elevated: #10152a;
    --primary: #5b8cff;
    --secondary: #c9a876;
    --text: #f5f7fb;
    --sub: #8b93a7;
    --sub-dim: #5b6379;
    --card-bg: rgba(255,255,255,.035);
    --card-border: rgba(255,255,255,.07);
    --card-border-hover: rgba(201,168,118,.35);
    --glass-bg: rgba(255,255,255,.045);
    --glass-border: rgba(255,255,255,.14);
    --ease-quiet: cubic-bezier(0.16, 1, 0.3, 1);

    --font-en: "Inter", "Noto Sans JP", sans-serif;
    --font-jp: "Noto Sans JP", "Inter", sans-serif;
    --font-serif: "Cormorant Garamond", "Noto Serif JP", serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
    background:
        radial-gradient(900px 480px at 78% -10%, rgba(91,140,255,.06), transparent 60%),
        var(--bg);
    background-attachment:fixed;
    color:var(--text);
    font-family:var(--font-jp);
    line-height:1.75;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }

::selection{ background:rgba(91,140,255,.35); color:#fff; }

.container{
    max-width:1180px;
    margin:0 auto;
    padding:0 32px;
}

.eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-en);
    font-size:12px;
    font-weight:600;
    letter-spacing:.14em;
    color:var(--secondary);
    text-transform:uppercase;
}

.eyebrow::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--secondary);
    box-shadow:0 0 10px var(--secondary);
}

main, header, footer{ position:relative; z-index:1; }

/* ===================================================
   Header / Nav
=================================================== */
.header{
    position:sticky;
    top:0;
    z-index:50;
    background:rgba(11,15,25,.6);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.05);
    transition:background .3s ease, border-color .3s ease;
}

.header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 0;
}

.logo{
    font-family:var(--font-en);
    font-size:19px;
    font-weight:800;
    letter-spacing:.01em;
}

.logo span{
    color:var(--sub);
    font-weight:500;
    margin-left:6px;
    font-size:12px;
    letter-spacing:.18em;
    vertical-align:middle;
}

.nav{
    display:flex;
    align-items:center;
    gap:40px;
}

.nav a{
    font-family:var(--font-en);
    font-size:13.5px;
    font-weight:500;
    color:var(--sub);
    letter-spacing:.03em;
    transition:color .2s ease;
    position:relative;
}

.nav a::after{
    content:"";
    position:absolute;
    left:0; bottom:-6px;
    width:0; height:1px;
    background:var(--primary);
    transition:width .25s ease;
}

.nav a:hover{ color:var(--text); }
.nav a:hover::after{ width:100%; }

.header-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 22px;
    border-radius:999px;
    background:var(--primary);
    font-family:var(--font-en);
    font-size:13.5px;
    font-weight:600;
    color:#fff;
    transition:background .2s ease;
    white-space:nowrap;
}

.header-cta:hover{
    background:#4a7bee;
}

.nav-toggle{ display:none; }

/* ===================================================
   Hero
=================================================== */
.hero{
    padding:112px 0 96px;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.618fr 1fr;
    gap:56px;
    align-items:center;
}

.hero-content{
    animation:fadeUp .8s ease both;
}

.hero-content .eyebrow{ margin-bottom:24px; }

.hero-title{
    font-family:var(--font-serif);
    font-size:clamp(40px, 5.2vw, 64px);
    font-weight:600;
    line-height:1.3;
    letter-spacing:.005em;
    margin-bottom:26px;
}

.hero-title .accent{
    background:linear-gradient(120deg, var(--primary), var(--secondary));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.hero-sub{
    font-size:15.5px;
    color:var(--sub);
    max-width:480px;
    margin-bottom:38px;
    line-height:1.9;
}

.hero-buttons{
    display:flex;
    gap:14px;
    margin-bottom:52px;
}

.btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:15px 28px;
    border-radius:12px;
    font-family:var(--font-en);
    font-size:14px;
    font-weight:600;
    letter-spacing:.01em;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
    cursor:pointer;
    border:1px solid transparent;
}

.btn-primary{
    background:var(--primary);
    color:#fff;
}

.btn-primary:hover{
    background:#4a7bee;
}

.btn-outline{
    background:var(--card-bg);
    border-color:var(--card-border);
    color:var(--text);
}

.btn-outline:hover{
    border-color:var(--card-border-hover);
}

.hero-stack{
    display:flex;
    gap:36px;
}

.hero-stat{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.hero-stat strong{
    font-family:var(--font-en);
    font-size:26px;
    font-weight:800;
    color:var(--text);
}

.hero-stat span{
    font-size:12px;
    color:var(--sub-dim);
    letter-spacing:.03em;
}

/* --- Status glass card --- */
.status-card{
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-top:1px solid rgba(255,255,255,.28);
    border-radius:18px;
    padding:30px;
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    box-shadow:0 24px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
    animation:fadeUp .9s var(--ease-quiet) .1s both;
}

.status-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px;
}

.status-title{
    font-family:var(--font-en);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.14em;
    color:var(--sub);
    text-transform:uppercase;
}

.status-dot{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:var(--font-en);
    font-size:12px;
    font-weight:600;
    color:#7ce8a6;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(124,232,166,.1);
    border:1px solid rgba(124,232,166,.25);
}

.status-dot::before{
    content:"";
    width:6px; height:6px;
    border-radius:50%;
    background:#7ce8a6;
    box-shadow:0 0 8px #7ce8a6;
    animation:pulse 1.8s infinite;
}

.status-role{
    font-size:17px;
    font-weight:700;
    margin-bottom:6px;
}

.status-desc{
    font-size:13px;
    color:var(--sub);
    margin-bottom:24px;
    line-height:1.8;
}

.chip-row{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    margin-bottom:22px;
}

.chip{
    padding:9px 15px;
    border-radius:999px;
    background:rgba(255,255,255,.045);
    border:1px solid var(--card-border);
    font-family:var(--font-en);
    font-size:12.5px;
    font-weight:500;
    color:var(--text);
}

.status-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.06);
}

.status-foot-label{
    font-size:12px;
    color:var(--sub-dim);
}

.avatar-stack{
    display:flex;
}

.avatar-dot{
    width:30px; height:30px;
    border-radius:50%;
    border:2px solid var(--bg-elevated);
    margin-left:-9px;
    background:linear-gradient(135deg, var(--primary), var(--secondary));
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-en);
    font-size:10.5px;
    font-weight:700;
    color:#0b0f19;
}

.avatar-dot:first-child{ margin-left:0; }

/* ===================================================
   Section shared
=================================================== */
section{ padding:104px 0; }

.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
    margin-bottom:56px;
    flex-wrap:wrap;
}

.section-title{
    font-family:var(--font-serif);
    font-size:clamp(28px, 3.2vw, 38px);
    font-weight:600;
    letter-spacing:.005em;
    margin-top:14px;
}

.section-note{
    max-width:340px;
    font-size:13.5px;
    color:var(--sub);
    text-align:right;
    line-height:1.85;
}

/* ===================================================
   Works
=================================================== */
.works{
    border-top:1px solid rgba(255,255,255,.05);
}

.work-grid{
    display:grid;
    grid-template-columns:repeat(12, 1fr);
    gap:22px;
}

.work-grid .work-card:nth-child(1){ grid-column:span 7; }
.work-grid .work-card:nth-child(2){ grid-column:span 5; }
.work-grid .work-card:nth-child(3){ grid-column:span 5; }
.work-grid .work-card:nth-child(4){ grid-column:span 7; }

.work-card{
    position:relative;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:18px;
    padding:34px;
    transition:border-color .5s var(--ease-quiet), transform .5s var(--ease-quiet), box-shadow .5s var(--ease-quiet);
}

.work-card:hover{
    border-color:var(--card-border-hover);
    transform:translateY(-3px);
    box-shadow:0 20px 40px rgba(0,0,0,.22);
}

.work-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    margin-bottom:26px;
    position:relative;
}

.work-index{
    font-family:var(--font-en);
    font-size:12px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--sub-dim);
}

.work-thumb{
    width:56px; height:56px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.thumb-1{ background:linear-gradient(135deg, #2a2416, #171310); border:1px solid rgba(212,175,90,.3); }
.thumb-2{ background:linear-gradient(135deg, rgba(91,140,255,.18), rgba(110,231,255,.08)); border:1px solid rgba(91,140,255,.25); }
.thumb-3{ background:linear-gradient(135deg, rgba(70,205,140,.16), rgba(91,140,255,.08)); border:1px solid rgba(70,205,140,.25); }
.thumb-4{ background:linear-gradient(135deg, rgba(177,140,255,.18), rgba(91,140,255,.08)); border:1px solid rgba(177,140,255,.28); }

.work-title{
    font-family:var(--font-serif);
    font-size:21px;
    font-weight:600;
    margin-bottom:12px;
    position:relative;
}

.work-desc{
    font-size:13.5px;
    color:var(--sub);
    line-height:1.85;
    margin-bottom:22px;
    position:relative;
}

.work-scope{
    display:flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-en);
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.04em;
    color:var(--secondary);
    margin-bottom:18px;
    position:relative;
}

.work-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    position:relative;
}

.tag{
    font-family:var(--font-en);
    font-size:11.5px;
    font-weight:500;
    color:var(--sub);
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    padding:6px 11px;
    border-radius:999px;
}

.work-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    font-family:var(--font-en);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.06em;
    color:var(--sub);
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
    padding:4px 10px;
    border-radius:999px;
    margin-bottom:14px;
}

.work-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.06);
    position:relative;
}

.case-toggle{
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-family:var(--font-en);
    font-size:12.5px;
    font-weight:600;
    color:var(--secondary);
    background:none;
    border:none;
    cursor:pointer;
    padding:0;
}

.case-toggle .chevron{
    display:inline-block;
    transition:transform .25s ease;
    font-size:10px;
}

.work-card.is-open .case-toggle .chevron{
    transform:rotate(180deg);
}

.work-visit-link{
    font-family:var(--font-en);
    font-size:12.5px;
    font-weight:500;
    color:var(--sub);
    transition:color .2s ease;
}

.work-visit-link:hover{ color:var(--text); }

.case-study{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
}

.work-card.is-open .case-study{
    max-height:2400px;
    transition:max-height .6s ease;
}

.case-study-inner{
    margin-top:22px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.06);
    display:flex;
    flex-direction:column;
    gap:16px;
}

.case-row-label{
    font-family:var(--font-en);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--sub-dim);
    text-transform:uppercase;
    margin-bottom:6px;
}

.case-row-text{
    font-size:13px;
    color:var(--sub);
    line-height:1.85;
}

.case-row-text strong{
    color:var(--text);
    font-weight:600;
}

.case-learning{
    background:rgba(91,140,255,.06);
    border:1px solid rgba(91,140,255,.16);
    border-radius:12px;
    padding:16px 18px;
}

.work-card{
    position:relative;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:18px;
    padding:34px;
    transition:border-color .5s var(--ease-quiet), transform .5s var(--ease-quiet), box-shadow .5s var(--ease-quiet);
    
    /* 追加：カード全体をFlexboxにして高さを揃える */
    display: flex;
    flex-direction: column;
}

.work-desc{
    font-size:13.5px;
    color:var(--sub);
    line-height:1.85;
    margin-bottom:22px;
    position:relative;
    
    /* 追加：説明文のエリアを可変にして、下部の要素を一番下に押し込む */
    flex-grow: 1;
}

.work-actions{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.06);
    position:relative;
    
    /* 追加：他の要素に影響されず常にカードの底面にボタンを配置する */
    margin-top: auto; 
}

/* サムネイル表示エリア */
.work-thumb {
  width: 100%;
  height: 200px; /* カードのデザインに合わせて調整 */
  margin: 16px 0 20px;
  overflow: hidden;
  border-radius: 12px;
  background-color: #1a1a1e; /* 画像読み込み前のダミー背景色 */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* サムネイル画像自体の設定 */
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠に合わせて綺麗にトリミング */
  object-position: top center; /* トップページの上が見えるように配置 */
  transition: transform 0.4s ease; /* ホバー時の拡大用 */
}

/* カードまたはサムネイルホバー時に画像をうっすら拡大する高級感演出 */
.work-card:hover .work-thumb img {
  transform: scale(1.04);
}

/* 動画および画像共通のスタイル設定 */
.work-thumb img,
.work-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠に合わせてトリミング */
  object-position: top center;
  display: block;
  transition: transform 0.4s ease;
}

/* ホバー時の拡大演出 */
.work-card:hover .work-thumb video,
.work-card:hover .work-thumb img {
  transform: scale(1.04);
}

/* ===================================================
   Skills & About
=================================================== */
.split{
    border-top:1px solid rgba(255,255,255,.05);
}

.split-grid{
    display:grid;
    grid-template-columns:1.618fr 1fr;
    gap:22px;
    align-items:stretch;
}

.panel{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:20px;
    padding:36px;
}

.skills-panel .panel-label{
    margin-bottom:28px;
}

.panel-label{
    font-family:var(--font-en);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.14em;
    color:var(--sub);
    text-transform:uppercase;
}

.skill-row{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:20px;
    padding:18px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.skill-row:last-child{ border-bottom:none; padding-bottom:0; }
.skill-row:first-of-type{ padding-top:0; }

.skill-name{
    font-family:var(--font-en);
    font-size:14px;
    font-weight:700;
    color:var(--text);
    padding-top:2px;
}

.skill-items{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.skill-chip{
    font-size:12.5px;
    color:var(--sub);
    background:rgba(255,255,255,.035);
    border:1px solid var(--card-border);
    padding:7px 13px;
    border-radius:999px;
    transition:border-color .2s ease, color .2s ease;
}

.skill-chip:hover{
    border-color:var(--card-border-hover);
    color:var(--text);
}

.about-panel{
    display:flex;
    flex-direction:column;
}

.about-role{
    font-size:19px;
    font-weight:700;
    margin:14px 0 18px;
    line-height:1.6;
}

.about-text{
    font-size:13.5px;
    color:var(--sub);
    line-height:1.95;
    flex-grow:1;
}

.about-foot{
    display:flex;
    gap:28px;
    margin-top:26px;
    padding-top:22px;
    border-top:1px solid rgba(255,255,255,.06);
}

.about-foot-item strong{
    display:block;
    font-family:var(--font-en);
    font-size:20px;
    font-weight:800;
}

.about-foot-item span{
    font-size:11.5px;
    color:var(--sub-dim);
}

/* Strengthsのカード全体をFlexboxにする */
.strength-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* 本文部分を可変にして、下部の「活かし方」エリアを一番下に押し込む */
.strength-text {
    flex-grow: 1;
}

/* 下部の「Web制作での活かし方」エリアの配置調整（必要に応じて） */
.strength-link {
    margin-top: auto; /* カードの高さが伸びても常に最下部に固定される */
}

.strengths .section-title {
    display: block;
    /* 明朝体ではなく、端正なゴシック体を指定 */
    font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
    font-size: 30px;
    font-weight: 500; /* 700などの極太をやめ、500程度のすっきりした太さに変更 */
    color: #ffffff;
    line-height: 1.3;
    margin-top: 10px;
    letter-spacing: 0.04em;
}

/* ===================================================
   AI Workflow
=================================================== */
.ai-workflow{
    border-top:1px solid rgba(255,255,255,.05);
}

.ai-workflow-panel{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:20px;
    padding:40px;
}

.ai-tools-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:32px;
}

.ai-tool-chip{
    font-family:var(--font-en);
    font-size:12.5px;
    font-weight:600;
    color:var(--text);
    background:rgba(91,140,255,.1);
    border:1px solid rgba(91,140,255,.25);
    padding:8px 16px;
    border-radius:999px;
}

.ai-split{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
    margin-bottom:28px;
}

.ai-col{
    background:rgba(255,255,255,.02);
    border:1px solid var(--card-border);
    border-radius:14px;
    padding:24px;
}

.ai-col-label{
    font-family:var(--font-en);
    font-size:11px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    margin-bottom:16px;
    display:block;
}

.ai-col.ai-delegate .ai-col-label{ color:var(--sub-dim); }
.ai-col.ai-decide .ai-col-label{ color:var(--secondary); }

.ai-col ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
}

.ai-col li{
    font-size:13.5px;
    color:var(--sub);
    line-height:1.7;
    padding-left:16px;
    position:relative;
}

.ai-col li::before{
    content:"";
    position:absolute;
    left:0; top:9px;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--sub-dim);
}

.ai-col.ai-decide li::before{ background:var(--secondary); }

.ai-episode{
    background:rgba(91,140,255,.05);
    border:1px solid rgba(91,140,255,.14);
    border-radius:14px;
    padding:22px 24px;
    margin-bottom:20px;
}

.ai-episode-label{
    font-family:var(--font-en);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.1em;
    color:var(--secondary);
    text-transform:uppercase;
    margin-bottom:10px;
}

.ai-episode-text{
    font-size:13.5px;
    color:var(--sub);
    line-height:1.85;
}

.ai-stance{
    font-size:13.5px;
    color:var(--sub);
    line-height:1.9;
}

/* ===================================================
   Contact
=================================================== */
.contact{
    border-top:1px solid rgba(255,255,255,.05);
}

.cta-card{
    position:relative;
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-top:1px solid rgba(255,255,255,.28);
    border-radius:20px;
    padding:72px 60px;
    text-align:center;
    backdrop-filter:blur(24px) saturate(140%);
    -webkit-backdrop-filter:blur(24px) saturate(140%);
    box-shadow:0 24px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06);
}

.cta-eyebrow{
    position:relative;
    justify-content:center;
    margin-bottom:22px;
}

.cta-title{
    position:relative;
    font-family:var(--font-serif);
    font-size:clamp(28px, 3.6vw, 42px);
    font-weight:600;
    letter-spacing:.005em;
    margin-bottom:16px;
}

.cta-sub{
    position:relative;
    font-size:14px;
    color:var(--sub);
    max-width:440px;
    margin:0 auto 38px;
    line-height:1.9;
}

.contact-links{
    position:relative;
    display:flex;
    justify-content:center;
    gap:16px;
    flex-wrap:wrap;
}

.contact-link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 24px;
    background:rgba(255,255,255,.02);
    border:1px solid var(--card-border);
    border-radius:14px;
    font-family:var(--font-en);
    transition:border-color .2s ease;
    text-align:left;
}

.contact-link:hover{
    border-color:var(--card-border-hover);
}

.contact-icon{
    width:38px; height:38px;
    border-radius:10px;
    background:rgba(91,140,255,.14);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    flex-shrink:0;
}

.contact-label{
    font-size:10.5px;
    color:var(--sub-dim);
    letter-spacing:.08em;
    text-transform:uppercase;
    margin-bottom:3px;
}

.contact-value{
    font-size:13.5px;
    font-weight:600;
    color:var(--text);
}

/* ===================================================
   Footer
=================================================== */
.footer{
    padding:36px 0;
    border-top:1px solid rgba(255,255,255,.05);
}

.footer-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
}

.footer-copy{
    font-family:var(--font-en);
    font-size:12px;
    color:var(--sub-dim);
}

.footer-back{
    font-family:var(--font-en);
    font-size:12px;
    color:var(--sub);
    display:flex;
    align-items:center;
    gap:6px;
    transition:color .2s ease;
}

.footer-back:hover{ color:var(--secondary); }

/* ===================================================
   Reveal / Animations
=================================================== */
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes pulse{
    0%,100%{ opacity:1; }
    50%{ opacity:.35; }
}

.reveal{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 1s var(--ease-quiet), transform 1s var(--ease-quiet);
}

.reveal.active{
    opacity:1;
    transform:translateY(0);
}

@media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
    html{ scroll-behavior:auto; }
}

/* focus visibility */
a:focus-visible, button:focus-visible{
    outline:2px solid var(--secondary);
    outline-offset:3px;
    border-radius:4px;
}

/* ===================================================
   Responsive
=================================================== */
@media (max-width:980px){

    .hero-grid{ grid-template-columns:1fr; gap:48px; }
    .split-grid{ grid-template-columns:1fr; }
    .work-grid{ grid-template-columns:1fr; }
    .work-grid .work-card{ grid-column:1 / -1 !important; }
    .section-note{ text-align:left; max-width:100%; }
    .ai-split{ grid-template-columns:1fr; }
    .ai-workflow-panel{ padding:28px; }

}

@media (max-width:720px){

    .container{ padding:0 22px; }

    .nav{
        position:fixed;
        top:0; right:0;
        height:100vh;
        width:min(78vw, 300px);
        background:rgba(11,15,25,.97);
        backdrop-filter:blur(20px);
        border-left:1px solid rgba(255,255,255,.06);
        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        gap:30px;
        padding:32px;
        transform:translateX(100%);
        transition:transform .35s ease;
        z-index:60;
    }

    .nav.open{ transform:translateX(0); }

    .nav a{ font-size:17px; }

    .nav-toggle{
        display:flex;
        flex-direction:column;
        gap:5px;
        width:44px;
        height:44px;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        z-index:70;
        background:none;
        border:none;
        padding:6px;
    }

    .nav-toggle span{ width:24px; }

    .nav-toggle span{
        display:block;
        width:100%;
        height:2px;
        background:var(--text);
        transition:transform .25s ease, opacity .25s ease;
    }

    .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2){ opacity:0; }
    .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

    .header-cta{ display:none; }

    .hero{ padding:76px 0 64px; }
    section{ padding:72px 0; }

    .hero-buttons{ flex-direction:column; }
    .btn{ justify-content:center; }

    .hero-stack{ gap:26px; flex-wrap:wrap; }

    .skill-row{ grid-template-columns:1fr; gap:10px; }

    .cta-card{ padding:48px 26px; }

    .contact-links{ flex-direction:column; }
    .contact-link{ width:100%; }

    .footer-inner{ flex-direction:column; text-align:center; }

}

@media (max-width:400px){

    .container{ padding:0 18px; }

    .hero-title{ font-size:clamp(30px, 8vw, 36px); }

    .status-card{ padding:24px; }

    .work-card{ padding:26px; }

    .panel{ padding:26px; }

    .cta-card{ padding:40px 20px; }

    .contact-link{ padding:14px 18px; }

}

body.nav-open{ overflow:hidden; }


/* ===================================================
   Work Detail Page
=================================================== */
.detail-hero{
    padding:160px 0 60px;
    border-bottom:1px solid rgba(255,255,255,.06);
}

.detail-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-family:var(--font-en);
    font-size:12.5px;
    color:var(--sub);
    margin-bottom:28px;
}

.detail-back:hover{ color:var(--secondary); }

.detail-index{
    font-family:var(--font-en);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:.1em;
    color:var(--secondary);
    display:block;
    margin-bottom:16px;
}

.detail-title{
    font-family:var(--font-serif);
    font-size:clamp(32px,4.4vw,48px);
    font-weight:600;
    letter-spacing:.005em;
    margin-bottom:18px;
}

.detail-badge-row{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:24px;
}

.detail-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:32px;
    margin-top:32px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.06);
}

.detail-meta-item strong{
    display:block;
    font-family:var(--font-en);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--sub-dim);
    margin-bottom:6px;
}

.detail-meta-item span{
    font-size:13.5px;
    color:var(--text);
}

.detail-body{
    padding:80px 0 120px;
}

.detail-section{
    display:grid;
    grid-template-columns:220px 1fr;
    gap:48px;
    padding:44px 0;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.detail-section:first-child{ padding-top:0; }
.detail-section:last-child{ border-bottom:none; }

.detail-section-num{
    font-family:var(--font-en);
    font-size:12px;
    font-weight:700;
    letter-spacing:.08em;
    color:var(--sub-dim);
}

.detail-section-num span{
    display:block;
    font-size:22px;
    color:var(--secondary);
    margin-top:4px;
}

.detail-section-title{
    font-size:20px;
    font-weight:700;
    margin-bottom:16px;
}

.detail-section-text{
    font-size:14.5px;
    color:var(--sub);
    line-height:1.9;
    max-width:640px;
}

.detail-section-text strong{
    color:var(--text);
    font-weight:600;
}

.detail-highlight{
    background:rgba(91,140,255,.06);
    border:1px solid rgba(91,140,255,.16);
    border-radius:12px;
    padding:20px 22px;
    margin-top:16px;
}

.detail-note{
    font-size:12px;
    color:var(--sub-dim);
    font-style:italic;
}

.detail-nav-footer{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:40px 0;
    border-top:1px solid rgba(255,255,255,.06);
    flex-wrap:wrap;
    gap:20px;
}

.detail-nav-link{
    font-family:var(--font-en);
    font-size:13px;
    font-weight:600;
    color:var(--text);
    display:flex;
    align-items:center;
    gap:8px;
}

.detail-nav-link:hover{ color:var(--secondary); }

@media (max-width:720px){
    .detail-section{ grid-template-columns:1fr; gap:12px; }
    .detail-hero{ padding:130px 0 40px; }
}

/* ===================================================
   Strengths Section (完全版)
=================================================== */

/* 1. 見出し親要素 */
.strengths .section-title {
    display: block;
    font-size: 30px;
    color: #ffffff;
    line-height: 1.3;
    margin-top: 10px;
}

/* 2. 「43」の数字デザイン（上品なローマン体） */
.strengths .section-title .title-num {
    display: inline-block;
    font-family: "Cinzel", "Cormorant Garamond", serif;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1;
    margin-right: 6px;
    color: #ffffff;
    vertical-align: baseline;
    transform: translateY(1px);
}

/* 3. 「歳だからこそ...」テキスト部分（上品なしっぽり明朝） */
.strengths .section-title .title-text {
    font-family: "Shippori Mincho", "Noto Serif JP", serif;
    font-size: 28px;        /* 文字サイズを程よい大きさに調整 */
    font-weight: 600;       /* 太すぎず品のある太さ */
    letter-spacing: 0.04em; /* 微小な字間調整で美しく */
    color: #ffffff;
}

/* 4. カード内テキスト（カード内は読みやすさ重視でゴシック体） */
.strength-card {
    background: var(--card-bg, #121318);
    border: 1px solid var(--card-border, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    padding: 32px 28px;
    font-family: "Noto Sans JP", sans-serif;
}

.strength-num {
    font-family: "Cinzel", var(--font-en), sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--secondary, #c9a063);
    margin-bottom: 16px;
    display: block;
}

.strength-title {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 14px;
    color: #ffffff;
}

.strength-text {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 13.5px;
    font-weight: 400;
    color: var(--sub, #9a9a9e);
    line-height: 1.85;
    margin-bottom: 16px;
}

.strength-link {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12.5px;
    font-weight: 400;
    color: var(--sub-dim, #71717a);
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    line-height: 1.7;
}

.strength-link strong {
    color: var(--secondary, #c9a063);
    font-weight: 700;
}

/* ===================================================
   Learning / Future
=================================================== */
.learning-panel{
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:20px;
    padding:40px;
}

.learning-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:24px;
    margin-bottom:32px;
}

.learning-col-label{
    font-family:var(--font-en);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--sub-dim);
    margin-bottom:14px;
    display:block;
}

.learning-col ul{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:9px;
}

.learning-col li{
    font-size:13px;
    color:var(--sub);
    line-height:1.7;
    padding-left:15px;
    position:relative;
}

.learning-col li::before{
    content:"";
    position:absolute;
    left:0; top:8px;
    width:5px; height:5px;
    border-radius:50%;
    background:var(--sub-dim);
}

.learning-future-text{
    font-size:13.5px;
    color:var(--sub);
    line-height:1.9;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,.06);
}

@media (max-width:980px){
    .strengths-grid{ grid-template-columns:1fr; }
    .learning-grid{ grid-template-columns:1fr; }
}