/* ============================================
   AMIVERD 共通スタイルシート
   index.html / gallery-still-bloom.html /
   gallery-forest-frame.html すべてで共通利用します。
   ここを変更すると、全ページに反映されます。
============================================ */
    /* ============================================
       CSS カスタムプロパティ（色・フォント設定）
       ここを変更するだけで全体の色調が変わります
    ============================================ */
    :root {
      --cream:       #F7F3ED;
      --cream-dark:  #EDE8DF;
      --beige:       #D9CFC0;
      --beige-mid:   #C4B49A;
      --green:       #4A5E4A;
      --green-light: #6B7D5E;
      --green-pale:  #E8EDE4;
      --brown:       #7A6652;
      --text-dark:   #2C2820;
      --text-mid:    #5A5248;
      --text-light:  #8A8278;
      --white:       #FFFFFF;

      --font-en: 'Jost', 'Futura', Arial, sans-serif;
      --font-ja: 'Noto Sans JP', 'Jost', sans-serif;

      --max-width: 1100px;
      --section-pad: 100px 24px;
    }

    /* ============================================
       リセット・ベース
    ============================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      background: var(--cream);
      color: var(--text-dark);
      font-family: var(--font-ja);
      font-weight: 300;
      line-height: 1.8;
      -webkit-font-smoothing: antialiased;
    }
    img { display: block; max-width: 100%; }
    a { color: inherit; text-decoration: none; }
    ul { list-style: none; }

    /* ============================================
       ユーティリティ
    ============================================ */
    .container {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 24px;
    }
    .section-label {
      font-family: var(--font-en);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 16px;
    }
    .divider {
      width: 40px;
      height: 1px;
      background: var(--beige-mid);
      margin: 20px auto;
    }
    .btn {
      display: inline-block;
      padding: 14px 36px;
      border: 1px solid var(--green);
      color: var(--green);
      font-family: var(--font-en);
      font-size: 13px;
      font-weight: 400;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      transition: background 0.3s, color 0.3s;
      cursor: pointer;
    }
    .btn:hover {
      background: var(--green);
      color: var(--white);
    }
    .btn-fill {
      background: var(--green);
      color: var(--white);
    }
    .btn-fill:hover {
      background: var(--green-light);
      border-color: var(--green-light);
    }

    /* ============================================
       ヘッダー・ナビゲーション
    ============================================ */
    header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 100;
      padding: 20px 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transition: background 0.4s, box-shadow 0.4s;
    }
    header.scrolled {
      background: rgba(247, 243, 237, 0.95);
      box-shadow: 0 1px 0 var(--beige);
      backdrop-filter: blur(8px);
    }
    .logo {
      font-family: var(--font-en);
      font-size: 20px;
      font-weight: 400;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--text-dark);
    }

    /* ---- ロゴ画像（明暗2種の切り替え） ---- */
    .logo-link {
      display: flex;
      align-items: center;
      line-height: 1;
    }
    .logo-img {
      display: block;
      width: 140px;
      height: auto;
      transition: opacity 0.4s;
    }
    /* スクロール前（Hero上）：白ロゴを表示、黒ロゴを隠す */
    header:not(.scrolled) .logo-dark  { display: none; }
    header:not(.scrolled) .logo-light { display: block; }
    /* スクロール後（背景あり）：黒ロゴを表示、白ロゴを隠す */
    header.scrolled .logo-dark  { display: block; }
    header.scrolled .logo-light { display: none; }

    /* フッターロゴ */
    .footer-logo-link {
      display: inline-block;
      margin-bottom: 16px;
      opacity: 0.85;
      transition: opacity 0.2s;
    }
    .footer-logo-link:hover { opacity: 1; }
    .footer-logo-img {
      max-width: 140px;
      width: auto;
    }
    nav ul {
      display: flex;
      gap: 36px;
    }
    nav a {
      font-family: var(--font-en);
      font-size: 12px;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--text-mid);
      transition: color 0.2s;
    }
    nav a:hover { color: var(--green); }

    /* ハンバーガー（モバイル） */
    .nav-toggle {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
    }
    .nav-toggle span {
      display: block;
      width: 22px;
      height: 1px;
      background: var(--text-dark);
      transition: transform 0.3s, opacity 0.3s;
    }

    /* ============================================
       01 ヒーロー（全画面背景＋テキストオーバーレイ）
    ============================================ */
    #hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
    }
    /* 背景画像レイヤー */
    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      animation: fadeIn 1.4s ease both;
    }
    /* 背景プレースホルダー */
    .hero-bg-placeholder {
      width: 100%;
      height: 100%;
      background: linear-gradient(160deg, var(--green) 0%, #2e3d2e 40%, #1a2a1a 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      color: rgba(255,255,255,0.4);
    }
    .hero-bg-placeholder .ph-icon {
      width: 60px;
      height: 60px;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    /* 暗めのグラデーションオーバーレイ（文字を読みやすく） */
    #hero::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(
        to top,
        rgba(20, 28, 20, 0.72) 0%,
        rgba(20, 28, 20, 0.28) 50%,
        rgba(20, 28, 20, 0.08) 100%
      );
    }
    /* テキストエリア */
    .hero-text {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 80px 100px;
      animation: fadeUp 1s ease both 0.3s;
    }
    .hero-en {
      font-family: var(--font-en);
      font-size: clamp(11px, 1.1vw, 13px);
      font-weight: 300;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.7);
      margin-bottom: 20px;
    }
    .hero-main {
      font-family: var(--font-en);
      font-size: clamp(48px, 7vw, 100px);
      font-weight: 300;
      line-height: 1.05;
      color: var(--white);
      letter-spacing: 0.01em;
      margin-bottom: 0;
    }
    .hero-main em {
      font-style: normal;
      font-weight: 200;
      color: rgba(255,255,255,0.85);
      display: block;
      letter-spacing: 0.04em;
    }
    .hero-sub-ja {
      font-size: clamp(13px, 1.3vw, 15px);
      font-weight: 300;
      color: rgba(255,255,255,0.75);
      line-height: 2;
      margin: 28px 0 44px;
      max-width: 420px;
    }
    .hero-btns {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
    }
    /* Hero内のボタンは白ベースに */
    .hero-btns .btn {
      border-color: rgba(255,255,255,0.7);
      color: var(--white);
    }
    .hero-btns .btn:hover {
      background: rgba(255,255,255,0.15);
    }
    .hero-btns .btn-fill {
      background: var(--white);
      color: var(--green);
      border-color: var(--white);
    }
    .hero-btns .btn-fill:hover {
      background: rgba(255,255,255,0.85);
    }

    /* ============================================
       02 コンセプト（写真2枚重ね＋テキスト）
    ============================================ */
    #concept {
      padding: var(--section-pad);
      background: var(--white);
    }
    .concept-inner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      max-width: var(--max-width);
      margin: 0 auto;
    }
    /* 写真エリア：2枚を重ねる
       高さは固定せず、下の余白（padding-bottom）で縦横比を確保する。
       これにより画面幅が変わっても写真とテキストが重ならない。 */
    .concept-images {
      position: relative;
      width: 100%;
      /* 大きい写真(幅78%×3:4=高さ104%) + 小さい写真のはみ出し分を見込んだ高さ比率 */
      padding-bottom: 118%;
    }
    /* 大きい写真（左上）
       親(.concept-images)の高さを基準に % で指定。
       幅78% × 3:4比率 → 高さは親高さの約88% */
    .concept-img-main {
      position: absolute;
      top: 0;
      left: 0;
      width: 78%;
      height: 88%;
      overflow: hidden;
      background: var(--green-pale);
      box-shadow: 0 8px 40px rgba(0,0,0,0.10);
    }
    .concept-img-main img,
    .concept-img-sub img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    /* 小さい写真（右下）
       幅56% × 1:1比率 → 高さは親高さの約47% */
    .concept-img-sub {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 56%;
      height: 47%;
      overflow: hidden;
      background: var(--cream-dark);
      box-shadow: 0 8px 40px rgba(0,0,0,0.10);
    }
    /* プレースホルダー共通 */
    .concept-ph {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--text-light);
      font-family: var(--font-en);
      font-size: 11px;
      letter-spacing: 0.2em;
    }
    .concept-ph.main { background: linear-gradient(145deg, var(--green-pale), #c8d4bf); }
    .concept-ph.sub  { background: linear-gradient(145deg, var(--cream-dark), var(--beige)); }
    /* テキスト */
    .concept-text h2 {
      font-family: var(--font-en);
      font-size: clamp(28px, 3.5vw, 46px);
      font-weight: 300;
      line-height: 1.2;
      color: var(--text-dark);
      margin-bottom: 12px;
    }
    .concept-text h2 em {
      display: block;
      font-style: normal;
      font-weight: 200;
      color: var(--green);
      letter-spacing: 0.06em;
    }
    .concept-text p {
      font-size: 14px;
      color: var(--text-mid);
      line-height: 2.1;
      margin-bottom: 20px;
    }
    .concept-name-origin {
      margin-top: 36px;
      padding: 24px 28px;
      border-left: 2px solid var(--green);
      background: var(--green-pale);
    }
    .concept-name-origin p {
      font-family: var(--font-en);
      font-style: normal;
      font-weight: 300;
      font-size: 15px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 8px;
    }
    .concept-name-origin small {
      font-size: 12px;
      color: var(--text-mid);
      line-height: 1.9;
    }

    /* ============================================
       03 プロダクト
    ============================================ */
    #works {
      padding: var(--section-pad);
      background: var(--cream);
    }
    .works-header {
      text-align: center;
      margin-bottom: 64px;
    }
    .works-header h2 {
      font-family: var(--font-en);
      font-size: clamp(30px, 4vw, 52px);
      font-weight: 200;
      letter-spacing: 0.1em;
      color: var(--text-dark);
    }
    .works-header p {
      margin-top: 16px;
      font-size: 13px;
      color: var(--text-light);
      letter-spacing: 0.05em;
    }
    .works-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
      max-width: var(--max-width);
      margin: 0 auto;
    }
    .work-card {
      display: block;
      background: var(--white);
      overflow: hidden;
      transition: transform 0.3s;
      text-decoration: none;
      color: inherit;
    }
    .work-card:hover { transform: translateY(-6px); }
    /* 事例ギャラリーへのリンクがあるカードにのみ表示する案内 */
    .work-card-link-hint {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-en);
      font-size: 11px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--green);
      margin-top: 4px;
    }
    .work-card-link-hint svg { transition: transform 0.2s; }
    .work-card:hover .work-card-link-hint svg { transform: translateX(3px); }
    .work-card-image {
      aspect-ratio: 3/4;
      background: var(--green-pale);
      overflow: hidden;
      position: relative;
    }
    .work-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .work-card:hover .work-card-image img { transform: scale(1.04); }
    /* プレースホルダー */
    .work-img-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
      color: var(--text-light);
      font-family: var(--font-en);
      font-size: 11px;
      letter-spacing: 0.2em;
    }
    .work-img-placeholder.img1 { background: linear-gradient(145deg, #c8d4c0, #e8ede4); }
    .work-img-placeholder.img2 { background: linear-gradient(145deg, #d4cec5, #ede8df); }
    .work-img-placeholder.img3 { background: linear-gradient(145deg, #bfc8b8, #d9d0c4); }
    .work-card-body {
      padding: 24px 24px 28px;
    }
    .work-number {
      font-family: var(--font-en);
      font-size: 11px;
      letter-spacing: 0.3em;
      color: var(--green);
      margin-bottom: 10px;
    }
    .work-card-body h3 {
      font-family: var(--font-en);
      font-size: 20px;
      font-weight: 300;
      color: var(--text-dark);
      margin-bottom: 4px;
    }
    .work-card-body h3 small {
      display: block;
      font-size: 12px;
      font-family: var(--font-ja);
      color: var(--text-light);
      font-weight: 300;
      letter-spacing: 0.08em;
      margin-top: 2px;
    }
    .work-card-body p {
      font-size: 13px;
      color: var(--text-mid);
      line-height: 2;
      margin: 12px 0 20px;
    }
    .work-price {
      font-family: var(--font-en);
      font-size: 14px;
      color: var(--green);
      letter-spacing: 0.05em;
    }
    .works-note {
      text-align: center;
      margin-top: 52px;
      font-size: 13px;
      color: var(--text-light);
      line-height: 2;
    }
    .works-note a {
      color: var(--green);
      border-bottom: 1px solid var(--green);
      transition: opacity 0.2s;
    }
    .works-note a:hover { opacity: 0.7; }

    /* ============================================
       03.5 納品事例ギャラリー
       （index.htmlの商品カードから独立ページへ遷移する形に変更）
    ============================================ */
    .gallery-page-section {
      padding: var(--section-pad);
      background: var(--white);
    }
    /* ギャラリーページ専用：先頭のパンくず＋タイトル部分 */
    .gallery-page-header {
      padding: 140px 24px 60px;
      background: var(--cream);
      text-align: center;
    }
    .gallery-breadcrumb {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-family: var(--font-en);
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 28px;
    }
    .gallery-page-header h1 {
      font-family: var(--font-en);
      font-size: clamp(32px, 4.5vw, 56px);
      font-weight: 200;
      letter-spacing: 0.08em;
      color: var(--text-dark);
    }
    .gallery-page-header h1 small {
      display: block;
      font-family: var(--font-ja);
      font-size: 13px;
      font-weight: 300;
      letter-spacing: 0.05em;
      color: var(--text-light);
      margin-top: 12px;
    }
    /* ギャラリーページ末尾のCTA（お問い合わせへの導線） */
    .gallery-cta {
      max-width: var(--max-width);
      margin: 80px auto 0;
      padding: 56px 40px;
      background: var(--green-pale);
      text-align: center;
    }
    .gallery-cta p {
      font-size: 14px;
      color: var(--text-mid);
      margin-bottom: 24px;
      line-height: 2;
    }
    .gallery-cta-btns {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .gallery-links-row {
      max-width: var(--max-width);
      margin: 56px auto 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 16px;
    }
    .gallery-group {
      max-width: var(--max-width);
      margin: 0 auto;
    }
    .gallery-group + .gallery-group {
      margin-top: 96px;
    }
    .gallery-group-header {
      margin-bottom: 40px;
    }
    .gallery-group-header .section-label { margin-bottom: 8px; }
    .gallery-group-header h3 {
      font-family: var(--font-en);
      font-size: clamp(24px, 3vw, 36px);
      font-weight: 200;
      letter-spacing: 0.06em;
      color: var(--text-dark);
    }
    .gallery-group-header h3 small {
      display: block;
      font-family: var(--font-ja);
      font-size: 12px;
      font-weight: 300;
      letter-spacing: 0.05em;
      color: var(--text-light);
      margin-top: 6px;
    }
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }
    /* Forest Frame（2枚）は少し大きめに見せて余白を活かす */
    .gallery-grid.gallery-grid-2 {
      grid-template-columns: repeat(2, 1fr);
      max-width: 760px;
    }
    .gallery-card-image {
      aspect-ratio: 4/5;
      background: var(--green-pale);
      overflow: hidden;
    }
    .gallery-card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .gallery-caption {
      margin-top: 14px;
      font-size: 13px;
      color: var(--text-mid);
      line-height: 1.9;
    }
    .gallery-back-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 56px;
      font-family: var(--font-en);
      font-size: 12px;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--green);
    }

    /* ============================================
       04 こだわり
    ============================================ */
    #commitment {
      padding: var(--section-pad);
      background: var(--green);
    }
    .commitment-header {
      text-align: center;
      margin-bottom: 64px;
    }
    .commitment-header .section-label { color: var(--beige); }
    .commitment-header h2 {
      font-family: var(--font-en);
      font-size: clamp(28px, 3.5vw, 46px);
      font-weight: 200;
      letter-spacing: 0.1em;
      color: var(--white);
    }
    .commitment-grid {
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-width: var(--max-width);
      margin: 0 auto;
    }
    .commitment-item {
      display: grid;
      grid-template-columns: 220px 1fr;
      gap: 40px;
      align-items: center;
      padding: 40px 48px;
      background: rgba(255,255,255,0.06);
      transition: background 0.3s;
    }
    .commitment-item:hover { background: rgba(255,255,255,0.1); }
    .commitment-item-left {
      display: flex;
      flex-direction: column;
      gap: 8px;
      border-right: 1px solid rgba(255,255,255,0.15);
      padding-right: 40px;
    }
    .commit-num {
      font-family: var(--font-en);
      font-size: 36px;
      font-weight: 300;
      font-style: italic;
      color: rgba(255,255,255,0.25);
    }
    .commitment-item h3 {
      font-size: 15px;
      font-weight: 400;
      color: var(--white);
      letter-spacing: 0.06em;
      line-height: 1.6;
    }
    .commitment-item p {
      font-size: 13px;
      color: rgba(255,255,255,0.72);
      line-height: 2.1;
    }

    /* ============================================
       05 店舗情報・お問い合わせ
    ============================================ */
    #contact {
      padding: var(--section-pad);
      background: var(--cream-dark);
    }
    .contact-inner {
      display: flex;
      flex-direction: column;
      gap: 64px;
      max-width: 720px;
      margin: 0 auto;
    }
    .store-info h2 {
      font-family: var(--font-en);
      font-size: clamp(24px, 3vw, 40px);
      font-weight: 300;
      color: var(--text-dark);
      margin-bottom: 36px;
    }
    .info-row {
      display: flex;
      gap: 24px;
      padding: 18px 0;
      border-bottom: 1px solid var(--beige);
      font-size: 13px;
    }
    .info-row:first-of-type { border-top: 1px solid var(--beige); }
    .info-label {
      font-family: var(--font-en);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      min-width: 100px;
      padding-top: 2px;
    }
    .info-value {
      color: var(--text-mid);
      line-height: 1.9;
    }
    .sns-links {
      margin-top: 32px;
      display: flex;
      gap: 16px;
    }
    .sns-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-en);
      font-size: 12px;
      letter-spacing: 0.15em;
      color: var(--text-mid);
      padding: 10px 20px;
      border: 1px solid var(--beige-mid);
      transition: border-color 0.2s, color 0.2s;
    }
    .sns-link:hover {
      border-color: var(--green);
      color: var(--green);
    }

    /* ============================================
       お問い合わせフォーム
       【重要】フォーム送信を有効にするには Formspree を使用します
       手順：
         1. https://formspree.io でアカウント作成（無料）
         2. 新しいフォームを作成し、フォームIDを取得
         3. 下の <form action="..."> の URL を
            https://formspree.io/f/あなたのフォームID に書き換える
         4. 送信されたメッセージは登録メールアドレスに届きます
    ============================================ */
    .contact-form-wrap h2 {
      font-family: var(--font-en);
      font-size: clamp(24px, 3vw, 40px);
      font-weight: 300;
      color: var(--text-dark);
      margin-bottom: 8px;
    }
    .contact-form-wrap > p {
      font-size: 13px;
      color: var(--text-light);
      margin-bottom: 36px;
      line-height: 2;
    }
    .form-group {
      margin-bottom: 20px;
    }
    .form-group label {
      display: block;
      font-family: var(--font-en);
      font-size: 11px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--green);
      margin-bottom: 8px;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
      width: 100%;
      background: var(--white);
      border: 1px solid var(--beige);
      border-radius: 0;
      padding: 12px 16px;
      font-family: var(--font-ja);
      font-size: 14px;
      font-weight: 300;
      color: var(--text-dark);
      outline: none;
      transition: border-color 0.2s;
    }
    .form-group input:focus,
    .form-group textarea:focus,
    .form-group select:focus {
      border-color: var(--green);
    }
    .form-group textarea { resize: vertical; min-height: 140px; }
    .form-submit { margin-top: 8px; }
    .form-note {
      margin-top: 12px;
      font-size: 11px;
      color: var(--text-light);
      line-height: 1.8;
    }

    /* ============================================
       フッター
    ============================================ */
    footer {
      background: var(--text-dark);
      padding: 48px 24px;
      text-align: center;
    }
    .footer-logo {
      font-family: var(--font-en);
      font-size: 22px;
      font-weight: 300;
      letter-spacing: 0.4em;
      color: var(--white);
      margin-bottom: 8px;
    }
    .footer-tagline {
      font-family: var(--font-en);
      font-size: 11px;
      font-style: italic;
      color: var(--beige-mid);
      letter-spacing: 0.2em;
      margin-bottom: 28px;
    }
    .footer-nav {
      display: flex;
      justify-content: center;
      gap: 28px;
      margin-bottom: 32px;
    }
    .footer-nav a {
      font-family: var(--font-en);
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      transition: color 0.2s;
    }
    .footer-nav a:hover { color: var(--white); }
    .footer-copy {
      font-size: 11px;
      color: rgba(255,255,255,0.3);
      letter-spacing: 0.1em;
    }

    /* ============================================
       アニメーション
    ============================================ */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    .reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }
    .reveal.visible {
      opacity: 1;
      transform: none;
    }

    /* ============================================
       レスポンシブ（タブレット・モバイル）
    ============================================ */
    @media (max-width: 900px) {
      :root { --section-pad: 72px 24px; }

      header { padding: 18px 24px; }
      nav { display: none; }
      nav.open {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--cream);
        z-index: 99;
        padding: 100px 40px 40px;
      }
      nav.open ul {
        flex-direction: column;
        gap: 32px;
      }
      nav.open a {
        font-size: 18px;
      }
      .nav-toggle { display: flex; }

      #hero { min-height: 85vh; }
      .hero-text { padding: 0 24px 72px; }

      .concept-inner {
        grid-template-columns: 1fr;
        gap: 40px;
      }
      /* 写真エリアを通常フローに戻す */
      .concept-images {
        padding-bottom: 0;
        position: static;
      }
      /* 大きい写真を幅いっぱい・通常配置に */
      .concept-img-main {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 4/3;
      }
      /* 小さい写真は非表示 */
      .concept-img-sub {
        display: none;
      }

      .works-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
      }
      .gallery-grid.gallery-grid-2 {
        max-width: none;
      }
      .gallery-group + .gallery-group { margin-top: 64px; }
    }

    @media (max-width: 600px) {
      .hero-main { line-height: 1.1; }
      .hero-text { padding: 0 20px 60px; }
      .sns-links { flex-wrap: wrap; }
      .works-grid { grid-template-columns: 1fr; }
      .gallery-grid { grid-template-columns: 1fr; }
      .gallery-page-header { padding: 120px 20px 48px; }
      .gallery-links-row { flex-direction: column; align-items: flex-start; }
      /* スマホでは写真を正方形に近い比率で */
      .concept-img-main { aspect-ratio: 3/2; }
      .commitment-item {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .commitment-item-left {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.15);
        padding-right: 0;
        padding-bottom: 16px;
        flex-direction: row;
        align-items: center;
        gap: 16px;
      }
    }