:root{
    --fade-step: 700ms;
    --fade-dur:  800ms;
    --whale-sway: 4s;
    --drop: 0 6px 16px rgba(0,0,0,.25);
    /* ヘッダー色（不透明白に固定） */
    --shell-bg:#fff;
    --shell-border:#fff;
    --ink:#0e2550;
    --ink-weak:#2b3b65;
  }
  /* 背景を1枚画像に（自己紹介と同じフルブリード想定） */
  html,body{height:100%;}
/* すべての要素で border/padding を幅に含める（はみ出し防止） */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* 画像は枠内におさめる */
img { max-width: 100%; height: auto; }
  body{
    margin:0; overflow-x:hidden;
    font-family:"Hiragino Sans","Helvetica Neue",Arial,sans-serif;
    background: #000 url("../images/bg_earth.jpg") center/cover fixed no-repeat; /* ←差し替え */
  }
/* スマホは“全体表示 + 余白色 + 固定をオフ”にして見やすく */
@media (max-width: 768px){
  body{
    background:
      linear-gradient(rgba(255,255,255,.25), rgba(255,255,255,.25)),
      url("../images/bg_earth.jpg") center top/contain no-repeat #f4f7ff;
    background-attachment: scroll; /* ← fixedを解除（モバイルのズーム・カクつき対策） */
  }
}
  /* 固定ヘッダー（前のまま・完全白） */
  .site-header{
    position: fixed; top:16px; left:16px; right:16px; z-index:9999; pointer-events:none;
  }
  .nav-shell{
    pointer-events:auto;
    display:flex; align-items:center; gap:18px;
    padding:12px 14px; background:var(--shell-bg);
    border:2px solid var(--shell-border); border-radius:14px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
  }
  .brand{display:flex; text-decoration: none; align-items:center; gap:10px; white-space:nowrap; padding:8px 12px; border-radius:10px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.06) inset;}
  .brand .logo{font-weight:900; font-size: clamp(18px,2.4vw,22px); letter-spacing:.06em; color:var(--ink);}
  .brand .tag{margin-left:6px; font-size:11px; letter-spacing:.1em; color:#6b7aa6;}
  .nav{display:flex; align-items:center; gap:8px;}
  .nav a{padding:10px 14px; border-radius:10px; color:var(--ink-weak); text-decoration:none; font-weight:700; font-size:14px; transition:.15s;}
  .nav a:hover{ background:#fff; color:var(--ink); transform:translateY(-1px); }
  .cta{ margin-left:auto; }
  .cta a{ background:#111827; color:#fff !important; padding:10px 16px; border-radius:10px; text-decoration:none; font-weight:700; box-shadow:0 6px 16px rgba(0,0,0,.18); }

  .hamburger{ display:none; margin-left:auto; width:40px; height:40px; border-radius:10px; background:#fff; border:1px solid #e5e7eb; align-items:center; justify-content:center; }
  .hamburger span{ width:20px; height:2px; background:#111; position:relative; display:block; }
  .hamburger span:before,.hamburger span:after{ content:""; position:absolute; left:0; width:20px; height:2px; background:#111; }
  .hamburger span:before{ top:-6px; } .hamburger span:after{ top:6px; }

  @media (max-width: 900px){
    .nav{ display:none; } .cta{ display:none; } .hamburger{ display:flex; }
    .nav.open{
      position:absolute; top:64px; left:16px; right:16px;
      display:flex; flex-direction:column; gap:6px;
      background:#fff; border:2px solid #fff;
      border-radius:12px; padding:10px; box-shadow:0 10px 24px rgba(0,0,0,.12);
    }
    .nav.open a{ padding:12px 10px; }
    .brand .tag{ display:none; }
    .brand{ min-width:0; padding:8px 10px; }
    .brand .logo{
        font-size: clamp(16px, 4.6vw, 20px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
  }
  /* ステージ：透明（位置決めだけに使用） */
  .wrap{ max-width:min(1200px,94vw); margin:12vh auto 6vh; padding: clamp(12px,2vw,18px); }
  .stage{
    position: relative; width:100%; aspect-ratio:16/9;
    /* ← 背景・角丸・影はナシに */
    background: transparent; border-radius: 0; box-shadow:none; overflow:visible;
  }

  /* 動物共通（白フチを付与） */
  .piece{
    position:absolute; opacity:0; transform:translateY(18px) scale(1);
    user-select:none; -webkit-user-drag:none;
    filter:
      drop-shadow(2px 0 0 #fff)
      drop-shadow(-2px 0 0 #fff)
      drop-shadow(0 2px 0 #fff)
      drop-shadow(0 -2px 0 #fff);
    transition: opacity var(--fade-dur) ease, transform var(--fade-dur) ease;
    will-change: opacity, transform;
    z-index:2;
  }
  .piece.in{ opacity:1; transform:translateY(0) scale(1); }

  /* 配置（背景に直接重ねる） */
  .leopard{ left: 6%;  top: 1%; width: 27%; }
  .whale  { right: 5%; top: 12%; width: 28%; }
  .cat    { left: 6%;  bottom: 7%; width: 22%; }
  .penguin{ right: 6%; bottom: 7%; width: 24%; }
  .dog    { left: 35%; bottom: 5%; width: 32%; z-index:3; } /* 最前面でOK */

  /* くじらはスイング */
  .whale.sway{ animation: whaleSway var(--whale-sway) ease-in-out infinite; transform-origin:60% 45%; }
  @keyframes whaleSway{
    0%{transform:translateY(0) rotate(-6deg);}25%{transform:translateY(-6px) rotate(-2deg);}
    50%{transform:translateY(0) rotate(6deg);}75%{transform:translateY(6px) rotate(2deg);}
    100%{transform:translateY(0) rotate(-6deg);}
  }

  /* 犬は最後ズーム */
  .dog.pop{ animation: dogPop 800ms cubic-bezier(.2,.9,.2,1.05) both; }
  @keyframes dogPop{
    0%{opacity:0;transform:translateY(18px) scale(1.35);}
    40%{opacity:1;transform:translateY(0) scale(0.96);}
    100%{opacity:1;transform:translateY(0) scale(1);}
  }

  @media (max-width: 600px){
    .leopard{ width: 32%; top: 12%; left: 4%; }
    .whale{ width: 34%; right: 2%; top: 14%; }
    .cat{ width: 26%; bottom: 5%; left: 4%; }
    .penguin{ width: 26%; bottom: 5%; right: 4%; }
    .dog{ width: 36%; left: 32%; bottom: 4%; }
  }
  @media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
  }
  /* ===== 右下：Scrollラベル + 丸ボタン ===== */
  .scroll-wrap{
    position: fixed; right: 18px; bottom: 18px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    z-index: 10000; transition: opacity .2s ease, transform .2s ease;
  }
  .scroll-wrap.hidden{ opacity:0; pointer-events:none; transform: translateY(8px); }

  .scroll-label{
    font-size: 15px; line-height: 1;
    color: var(--ink);
    user-select: none;
  }

  .scroll-dot{
    width: 64px; height: 64px; border-radius: 50%;
    display:flex; align-items:center; justify-content:center;
    background:#111827; color:#fff; border:2px solid #fff;
    box-shadow: 0 10px 24px rgba(0,0,0,.22);
    cursor:pointer;
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .scroll-dot:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.28); }
  .scroll-dot:active{ transform: translateY(0); }
  .scroll-dot svg{ width:22px; height:22px; }
/* ===== About（更新）===== */
.about{
  position: relative;
  min-height: 90vh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 48px);
  background-image: url("../images/about-bg.jpg"); /* 1枚目の作品写真 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  isolation: isolate;
}
.about__overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35));
  z-index:-1;
}

/* カードはブロックに。中で float を使って回り込み */
.about__card{
  width:min(980px, 92vw);
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow: 0 20px 50px rgba(0,0,0,.18);
  padding: clamp(18px, 3.2vw, 36px);
}
.about__card h2{
  margin:0 0 .6em;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 900;
  letter-spacing:.02em;
  background: linear-gradient(90deg,#ff6ec4,#7873f5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 左下に置いてテキストを回り込ませる */
.about__photo{
  float: left;
  width: clamp(260px, 30%, 360px);
  margin: .2rem 1.4rem 1rem 0;        /* 右と下に余白 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.16);
  /* 角丸形状で回り込み。対応ブラウザでは綺麗に沿う */
  shape-outside: inset(0 round 12px);
}
.about__photo img{ display:block; width:100%; height:auto; }
/* CTAは回り込みを解除して写真の下から表示 */
.about__cta{ clear: both; margin-top: .8rem; }
/* 右下に回り込み（新規） */
.about__photo--right{
  float: right;
  width: clamp(260px, 32%, 380px);
  margin: .2rem 0 1rem 1.4rem;          /* 右側なので左に余白 */
  shape-outside: inset(0 round 12px);   /* 角丸に沿ってテキスト回避 */
}
/* サブ見出し（任意） */
.about__subhead{
  margin: .8rem 0 .4rem;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 800;
  color: #0e2550;
}
/* 本文 */
.about__text p{
  margin:.7em 0;
  line-height:1.9;
  color:#1f2937;
  font-size: clamp(15px, 1.6vw, 16.5px);
}

/* クリアで写真の“下”から始まるように */
.about__cta{
  clear: left;
  margin-top: .8rem;
}
.about__cta a {
  color: #007BFF; /* 好きな青に変更 */
  text-decoration: underline; /* 下線を出す場合 */
}

.about__cta a:hover {
  color: #0056b3; /* ホバー時に少し濃い青 */
}

/* ===== スマホで写真の下から文章を始める ===== */
@media (max-width: 860px){
  /* 写真はフル幅・回り込み停止 */
  .about__photo,
  .about__photo--left,
  .about__photo--right{
    float: none !important;
    width: 100% !important;
    margin: .6rem 0 1rem !important;
    shape-outside: none !important;
  }
  .about__photo img{
    display:block;
    width:100%;
    height:auto;
    border-radius:12px;
  }

  /* 文章は必ず写真の下から（回り込み解除の“確実化”） */
  .about__text{
    clear: both;           /* ← これが効きます */
  }

  /* ついでに可読性を少し上げる */
  .about__text p{
    line-height: 1.9;
    font-size: 16px;       /* お好みで 15–17px */
  }

  /* カードの左右も少し広めに（端に張り付かない） */
  .about-card{
    padding: 16px 16px 20px;
    max-width: 100%;       /* 画面にフィット */
    margin-inline: auto;
  }
}
/* 詳しくはこちらリンク */
.about__more{
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  font-weight: 600;
  margin-left: 1em;
  color: #0e2550;
  text-decoration: none;
  background: rgba(14,37,80,0.06);
  padding: 0.25em 0.6em;
  border-radius: 4px;
  transition: background-color .2s ease, color .2s ease;
}
.about__more:hover{
  background: rgba(14,37,80,0.14);
  color: #ff6ec4; /* グラデに合わせてピンク系 */
}

/* モバイルでは改行して下に */
@media (max-width: 600px){
  .about__more{
    display: block;
    margin-left: 0;
    margin-top: 0.3em;
    width: fit-content;
  }
}
/* ===== Gallery ===== */
.gallery-section{
  position: relative;
  min-height: 80vh;
  padding: clamp(56px, 10vw, 96px) 0;
  background: #000 url("../images/gallery-bg.jpg") center/cover no-repeat fixed; /* ← この画像を /PXL_20250206_015045624.jpg に */
}
.gallery-section::before{
  /* 背景の上に薄い暗幕（作品が見やすくなる） */
  content:""; position:absolute; inset:0; background: rgba(0,0,0,.35);
}
.gallery-inner{
  position: relative; z-index: 1;
  max-width: min(1200px, 94vw);
  margin: 0 auto;
}
.section-heading{
  display:flex; align-items:center; gap:16px;
  margin-bottom: clamp(18px, 3vw, 28px);
}
.section-heading h2{
  margin:0; padding:.2em .6em;
  font-size: clamp(20px, 3.2vw, 28px);
  font-weight: 900; letter-spacing:.08em;
  color:#0e2550; background:#fff; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
.section-heading .more{
  margin-left:auto; align-self:flex-end;
  display:inline-block; padding:.6em 1em;
  font-weight:700; text-decoration:none;
  color:#0e2550; background:#fff; border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.section-heading .more:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.18); }

/* ===== Gallery：背景写真の上に白カード ===== */
.gallery-section{
  position: relative;
  min-height: 80vh;
  padding: clamp(56px, 10vw, 96px) 0;
  background: #000 url("../images/gallery-bg.jpg") center/cover no-repeat fixed; /* 任意の背景写真 */
}
.gallery-section::before{ content:""; position:absolute; inset:0; background: rgba(0,0,0,.32); }
.gallery-inner{ position:relative; z-index:1; max-width:min(1200px,94vw); margin:0 auto; }

/* 白いカード（aboutと同じ雰囲気） */
.gallery-card{
  background:#fff; border-radius:16px;
  box-shadow: 0 14px 30px rgba(0,0,0,.16);
  padding: clamp(18px,2.6vw,28px);
}

/* 見出し */
.section-heading{ display:flex; align-items:center; gap:14px; margin-bottom: clamp(12px,2.4vw,18px); }
.section-heading h2{
  margin:0; font-weight:900; letter-spacing:.08em;
  font-size: clamp(20px,3.2vw,28px); color:#0e2550;
}
.section-heading .more{
  margin-left:auto; padding:.5em .9em; border-radius:10px; text-decoration:none;
  background:#0e2550; color:#fff; font-weight:700;
  box-shadow:0 6px 16px rgba(0,0,0,.12); transition: transform .15s ease, box-shadow .15s ease;
}
.section-heading .more:hover{ transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.2); }

/* ===== マソンリー（高さ可変・すき間少なめ・横幅やや広め） ===== */
.gallery-masonry{
  column-count: 3;                  /* 3 列 */
  column-gap: 12px;                 /* すき間を小さく */
}
@media (max-width: 980px){ .gallery-masonry{ column-count: 2; } }
@media (max-width: 560px){ .gallery-masonry{ column-count: 1; } }

.gitem{
  break-inside: avoid;              /* 途中で分割しない */
  margin: 0 0 12px;                 /* 縦すき間 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  background:#fff;                  /* 作品まわりも白で統一 */
  position: relative;
  transition: transform .22s ease, box-shadow .22s ease, filter .22s ease;
  will-change: transform;
  z-index: 0;
}
/* 透かし文字 */
.gitem::after {
  content: "YU OKUYAMA";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.35); /* 白っぽい透かし */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  white-space: nowrap;
}
.gitem img{
  width: 100%;
  height: auto;                     /* 縦横比を保持して全景表示 */
  display:block; width:100%; height:auto;
  transition: transform .22s ease;
  will-change: transform;
}

/* スクロールでフェードイン */
.reveal{ opacity:0; transform: translateY(18px); }
.reveal.show{ opacity:1; transform: translateY(0); transition: opacity .6s ease, transform .6s ease; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none !important; } }
/* ホバー/フォーカス時にだけ拡大（親ごと持ち上げ） */
.gitem:hover,
.gitem:focus-within,
.gitem.enlarge {             /* ←モバイル用にJSで付与 */
  transform: scale(1.12);
  z-index: 5;
  box-shadow: 0 18px 50px rgba(0,0,0,.22);
}

/* 周囲との差を少しだけ出す（任意） */
.gitem:hover img,
.gitem:focus-within img,
.gitem.enlarge img{
  transform: translateZ(0);  /* ぼけ防止 */
}

/* 動きが苦手な人向け */
@media (prefers-reduced-motion: reduce){
  .gitem, .gitem img{ transition:none !important; }
  .gitem:hover, .gitem:focus-within{ transform:none; box-shadow:none; }
}
/* セクションは白で固定（他セクションに左右されない） */
.insta-wrap{ padding:72px 0; background:#fff; }
.insta-wrap .container{ width:min(1100px,92vw); margin:0 auto; }

.section-head{ display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; }
.section-head h2{ margin:0; font-size:clamp(20px,2.6vw,26px); font-weight:900; color:#111; }
.section-head .more{ margin-left:auto; color:#0e2550; background:#f1f5ff; padding:8px 12px; border-radius:10px; font-weight:700; text-decoration:none; }
.section-head .more:hover{ background:#e7efff; }

/* 3×3グリッド（レスポンシブで2→1列に） */
.insta-tiles{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;              /* すき間は少なめ */
}
@media (max-width: 900px){ .insta-tiles{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .insta-tiles{ grid-template-columns: 1fr; } }

/* 正方形タイル。画像は全景表示（切れない）で統一高さ */
.ig{
  position:relative; display:block; overflow:hidden;
  border-radius:12px; background:#f3f4f6;
  box-shadow:0 4px 12px rgba(0,0,0,.08);
  aspect-ratio: 1 / 1;               /* ← 正方形に統一 */
}
.ig img{
  width:100%; height:100%; display:block;
  object-fit: cover;                  /* 塗りつぶし */
  object-position: center;
  transition: transform .18s ease;
}
.ig:hover img{ transform: scale(1.04); }

  /* スケルトン */
  .ph{
    aspect-ratio:1/1; border-radius:12px;
    background: linear-gradient(90deg,#eee,#f6f6f6,#eee);
    background-size: 200% 100%;
    animation: sh 1.2s linear infinite;
  }
  @keyframes sh{ to{ background-position: 200% 0; } }

  /* 小さめ画面で2列 */
  @media (max-width: 700px){
    .insta-grid{ grid-template-columns: repeat(2,1fr); }
  }
/* —— レイアウト・背景 —— */
.section-works{
  position: relative;
  padding: clamp(56px, 7vw, 84px) 16px;
  overflow: hidden;
}
.works-bg{
  position: absolute;    /* セクション内で一緒に流れる */
  inset: 0;
  background: url("../images/bg-works.jpg") center/cover no-repeat;
  z-index: 0;
}
.section-works{ position: relative; }   /* 念のため親を相対配置に */
/* —— カード —— */
.works-card{
  position: relative; z-index: 1;
  max-width: 1100px; margin: 0 auto;
  background:#fff; border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.16);
  padding: clamp(18px, 2.6vw, 28px);
}
.works-head{
  display:flex; align-items:center; gap:12px;
  margin-bottom: clamp(14px, 2vw, 18px);
}
.works-head h2{
  margin:0;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 900;
  letter-spacing:.02em;
}
.works-head .more{
  margin-left:auto;
  font-weight:700;
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  background:#111827; color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
}
.works-head .more:hover{ transform: translateY(-1px); }

/* —— 本文2カラム —— */
.works-body{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap: clamp(18px, 2.6vw, 28px);
}
@media (max-width: 880px){
  .works-body{ grid-template-columns: 1fr; }
}

/* —— 写真 —— */
.works-photo{
  margin:0; border-radius:14px; overflow:hidden;
  background:#f3f4f6;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.works-photo img{ width:100%; height:auto; display:block; }
.works-photo figcaption{
  font-size:12px; color:#6b7280; padding:8px 10px;
}

/* —— 実績リスト —— */
.works-list{
  margin:0; padding:0 0 0 22px; /* olのカウンタは活かす */
  display:flex; flex-direction:column; gap:16px;
  counter-reset: num;
}
.works-list li{
  list-style: none;
  background:#fafafa;
  border:1px solid #ececec;
  border-radius:12px;
  padding:14px 14px 14px 18px;
  position:relative;
}
.works-list li::before{
  counter-increment: num;
  content: counter(num) ".";
  position:absolute; left:-22px; top:14px;
  font-weight:900; color:#9ca3af;
}
.work-row{
  display:grid;
  grid-template-columns: 84px 1fr;
  gap:10px;
}
.work-year{
  font-weight:800; color:#374151;
}
.work-title{
  font-weight:800; margin-bottom:4px;
}
.work-detail{
  color:#374151; line-height:1.7;
}
.work-meta{
  margin-top:6px; font-size:13px; color:#6b7280;
}
.work-link{
  margin-left:8px; font-size:13px; text-decoration:underline;
}
/* Contact Section */
.sec-contact{ position: relative; padding:84px 0; }
.sec-contact .container{ width:min(880px,92vw); margin:0 auto; position:relative; z-index:2; }

.has-bg .sec-bg{
  position:absolute; inset:0;
  background-image: var(--bg);
  background-size: cover; background-position:center;
}
.has-bg .sec-bg::after{
  content:""; position:absolute; inset:0;
  background: rgba(255,255,255,.38);
}

/* 白カード */
.contact-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
  padding:28px;
}
.contact-card .section-head{
  margin-bottom: clamp(18px, 3vw, 28px);
}
.contact-card h2{
  font-size: clamp(22px, 3vw, 28px);
  font-weight:900;
  margin:0;
}

/* フォームデザイン */
.contact-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.form-group{
  display:flex;
  flex-direction:column;
}
.form-group label{
  font-weight:700;
  margin-bottom:6px;
  color:#0e2550;
}
.form-group label span{ color:#e11d48; }

.contact-form input,
.contact-form select,
.contact-form textarea{
  border:1px solid #d1d5db;
  border-radius:8px;
  padding:10px 12px;
  font-size:15px;
  line-height:1.5;
  transition:border-color .2s, box-shadow .2s;
  background:#f9fafb;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.2);
  background:#fff;
}

/* 送信ボタン */
.submit-wrap{
  text-align:center;
  margin-top:10px;
}
.btn-submit{
  background: linear-gradient(135deg,#2563eb,#1e3a8a);
  color:#fff;
  font-weight:700;
  font-size:16px;
  border:none;
  padding:12px 28px;
  border-radius:9999px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.15);
}
.btn-submit:active{
  transform:translateY(0);
}

/* モバイル */
@media (max-width: 520px){
  .contact-card{ padding:20px; }
}
/* ===== Footer ===== */
.site-footer{
  background:#fff;       /* フッター全体を白で */
  width:100%;
  padding: 48px 0;
  border-top: 2px solid #eee;
  position: relative;
}

.footer-inner{
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 縦並びメニュー */
.footer-nav{
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 380px;
}
.footer-nav a{
  text-decoration: none;
  color: #0e2550;
  font-weight: 800;
  font-size: clamp(16px, 1.7vw, 18px);
  padding: 10px 12px;
  border-radius: 10px;
  transition: background-color .15s ease, transform .15s ease;
}
.footer-nav a:hover{
  background: #f1f5ff;
  transform: translateX(4px);
}

/* コピーライト */
.copyright{
  margin-top: 18px;
  color:#6b7280;
}

/* 右側の固定イラスト */
.footer-art{
  position: absolute;
  right: max(16px, 5%);
  bottom: -6px;
  width: clamp(540px, 22vw, 260px);
  pointer-events: none;
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff);
  z-index: 1;
}

/* ゆらぎアニメ */
.sway{
  animation: footerSway 7s ease-in-out infinite;
  transform-origin: 60% 45%;
}
@keyframes footerSway{
  0%{transform: translateY(0) rotate(-3deg)}
  50%{transform: translateY(-6px) rotate(3deg)}
  100%{transform: translateY(0) rotate(-3deg)}
}

/* レスポンシブ対応 */
@media (max-width: 700px){
  .footer-art{ right: 8px; width: 34vw; opacity: .9; }
}
@media (max-width: 480px){
  .footer-art{ display:none; }
}
@media (max-width: 860px) {
  /* ===== About ===== */
  .about {
    background-size: cover;          /* 画面いっぱいにフィット */
    background-position: center;
    background-attachment: scroll;   /* iOSのfixedバグ回避 */
    min-height: 100vh;               /* スマホ画面の縦サイズにフィット */
  }

  /* ===== Gallery ===== */
  .gallery-section {
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
    min-height: 100vh;
  }

  /* ===== Works ===== */
  .works-bg {
    background-size: cover;
    background-position: center;
    background-attachment: scroll;  /* 元々absoluteで流れる背景 → fixed無効化 */
    min-height: 100vh;
  }
}