@charset "UTF-8";

/* ========================================
   CSS Variables (Design Tokens)
======================================== */
:root {
    /* Colors - Luxury Modern Palette */
    --color-bg-base: #08080a;
    /* Very dark rich black */
    --color-bg-surface: #121215;
    --color-bg-surface-light: #1c1c20;

    --color-text-main: #f0f0f2;
    --color-text-muted: #9e9ea6;

    --color-accent-gold: #d4af37;
    --color-accent-gold-light: #f3e5ab;
    --color-accent-gold-dark: #aa8623;

    --color-border: rgba(255, 255, 255, 0.08);
    --color-overlay: rgba(8, 8, 10, 0.6);

    /* Fonts - 全て明朝体に統一 */
    --font-family-sans: 'Shippori Mincho', 'Times New Roman', serif;
    /* 元々はゴシック体でしたが明朝体に変更しました */
    --font-family-serif: 'Shippori Mincho', 'Times New Roman', serif;

    /* Layout */
    --max-width: 1200px;
    --section-padding: 120px;

    /* Animation */
    --transition-slow: 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 0.3s ease;
}

/* 
========================================
   【重要】スマホとPCの切り替え幅（ブレイクポイント）について
========================================
   現在、スマホ版のデザインに切り替わる画面幅は「768px以下」に設定されています。
   （iPadなどの一般的なタブレットやスマートフォンの基準サイズです）
   
   もし「もっと広い画面（例：1000px）からスマホ用レイアウトに切り替えたい」場合は、
   このファイル（style.css）内にあるすべての
   @media (max-width: 768px)
   という記述の「768」という数字を、好きな数字（例：1000）に変更してください。
   ※複数箇所あるので、エディタの「一括置換機能」を使うと便利です。
*/
@media (max-width: 768px) {
    :root {
        --section-padding: 80px;
    }
}

/* ========================================
   Reset & Base Styles
======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg-base);
    color: var(--color-text-main);
    font-family: var(--font-family-serif);

    /* ▼ サイト全体の基本の文字サイズ ▼
       clamp(最小サイズ, 画面幅に連動するサイズ, 最大サイズ) という書き方です。
       ・スマホでの基本の文字サイズを変えたい場合 → 1つ目の数字（13px）を変更します。
         （例: 少し大きくしたい場合は 14px や 15px に変更）
       ・PCでの文字サイズを変えたい場合 → 3つ目の数字（16px）を変更します。
    */
    font-size: clamp(14px, 2.5vw, 16px);

    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 24px);
}

.section-padding {
    padding: var(--section-padding) 0;
}

.text-center {
    text-align: center;
}

.pc-only {
    display: block;
}

@media (max-width: 768px) {
    .pc-only {
        display: none;
    }
}

/* ========================================
   Typography
======================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-serif);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.05em;
}

.section-label {
    display: block;
    font-family: var(--font-family-serif);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--color-accent-gold);
    margin-bottom: 16px;
    text-transform: uppercase;
}

.section-title {
    /* ▼ セクション見出し（「BrandSquareの画像生成サービスは…」など）の文字サイズ ▼
       clamp(最小サイズ, 画面幅に連動するサイズ, 最大サイズ) という書き方です。
       
       ・1つ目の数字（1.05rem）→ スマホで見たときの最小サイズ（これ以下には縮まない）
       ・2つ目の数字（3.8vw）  → 画面幅に合わせて変わるサイズ
         ※ vw = 画面の横幅の割合。3.8vw なら横幅の3.8%の大きさ。
         ※ この数字を大きくすると、画面幅による変動が大きくなる（例: 5.0vw にするともっと敏感に変化）
       ・3つ目の数字（2.8rem） → パソコンで見たときの最大サイズ（これ以上は大きくならない）
       
       ★ 画面を広げても文字サイズが変わらない場合 → 3つ目の数字が小さすぎて頭打ちになっています。
         3つ目を大きくしてください（例: 2.8rem → 3.2rem や 3.5rem）
    */
    font-size: clamp(1.05rem, 3.8vw, 3.0rem);
    margin-bottom: 24px;
}

.section-title .accent {
    color: var(--color-accent-gold);
}

.section-desc {
    color: var(--color-text-muted);
    max-width: 600px;
    margin: 0 auto 48px;
}

/* ▼ セクション見出し上の文章（「誰もが簡単にAIで…」など）の調整 ▼ */
.section-header p {
    /* ▼ 文字の色を変える箇所 ▼
       色の指定方法はいくつかあります：
       ・色の名前で指定    → color: white;  や  color: gold;
       ・カラーコードで指定 → color: #9e9ea6; （先頭に # をつけた6桁の英数字）
       ・透明度つきで指定   → color: rgba(255, 255, 255, 0.7);
         （最後の 0.7 が透明度。1.0で完全に見える、0.0で完全に透明）
    */
    color: var(--color-text-muted);

    /* ▼ 文字のサイズを変える箇所 ▼
       clamp(最小サイズ, 画面幅に連動するサイズ, 最大サイズ) という書き方です。
       
       ・1つ目の数字（0.85rem）→ スマホで見たときの最小サイズ（これ以下には縮まない）
       ・2つ目の数字（2.0vw）  → 画面幅に合わせて変わるサイズ
         ※ vw = 画面の横幅の割合。2.0vw なら横幅の2%の大きさ。
         ※ この数字を大きくすると、画面幅による変動が大きくなる（例: 3.0vw にするともっと敏感に変化）
       ・3つ目の数字（1.5rem） → パソコンで見たときの最大サイズ（これ以上は大きくならない）
       
       ★ 画面を広げても文字サイズが変わらない場合 → 3つ目の数字が小さすぎて頭打ちになっています。
         3つ目を大きくしてください（例: 1.5rem → 1.8rem や 2.0rem）
    */
    font-size: clamp(0.85rem, 2.0vw, 1.5rem);

    /* ▼ 行と行の間隔 ▼（数字を大きくすると行間が広がります） */
    line-height: 1.9;

    /* ▼ 見出しとの間の余白 ▼ */
    margin-bottom: 24px;

    /* ▼ 文字と文字の間隔 ▼（少し広げると高級感が出ます） */
    letter-spacing: 0.05em;
}

/* ========================================
   Components (Buttons, etc.)
======================================== */
.btn-primary {
    display: inline-block;
    background: linear-gradient(135deg, var(--color-accent-gold), var(--color-accent-gold-dark));
    color: var(--color-bg-base);
    padding: 16px 40px;
    font-family: var(--font-family-serif);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.1em;
    border-radius: 2px;
    border: none;
    cursor: pointer;
    transition: var(--transition-fast);
    text-align: center;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

.btn-outline {
    display: inline-block;
    padding: 12px 28px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    border: 1px solid var(--color-border);
    transition: var(--transition-fast);
}

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

/* ========================================
   Header
======================================== */
.header {
    /* border: 3px solid green; */
    /* ヘッダー全体の範囲を確認するための緑色の枠線です */

    position: sticky;
    /* ← これが「浮かせて固定する」命令です
                     「浮かせる」のをやめる: position: fixed; を position: sticky;（スティッキー） に書き換える。*/
    top: 0;
    /* 画面の一番上に固定 */
    left: 0;
    width: 100%;
    z-index: 100;
    /* 他の要素より手前に表示させる設定 */

    background-color: rgba(8, 8, 10, 0.92);
    /* ▼ ヘッダーの背景色（PCでは常に表示）▼
       rgba(8, 8, 10, 0.92) → ほぼ黒・透明度92%。
       最後の数字（0.92）を小さくすると薄くなり、1.0にすると完全に黒になります */

    backdrop-filter: blur(10px);
    /* 背景をぼかして、ガラスのような高級感を出すエフェクトです */

    border-bottom: 1px solid var(--color-border);
    /* ヘッダー下部の細い区切り線 */

    transition: padding var(--transition-slow);
    /* スクロール時にパディングがなめらかに変わるアニメーション */
}

.header.scrolled {
    padding: 12px 0;
    /* ▼ スクロール後のヘッダーの高さ（パディング）▼
       スクロールすると少しコンパクトになります */
}

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

.logo {
    font-family: var(--font-family-serif);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.logo-accent {
    color: var(--color-accent-gold);
    font-family: var(--font-family-serif);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 0.1em;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 40px;
}

.nav-list a {
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--color-text-main);
    opacity: 0.8;
}

.nav-list a:hover {
    opacity: 1;
    color: var(--color-accent-gold);
}

/* ▼ ハンバーガーボタン（3本線）本体 ▼ */
.hamburger {
    display: none;
    /* PC では非表示。スマホ用（768px以下）で表示切り替えします */

    flex-direction: column;
    justify-content: center;
    gap: 6px;
    /* 3本線の間隔 */

    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;

    position: relative;
    /* 
       ▼ 【重要】スマホでタップできないエラーの対策 ▼
       z-index（重なり順）は、position（relative, absolute, fixed 等）が
       一緒に指定されていないと、全く機能しません！
       これが無いと、透明な要素の下敷きになってしまいスマホでタップできなくなります。
    */
    z-index: 200;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--color-text-main);
    /* ▼ 3本線の色 ▼（白に設定。変えたい場合はここを修正） */

    pointer-events: none;
    /* ★追加：線そのものへのタップ判定を無効化し、ボタン全体で確実にタップを受け取れるようにします */

    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    /* 開閉アニメーションをなめらかにします */
}

/* ▼ ハンバーガーボタンが「×（バツ印）」に変わるアニメーション ▼ */
.hamburger.is-open span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
    /* 1本目の線を斜めに回転 */
}

.hamburger.is-open span:nth-child(2) {
    opacity: 0;
    /* 真ん中の線を消す */
}

.hamburger.is-open span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
    /* 3本目の線を逆方向に回転 */
}

/* ▼ スマホ用ドロワーメニュー（開閉するメニュー全体）▼ */
.mobile-menu {
    display: none;
    /* 通常は非表示。JavaScriptで .is-open クラスが付いた時に表示されます */

    position: absolute;
    top: 100%;
    /* ヘッダーの直下から開始 */

    left: 0;
    width: 100%;
    background-color: rgba(8, 8, 10, 0.97);
    /* ▼ ドロワーメニューの背景色 ▼ */

    border-bottom: 1px solid var(--color-border);
    padding: 24px 0;
}

.mobile-menu.is-open {
    display: block;
    /* .is-open クラスが付いた時だけ表示します */
}

.mobile-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    /* メニュー項目を縦に並べます */
}

.mobile-nav-list li a {
    display: block;
    padding: 16px 24px;
    /* ▼ 各メニュー項目のタップ領域（上下の余白）▼ */

    font-size: 1rem;
    letter-spacing: 0.1em;
    color: var(--color-text-main);
    border-bottom: 1px solid var(--color-border);
    /* 項目の間の区切り線 */

    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-nav-list li a:hover {
    color: var(--color-accent-gold);
    background-color: rgba(212, 175, 55, 0.05);
}

/* ▼ スマホ表示（768px以下）の切り替えルール ▼ */
@media (max-width: 768px) {
    .nav {
        display: none;
        /* PC用のナビゲーションをスマホでは隠します */
    }

    .btn-outline {
        display: none;
        /* PC用の「ご相談・お見積り」ボタンをスマホでは隠します（ドロワー内に同じリンクがあります） */
    }

    .hamburger {
        display: flex;
        /* ▼ スマホではハンバーガーボタンを表示します ▼ */
    }
}

/* ========================================================================================================================
   Hero Section
======================================================================================================================== */
.hero {
    /* border: 3px solid pink; */
    /* ヒーローセクション（.hero）の範囲を確認するためのピンク色の枠線です*/

    position: relative;

    margin-top: 0px;
    /* ▼ 緑枠（ヘッダー）とピンク枠（ヒーロー）が重ならないように、余白を少し増やしました（85px） ▼
       もしこれでも重なる場合は、この数字をさらに大きく（90pxなど）調整してください */

    /* ▼ PC版：ヒーロー画像の表示サイズ（高さ）を調整する箇所 ▼ */
    /* 
       ★【重要】画面の縦幅に影響されず、常に「固定の高さ」にしたい場合：
       以下の height と min-height の2行を消して、ピクセル（px）の固定値で指定します。
       （例）height: 500px; 
            ※こうすることで、見ている人の画面が縦長でも横長でも高さが一定になります。
       
       ★ 画面の割合で可変にしたい場合（今の設定）：
       height: 数値vh; （画面の高さに対する割合。50vhなら画面の高さの50%）
       min-height: 数値px; （これ以上は縮まないという最小の高さ）
    */
    height: 50vh;
    min-height: 900px;

    display: flex;
    align-items: center;
    overflow: hidden;

}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;

    /* ▼ PC版：画像の「枠への収まり方」を変更する箇所 ▼ */
    /* 
       ここには画像を枠（フレーム）にどう収めるかを指定します。
       お好みに合わせて以下のどれかに書き換えてみてください。

       ■ cover（いまの設定）
         枠を隙間なく完全に埋めます。はみ出た部分は切り取られます（トリミング）。
         → 迫力を出したい時におすすめ！
       
       ■ contain
         画像全体が切れないように縮小して収めます。
         → 枠の形と合わない場合、上下や左右に隙間（余白）ができます。

       ■ fill
         枠の形に合わせて画像を無理やり引き伸ばしたり縮めたりします。
         → 画像の縦横比が崩れて、少し歪んで見えることがあります。

       ■ none
         画像の本来のサイズのまま表示します。
         → 枠より画像が大きい場合、枠からはみ出た部分は見えなくなります。
    */
    object-fit: cover;

    /* ▼ PC版：画像の表示位置を微調整する箇所 ▼ */
    /* (例) 顔を中心にするため、X軸はcenter、Y軸は上から20%に設定 */
    object-position: center 20%;

    /* ▼ 画像自体の明るさや色味を調整したい場合 ▼ */
    /* filter機能を使います。以下のコメントアウトを外して数値を変更してください */
    /* (例) brightness(0.8) -> 少し暗くする / contrast(1.1) -> コントラストを強める */
    /* filter: brightness(0.9) contrast(1.1); */

    /* ▼ 画像が拡大される「倍率（ズーム具合）」を手動で調整する箇所 ▼ */
    transform: scale(1);
    /* 
       枠の中に画像がどう収まるかは上の object-fit: cover; が自動計算していますが、
       さらに手動で全体をズームイン・ズームアウトさせたい場合は以下の数値を調整します。
       （1.05 は 1.05倍 という意味です）
       
       （例）
       ・ズームなしの本来のサイズにする： transform: scale(1);
       ・さらに大きくズームさせる場合： transform: scale(1.2);
       ・画面幅に応じて倍率を変えたい場合： transform: scale(calc(1 + 0.05vw));
         ※ 画面が広がるほど拡大率が上がります。vw の前の数値を変更して調整してください。
    */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /*
      ▼ 画像の上に掛かる「黒い影（グラデーション）」の詳しい設定方法 ▼
      
      background: linear-gradient(向き, 色1 位置1, 色2 位置2, 色3...);
      という書き方になっています。
      
      ◆ 90deg : 「左から右へ」向かって色を変化させる、という意味です。
      ◆ rgba(8, 8, 10, 0.9) : 色の指定です。
          - 最初の 8, 8, 10 は「色」です（0, 0, 0にすると完全な真っ黒になります）。
          - 最後の 0.9 は「不透明度（濃さ）」です。1.0で完全に色がつき、0.0で完全に透明になります。
      ◆ 0% や 50% : グラデーションの色を置く「位置」です。
          - 0%   = 一番左端
          - 50%  = 真ん中
          - 100% = 一番右端
          
      【今の設定を日本語で読むと…】
      左から右(90deg)へ、
      ・左端(0%)は「90%の濃い影」
      ・真ん中(50%)は少し薄れて「60%の濃さの影」
      ・右端(100%)はほぼ透明になって「20%の濃さの影」
      になるようなグラデーションを作ってね、という意味になります！
      
      ★ 文字が読みにくい時 ＝ rgba の一番最後の数字を大きくする（例：0.9 や 1.0）
      ★ 画像をもっと明るく見せたい時 ＝ rgba の一番最後の数字を小さくする（例：0.4 や 0.2）
    */
    /* background: linear-gradient(90deg, rgba(8, 8, 10, 0.9) 0%, rgba(8, 8, 10, 0.1) 50%, rgba(8, 8, 10, 0.0) 100%); */
    background: linear-gradient(180deg, rgba(8, 8, 10, 0.0) 0%, rgba(8, 8, 10, 0.4) 80%, rgba(8, 8, 10, 1) 100%);

}

.hero-content {
    position: relative;
    /* 位置の基準を「現在の場所」に設定します。これがないと次の z-index が効きません */
    z-index: 2;
    /* 重なり順を手前にします。これがないと文字が背景画像や黒い影の後ろに隠れて見えなくなります（超重要！） */

    /* border: 2px solid yellow; */
    /* さらにひとつ上のレイヤー（親要素）を確認するための黄色い枠線です（確認が終わったらこの行と上の行を消してください） */

    align-self: flex-end;
    /* 黄色の枠を親要素（黄緑色の枠）の一番下に揃える命令です */

    margin-bottom: 400px;
    /* ▼ PC表示の時の位置調整（上下） ▼
       数字を大きくすると上に上がり、小さくすると下（底）に近づきます */
}

.hero-text-box {
    /* border: 2px solid red; */
    /* ひとつ上のレイヤー（親要素）を確認するための赤枠線です（確認が終わったらこの行と上の行を消してください） */
    max-width: 700px;
    /* 
      ▼ PC版：文字全体の表示位置（上下）を下げる調整 ▼ 
      PC表示のときにも文字をもっと下にさげたい場合は、ここの margin-top に数値を入れます。
      （例: margin-top: 10vh; （画面の高さの10%分下がる）、margin-top: 50px; など）
    */
    margin-top: 0;

}

.hero-title {
    /* 
      ▼ メインタイトル（魅力的なAIタレントで…）の文字サイズ調整 ▼ 
      現在、すでに画面の横幅に応じて「可変」になる仕組み（vwという単位）を使っています！
      clamp(スマホでの最小サイズ, 画面幅に応じた基準サイズ, PCでの最大サイズ) という書き方です。
      
      【横幅に合わせて変化させる設定場所はここ！】
      ・真ん中の「vw（Viewport Width）」がついた数値が、画面の横幅に連動して大きさが変わる部分です。（例: 4.5vw は 画面幅の4.5%の大きさ）
      
      もし「もっと画面幅の変化に敏感に（素早く）大きく/小さくしたい」場合はこの数値をいじります。
      ・変化の度合いを強くする: 4.5vw → 5.0vw や 6.0vw などに増やす
      ・変化の度合いを弱くする: 4.5vw → 3.5vw や 3.0vw などに減らす
      
      ※左端は縮んだ時のストッパー（例:1.25rem）、右端は広がった時のストッパー（例:3.2rem）として働きます。
    */
    font-size: clamp(1.6rem, 3.3vw, 2.9rem);
    /* clamp() は、CSSにおいて「最小値・最適値・最大値」で、文字サイズを画面幅に合わせて自動伸縮させる関数です。 */
    margin-bottom: 32px;
    line-height: 1.3;
}

.title-line {
    display: block;
}

.title-accent {
    color: var(--color-accent-gold);
    font-size: 1.1em;
    margin-top: 8px;
}

.hero-subtitle {
    /* border: 2px solid blue; */
    /* 範囲を確認するための青い枠線です（確認が終わったらこの行と上の行を消してください） */

    font-family: var(--font-family-serif);
    /* ▼ サブタイトルの「フォントの種類」を変更する箇所 ▼ */
    /* var(--font-family-serif) を指定することで、高級感のある明朝体になります。 */
    /* ゴシック体に戻したい場合は、ここを var(--font-family-sans) に書き換えてください。 */
    /* 文字の色（少しグレーがかった白に設定されています） */

    color: silver;

    font-size: clamp(1.2rem, 2.2vw, 1.8rem);
    /* ▼ サブタイトルの「文字サイズ」を調整する箇所 ▼
       clamp(最小サイズ, 画面幅に連動するサイズ, 最大サイズ) という書き方です。
       
       ・1つ目の数字（0.9rem）→ スマホで見たときの最小サイズ（これ以下には縮まない）
       ・2つ目の数字（2.5vw） → 画面幅に合わせて変わるサイズ ← ★変動の「速さ」を決める数字！
         ※ vw = 画面の横幅の割合。2.5vw なら横幅の2.5%の大きさ。
         ※ この数字を大きくすると、画面幅による変動が大きくなる（例: 3.5vw にするともっと敏感に変化）
       ・3つ目の数字（1.5rem）→ パソコンで見たときの最大サイズ（これ以上は大きくならない）
       
       ★ メインタイトル（457行目付近）と同じ割合で変動させたい場合：
         → 2つ目の数字（vw）を、メインタイトルの vw と同じ値に揃えてください。
            メインタイトル: 3.0vw ／ サブタイトル（ここ）: 2.5vw ← 今は違うので変動速度が異なる
       
       ★ 画面を広げても文字サイズが変わらない場合 → 3つ目の数字が小さすぎて頭打ちになっています。
         3つ目を大きくしてください（例: 1.8rem → 2.0rem や 2.2rem）
    */

    font-weight: 400;
    /* ▼ 文字の太さを変える箇所 ▼
       数字が大きいほど太くなります。
       ・300 → 細め（上品で繊細な印象）
       ・400 → 普通（標準の太さ）← 今の設定
       ・500 → やや太め
       ・600 → 太め（しっかり目立つ）
       ・700 → かなり太い（見出し向き）
    */

    line-height: 1.4;
    /* 行の間隔（1.0が標準。数値を増やすと行間が広がります） */

    margin-bottom: 10px;
    /* 下の要素（ボタンなど）との間の余白 */


    margin-top: 0px;
    /* 位置の調整（上下）：マイナスの数字（例: -20px）で上へ、プラスの数字で下へ移動します */

    margin-left: 0px;
    /* 位置の調整（左右）：プラスの数字（例: 20px）で右へ、マイナスの数字で左へ移動します */
}



@media (max-width: 768px) {
    .hero {
        /* ▼ スマホ版：メインビジュアルの「高さ（縦幅）」を調整する箇所 ▼ */
        /* 
           スマホで見たときのメインビジュアルの高さを自由に決めることができます。
           お好みの見た目になるように数値を書き換えてみてください。

           【設定の書き方】
           ◆ 画面の高さに合わせる場合（おすすめ！）
              単位に vh（画面の高さの割合）を使います。
              （例）height: 50vh;  ←スマホ画面のちょうど半分の高さになります。
              （例）height: 100vh; ←スマホ画面いっぱいの高さになります。
           
           ◆ 固定の高さにする場合
              単位に px（ピクセル）を使います。
              （例）height: 400px; ←画面サイズに関わらず常に400pxの高さになります。

           【今の設定について】
           現在は以下の2つが設定されています。
           1. height: 250px; （基本の高さ）
           2. min-height: 350px; （これ以上は縮まない！という最小の高さ）
           ※スマホでPC版の設定（min-height: 800px等）が誤作動しないように上書きしています。
           
           ★ 高さを自由に変えたい時は、この2つの数値を変更するか、
           どちらか片方だけ（例: height: 60vh; だけ）を残してもう片方を消してもOKです。
        */
        height: 70vh;
        min-height: 70vh;
    }

    .hero-img {
        /* ▼ スマホ版：画像の表示位置（トリミング位置）の微調整 ▼ */
        /* 数値を減らす(例: 60%, 50%...)と画像がさらに右側（顔の左側）を映すようになり、増やすと左側を映します */
        object-position: 70% 20%;

        /* ▼ スマホ版：画像の「収まり方」を変更する箇所 ▼ */
        /* 
           ここには画像を枠（フレーム）にどう収めるかを指定します。
           お好みに合わせて以下のどれかに書き換えてみてください。

           ■ cover
             枠を隙間なく完全に埋めます。はみ出た部分は切り取られます（トリミング）。
             → 迫力を出したい時におすすめ！
           
           ■ contain（いまの設定）
             画像全体が切れないように縮小して収めます。
             → 枠の形と合わない場合、上下や左右に隙間（余白）ができます。

           ■ fill
             枠の形に合わせて画像を無理やり引き伸ばしたり縮めたりします。
             → 画像の縦横比が崩れて、少し歪んで見えることがあります。

           ■ none
             画像の本来のサイズのまま表示します。
             → 枠より画像が大きい場合、枠からはみ出た部分は見えなくなります。
        */
        object-fit: cover;

        /* ▼ スマホ版：画像が拡大される「倍率（ズーム）」を手動調整する箇所 ▼ */
        /* PCの設定とは別にスマホ専用の倍率を指定します。
           （例）アップにしすぎず元のサイズで表示したい場合: transform: scale(1);
           （例）スマホでは少し迫力を出してズームしたい場合: transform: scale(1.1);
        */
        transform: scale(1);
    }

    .hero-overlay {
        /* ▼ スマホ版：文字を読みやすくするためのグラデーション（影） ▼ */
        /* スマホは縦長になるため、上(0.2)から下(1)に向かって暗くなるよう調整しています */
        /*
      ▼ 画像の上に掛かる「黒い影（グラデーション）」の詳しい設定方法 ▼
      background: linear-gradient(向き, 色1 位置1, 色2 位置2, 色3...);
      という書き方になっています。
      
      ◆ 90deg : 「左から右へ」向かって色を変化させる、という意味です。
      ◆ rgba(8, 8, 10, 0.9) : 色の指定です。
          - 最初の 8, 8, 10 は「色」です（0, 0, 0にすると完全な真っ黒になります）。
          - 最後の 0.9 は「不透明度（濃さ）」です。1.0で完全に色がつき、0.0で完全に透明になります。
      ◆ 0% や 50% : グラデーションの色を置く「位置」です。
          - 0%   = 一番左端
          - 50%  = 真ん中
          - 100% = 一番右端
          
      【今の設定を日本語で読むと…】
      左から右(90deg)へ、
      ・左端(0%)は「90%の濃い影」
      ・真ん中(50%)は少し薄れて「60%の濃さの影」
      ・右端(100%)はほぼ透明になって「20%の濃さの影」
      になるようなグラデーションを作ってね、という意味になります！
      
      ★ 文字が読みにくい時 ＝ rgba の一番最後の数字を大きくする（例：0.9 や 1.0）
      ★ 画像をもっと明るく見せたい時 ＝ rgba の一番最後の数字を小さくする（例：0.4 や 0.2）
    */

        background: linear-gradient(180deg, rgba(8, 8, 10, 0.0) 0%, rgba(8, 8, 10, 0.2) 50%, rgba(8, 8, 10, 1) 100%);
    }

    .hero-content {
        margin-bottom: 10px;
        /* ▼ スマホ表示の時の位置調整（上下） ▼
           数字を小さくすると、さらに下（底）に近づき、大きくすると上に上がります */
    }

    .hero-text-box {
        margin-top: 200px;
        /* 文字をもっと下にさげたい場合は、ここの margin-top に数値を入れます。
          （例: margin-top: 10vh; （画面高さの10%分下がる）、margin-top: 80px; など）*/
        /* 範囲の確認が終わったら、この下の1行を消すかコメントアウトしてください */
        /* border: 3px solid blue; */

    }

}

/* ========================================================================================================================
   Whats_the_difference（他と何が違うのか？）
   ※ index.html の <section class="whats_the_difference"> に対応
======================================================================================================================== */

/* ▼ セクション全体の背景色と余白 ▼ */
.whats_the_difference {
    /* セクションの背景色をベースカラーに変更（入れ替え） */
    background-color: var(--color-bg-base);

    /* ▼ セクションの「上の余白」を個別に調整する箇所 ▼
       ヒーローセクションとの間のスキマを変えたい場合は、ここの数字を変更してください。
       ・数字を小さくする → ヒーローとの間が狭くなる（例: 40px, 20px, 0px）
       ・数字を大きくする → ヒーローとの間が広がる（例: 160px, 200px）
       ※ 他のセクションの余白には影響しません。ここだけ個別に変わります。
    */
    padding-top: 20px;
}

/* ▼ 3つのカードを横並びにするグリッド（格子状レイアウト） ▼ */
.difference_grid {
    /* display: grid → 格子状のレイアウトを使います。
       自動で要素を並べてくれるので、とても便利な機能です！ */
    display: grid;

    /* repeat(3, 1fr) → 3つのカラム（列）を均等な幅（1frずつ）で配置します。
       2列にしたいときは repeat(2, 1fr) に書き換えます。 */
    grid-template-columns: repeat(3, 1fr);

    /* ▼ カードとカードの間のスキマ（赤線部分）を調整する箇所 ▼
       画面が狭くなるにつれて、スキマも自動で狭くなるように clamp() という機能を使っています。       
       ・1つ目の数字（16px） → どんなに画面が狭くてもこれ以上は縮まない「最小のスキマ」
       ・2つ目の数字（3vw）  → 画面幅に連動して変化する値（横幅の3%）
       ・3つ目の数字（40px） → パソコンなどの広い画面での「最大のスキマ」
    */
    gap: clamp(5px, 1.5vw, 40px);

    /* セクション見出しと、このカード群の間の距離を 64px 空けます */
    margin-top: 64px;
}

/* ▼ 各カード（01, 02, 03）の共通スタイル ▼ */
.difference_card {
    /* カードの背景色をサーフェスカラーに変更（背景とのコントラストを維持） */
    background-color: var(--color-bg-surface);

    /* カードの内側の余白（上下48px、左右32px） */
    padding: 1vw;

    /* カードに薄い白の枠線をつけます */
    border: 1px solid var(--color-border);

    /* 中の要素（テキストや画像）を縦に並べ、高さが揃うようにします */
    display: flex;
    flex-direction: column;

    /* マウスを乗せた時のアニメーションを、ゆっくり（var(--transition-slow)）変化させます */
    transition: var(--transition-slow);
}

/* ▼ カードにマウスを乗せた時（ホバー）の演出 ▼ */
.difference_card:hover {
    /* 枠線の色が、ゴールド（不透明度0.3）にふわっと変わります */
    border-color: rgba(212, 175, 55, 0.3);

    /* カードが上に 5px 浮き上がるような動き（座標移動）をさせます */
    transform: translateY(-5px);
}

/* ▼ カードの番号（01, 02, 03）のスタイル ▼ */
.difference_number {
    /* 高級感を出すために明朝体フォントを指定 */
    font-family: var(--font-family-serif);

    /* 番号をとても大きく（3rem）表示します */
    font-size: 2rem;

    /* 色を背景に近い薄いグレーにして、おしゃれな透かしのように見せています */
    color: darkgray;

    /* 文字の高さ（行間）をギュッと縮めます */
    line-height: 1;

    /* 下のタイトルとの間の余白 */
    margin-bottom: 24px;
}

/* ▼ カードのタイトル（AIタレントのキャスティング等）のスタイル ▼ */
.difference_title {
    /* 文字のサイズを、画面幅に合わせて自動で伸縮させます */
    font-size: clamp(1.1rem, 2.8vw, 1.4rem);

    /* 下の説明文との間の余白 */
    margin-bottom: 20px;
}

/* ▼ カードの説明文（小さい文字）のスタイル ▼ */
.difference_desc {
    /* 文字の色を少し抑えたグレー（muted）にします */
    color: var(--color-text-muted);

    /* 文字のサイズを自動調整（最小0.8rem 〜 最大0.95rem） */
    font-size: clamp(0.8rem, 2vw, 0.95rem);

    /* 行と行の間隔を 1.8倍 に広げて読みやすくします */
    line-height: 1.8;

    /* 下の余白を埋めて、画像をカードの一番下に押し下げます */
    flex-grow: 1;
}

/* ▼ カードの画像ラッパー（新しく追加） ▼ */
.difference_image_wrapper {
    /* 上の説明文との間に余白を作ります */
    margin-top: 32px;

    /* 画像の角を少し丸くして柔らかい印象にします */
    border-radius: 8px;

    /* はみ出た部分を隠す（ズーム演出に必須） */
    overflow: hidden;

    /* ほんのり影をつけて、少し浮き出ているような高級感を演出 */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);

    /* 画像の周りにごく薄い白の線を引き、引き締めます */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ▼ カードの画像本体（新しく追加） ▼ */
.difference_image {
    width: 100%;
    height: auto;
    display: block;

    /* ホバー（マウスオーバー）時の動きをなめらかにします */
    transition: transform var(--transition-slow), filter var(--transition-slow);

    /* 通常時は少しだけ暗くして、ホバー時に明るく見せる準備をします */
    filter: brightness(0.9) contrast(1.05);
}

/* ▼ カードにマウスを乗せた時、画像をズーム＆明るくする（新しく追加） ▼ */
.difference_card:hover .difference_image {
    /* 画像を1.05倍にゆっくり拡大します */
    transform: scale(1.05);

    /* 画像を元の明るさに戻して、ハッと目を引くようにします */
    filter: brightness(1) contrast(1.1);
}

/* ▼ スマホ版（画面幅が 768px 以下）での表示ルール ▼ */
@media (max-width: 768px) {
    .difference_grid {
        /* スマホでは画面が狭いので、3列ではなく 1列（縦並び）に切り替えます */
        grid-template-columns: 1fr;
    }
}

/* ========================================================================================================================
   Concept Section
======================================================================================================================== */
.concept {
    /* セクションの背景色をサーフェスカラーに変更（入れ替え） */
    background-color: var(--color-bg-surface);
    position: relative;
    overflow: hidden;
}

.concept::before {
    content: '';
    position: absolute;
    top: 50%;
    left: -100px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, var(--color-accent-gold) 0%, transparent 70%);
    opacity: 0.04;
    transform: translateY(-50%);
    animation: conceptGlow 8s ease-in-out infinite alternate;
}

@keyframes conceptGlow {
    0% {
        opacity: 0.03;
        transform: translateY(-50%) scale(1);
    }

    100% {
        opacity: 0.06;
        transform: translateY(-50%) scale(1.2);
    }
}

/* ▼ コンセプトセクション全体の「横幅」を決める設定 ▼ */
.concept-container {
    /* 
       以前は 800px でしたが、見出しの「ただの制作会社ではありません。」が
       折り返さないように 1000px に広げました。
    */
    max-width: 1000px;

}



/* ▼ タイトル下のゴールドの装飾ライン ▼ */
.concept-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent-gold), var(--color-accent-gold-light));
    margin-top: 24px;
    position: relative;
    overflow: hidden;
}

.concept-divider::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0% {
        left: -100%;
    }

    100% {
        left: 200%;
    }
}

/* ▼ 番号つき段落ブロック ▼ */
.concept-paragraph {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 32px 0;
    border-bottom: 1px solid var(--color-border);
    position: relative;
    transition: var(--transition-fast);
}

.concept-paragraph::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 0;
    background: linear-gradient(180deg, var(--color-accent-gold), transparent);
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.concept-paragraph:hover::before {
    height: 100%;
}

.concept-paragraph:hover {
    padding-left: 16px;
}

.concept-paragraph:first-child {
    padding-top: 0;
}

.concept-paragraph:last-child {
    border-bottom: none;
}

/* ========================================
   ▼ 02番の段落（HP集客のプロフェッショナル）に背景画像を追加
   ======================================== */
.concept-paragraph.custom-delay-1 {
    /* 
       【背景画像と明るさの調整】
       ・linear-gradient: 画像の上に重ねる「黒い影」の濃さを調整します。
         (0.3) などの数字を小さくすると画像が明るくなり、(0.9) に近づけると暗くなります。
       ・url: 画像の場所（パス）を指定します。
       ・center/cover: 画像を常に中央に配置し、隙間なく表示します。
    */
    background: url('../img/wallpaper_02.jpg') center/cover no-repeat;

    /* 
       【サイズと余白の調整】
       ・60px: 上下の余白。ここを大きくすると、背景画像が見える面積が上下に広がります。
       ・40px: 左右の余白。
    */
    padding: 60px 40px;

    /* 段落どうしの縦の間隔 */
    margin: 32px 0;

    /* 角の丸み（数字を大きくするとさらに丸くなります） */
    border-radius: 12px;

    /* 段落の下の線を消す（背景があるため不要になります） */
    border-bottom: none;

    /* 動きの滑らかさ（0.4s = 0.4秒かけて変化する） */
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.4s ease;
}

/* マウスを乗せた時（ホバー）の演出 */
.concept-paragraph.custom-delay-1:hover {
    /* 上に 8px 浮かせます */
    transform: translateY(-8px);

    /* ふんわりとした大きな影をつけて立体感を出します */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}



.concept-num {
    font-family: var(--font-family-serif);
    font-size: 2rem;
    font-weight: 700;
    color: rgba(211, 163, 7, 0.356);
    line-height: 1;
    flex-shrink: 0;
    min-width: 48px;
    transition: color 0.4s ease;
}

.concept-paragraph:hover .concept-num {
    color: rgb(212, 175, 55);
}

.concept-body p {
    font-family: var(--font-family-serif);
    font-size: clamp(0.8rem, 2.2vw, 1.1rem);
    line-height: 2.0;
    letter-spacing: 0.08em;
    margin-bottom: 0;
    color: #e0e0e5;
}

/* ▼ キーワード強調（ゴールドのアンダーライン風） ▼ */
.keyword {
    font-style: normal;
    color: var(--color-text-main);
    background: linear-gradient(transparent 60%, rgba(212, 175, 55, 0.15) 60%);
    padding: 0 2px;
    transition: background 0.3s ease;
}

.concept-paragraph:hover .keyword {
    background: linear-gradient(transparent 60%, rgba(212, 175, 55, 0.3) 60%);
}

/* ▼ ハイライト引用ボックス ▼ */
.concept-highlight-box {
    position: relative;
    margin-top: 56px;
    padding: 40px 32px;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 4px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.03) 0%, transparent 60%);
    overflow: hidden;
}


.concept-highlight {
    font-family: var(--font-family-serif);
    font-size: clamp(0.85rem, 2.4vw, 1.2rem);
    line-height: 1.8;
    letter-spacing: 0.1em;
    color: var(--color-accent-gold);
    border-left: 3px solid var(--color-accent-gold);
    padding-left: 24px;
    margin: 0;
}

.concept-highlight strong {
    color: var(--color-accent-gold-light);
    font-weight: 600;
}

@media (max-width: 768px) {
    .concept-paragraph {
        gap: 16px;
        padding: 24px 0;
    }

    .concept-num {
        font-size: 1.5rem;
        min-width: 36px;
    }

    .concept-highlight-box {
        padding: 28px 20px;
    }
}


/* ========================================================================================================================
   Gallery Section - Cinematic Horizontal
======================================================================================================================== */
.gallery-section {
    width: 100%;
    padding: 0 0 120px 0;
}

.gallery-hero {
    width: 100%;
    background: url('../img/wallpaper_03.jpg') center/cover no-repeat;
    padding: 80px 0;
    margin-bottom: 80px;
}

@media (max-width: 768px) {
    .gallery-section {
        padding: 80px 0;
    }
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 24px);
}

/* Header - Centered Layout */
.gallery-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
    gap: 40px;
}

.header-center {
    width: 100%;
}

/* ▼▼▼ AIタレントセクションの大きなタイトル（ここを修正するとタイトルの大きさなどが変わります） ▼▼▼ */
.gallery-section .section-title {
    /* ▼ タイトルのフォントをクラシックなセリフ体（Cinzel）に指定 ▼ */
    /* 別のフォントに変えたい場合は 'Cinzel' の部分を変更してください */
    font-family: 'Cinzel', serif;
    /* ▼ フォントの太さ（400=細い、500=普通、600=やや太い、700=太い） ▼ */
    font-weight: 500;

    /* ▼ 画面幅に合わせて文字サイズを自動調整 ▼ */
    /* 
       clamp(最小サイズ, 画面幅に連動するサイズ, 最大サイズ)
       ・2rem: 最小サイズ
       ・4vw: 画面幅の 4%（ここで大きさを調整します）
       ・3.5rem: 最大サイズ
    */
    font-size: clamp(2rem, 4vw, 3.5rem);

    /* ▼ 文字の間隔（大きくすると文字の間が広がり、高級感が出ます）▼ */
    /* 元は 0.35em → 半分の 0.18em に修正しました */
    letter-spacing: 0.1em;
    /* ▼ 大文字表記に変換 ▼ */
    text-transform: uppercase;

    margin-bottom: 32px;
    line-height: 1.2;

    /* ▼ 文字をゴールドのグラデーションにする設定 ▼ */
    /* 
       色を変更したい場合は、以下のカラーコードを変更してください。
       左から順番に (開始の色 0%, 中間の光る部分 45%, 終了の色 100%) となっています。
    */
    background: linear-gradient(135deg, #c9a84c 0%, #f5e6a3 45%, #c9a84c 100%);

    /* 背景のグラデーションを文字の形に切り抜く設定 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* ▼ 文字の周りに光るエフェクト（ドロップシャドウ）をつける設定 ▼ */
    /* 
       0 0 15px の「15px」を大きくすると光が広がり、小さくするとシャープになります。
       rgba(...) の最後の「0.4」は光の強さ（不透明度）です。1.0で一番強く（濃く）なります。
    */
    filter: drop-shadow(0 0 15px rgba(201, 168, 76, 0.4));
}

.gallery-section .section-label {
    letter-spacing: 0.25em;
    font-size: 0.7rem;
    margin-bottom: 12px;
}

/* ▼▼▼ AIタレントセクションの説明文（ここを修正すると文字の大きさや行間が変わります） ▼▼▼ */
.gallery-section .section-desc {
    /* ▼ 横幅の制限（ここを大きくすると、1行に表示される文字数が増えて折り返しが減ります） ▼ */
    max-width: 1000px;
    margin: 0 auto;

    /* ▼ 画面幅に合わせて説明文のサイズを自動調整 ▼ */
    /* 
       ・0.85rem: 最小サイズ
       ・2vw: 画面幅の 2%（ここで大きさを調整します）
       ・1.1rem: 最大サイズ
    */
    font-size: clamp(0.85rem, 2vw, 1.4rem);

    line-height: 2.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.text-highlight {
    border-bottom: 1px solid rgba(223, 194, 106, 0.8);
    padding-bottom: 2px;
}

/* Gallery Grid */
.gallery-track-wrapper {
    margin: 0;
    padding: 0;
}

.gallery-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Gallery Card */
.gallery-card {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 2px;
}

.card-image-wrapper {
    position: relative;
    aspect-ratio: 4/5;
    overflow: hidden;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}

.gallery-card:hover .gallery-img {
    transform: scale(1.06);
}

/* Cinematic Bars */
.cinematic-bar-top,
.cinematic-bar-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 0;
    background: var(--color-bg-base);
    z-index: 2;
    transition: height 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cinematic-bar-top {
    top: 0;
}

.cinematic-bar-bottom {
    bottom: 0;
}

/* Card Overlay */
.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 3;
    padding: 32px;
    background: linear-gradient(180deg, transparent 0%, rgba(8, 8, 10, 0.9) 100%);
}

.card-tag {
    display: inline-block;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    color: var(--color-accent-gold);
    text-transform: uppercase;
    margin-bottom: 8px;
    padding: 2px 0;
    border-bottom: 1px solid var(--color-accent-gold);
}

.card-title {
    font-family: var(--font-family-serif);
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.card-desc {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    line-height: 1.7;
}

/* CTA Banner */
.cta-banner {
    background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-surface-light) 100%);
    border: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all var(--transition-slow);
    text-decoration: none;
    color: inherit;
    border-radius: 2px;
    padding: 80px 24px;
    margin-top: 48px;
    width: 100%;
}

.cta-banner:hover {
    border-color: rgba(212, 175, 55, 0.5);
    background: linear-gradient(135deg, var(--color-bg-surface-light) 0%, rgba(212, 175, 55, 0.05) 100%);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.cta-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.cta-icon {
    width: 64px;
    height: 64px;
    border: 1px solid var(--color-accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-accent-gold);
    transition: all var(--transition-slow);
}

.cta-banner:hover .cta-icon {
    background: var(--color-accent-gold);
    color: var(--color-bg-base);
    transform: scale(1.1);
}

.cta-text {
    font-family: var(--font-family-serif);
    font-size: 1.2rem;
    letter-spacing: 0.1em;
}

.cta-subtext {
    font-size: 0.68rem;
    color: var(--color-text-muted);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

@media (max-width: 768px) {
    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .gallery-track {
        grid-template-columns: 1fr;
    }

    .cta-banner {
        padding: 48px 24px;
        margin-top: 32px;
    }
}

/* ========================================================================================================================
   Use Cases Section
======================================================================================================================== */
.usecases {
    background-color: var(--color-bg-surface);
}

.usecases-wrapper {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.usecase-row {
    background-color: var(--color-bg-base);
    border: 1px solid var(--color-border);
    padding: 64px;
    position: relative;
    overflow: hidden;
}

.usecase-row::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-accent-gold);
}

.usecase-title {
    font-size: clamp(1rem, 3.2vw, 1.6rem);
    margin-bottom: 24px;
}

.usecase-desc {
    color: var(--color-text-muted);
    font-size: clamp(0.8rem, 2.2vw, 1rem);
    line-height: 1.9;
}

@media (max-width: 768px) {
    .usecase-row {
        padding: 40px 24px;
    }
}

/* ========================================================================================================================
   Workflow Section
======================================================================================================================== */
.workflow {
    background-color: var(--color-bg-base);
}

.workflow-steps {
    display: flex;
    justify-content: space-between;
    margin-top: 64px;
    position: relative;
}

.workflow-steps::before {
    content: '';
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-border);
    z-index: 0;
}

.step {
    flex: 1;
    position: relative;
    z-index: 1;
    padding: 0 20px;
    text-align: center;
}

.step-number {
    width: 60px;
    height: 60px;
    background-color: var(--color-bg-base);
    border: 1px solid var(--color-accent-gold);
    color: var(--color-accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-family-serif);
    font-size: 1.2rem;
    margin: 0 auto 24px;
}

.step-title {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    margin-bottom: 16px;
}

.step-desc {
    font-size: clamp(0.78rem, 2vw, 0.9rem);
    color: var(--color-text-muted);
    text-align: left;
}

@media (max-width: 768px) {
    .workflow-steps {
        flex-direction: column;
        gap: 40px;
    }

    .workflow-steps::before {
        display: none;
    }

    .step-desc {
        text-align: center;
    }
}

/* ========================================================================================================================
   CTA / Contact Form
======================================================================================================================== */
.cta {
    background: linear-gradient(135deg, var(--color-bg-surface) 0%, var(--color-bg-base) 100%);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.cta-title {
    font-size: clamp(1.1rem, 4vw, 2.5rem);
    margin-bottom: 24px;
    line-height: 1.4;
}

.cta-desc {
    color: var(--color-text-muted);
    margin-bottom: 48px;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    text-align: left;
}

.form-group {
    margin-bottom: 24px;
}

.form-control {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border);
    padding: 16px 0;
    color: var(--color-text-main);
    font-family: var(--font-family-serif);
    font-size: 1rem;
    transition: var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent-gold);
}

.form-submit {
    width: 100%;
    margin-top: 24px;
}

/* CTA mobile override removed — clamp() handles this */

/* ========================================================================================================================
   Footer
======================================================================================================================== */
.footer {
    padding: 48px 0;
    background-color: var(--color-bg-base);
}

.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.footer-logo {
    font-family: var(--font-family-serif);
    font-size: 1.2rem;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.copyright {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    opacity: 0.5;
}

/* ========================================================================================================================
   Animations
======================================================================================================================== */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.custom-delay-1 {
    transition-delay: 0.2s;
}

.custom-delay-2 {
    transition-delay: 0.4s;
}

.custom-delay-3 {
    transition-delay: 0.6s;
}

/* Subtle zoom effect for hero image on load */
@keyframes heroZoom {
    from {
        transform: scale(1.1);
    }

    to {
        transform: scale(1);
    }
}

.hero-img.is-loaded {
    animation: heroZoom 10s ease-out forwards;
}