/* --------------- レスポンシブのための設定 ここから ---------------*/
/* -----------------------------統一設定 ここから----------------------------- */
:root {
    /* --- カラー（Color） --- */
    --base-color: #e5e7eb; /* 背景色 */
    --main-color: #0f172a; /* メインカラー */
    --accent-color: #38bdf8; /* アクセント（ボタンなど） */
    --accent-color-sub: #f59e0b; /* アクセント（ボタンなど） */

    --h1-white-color: #ffffff;
    /* --h1-black-color: #020617; こんかい使わない */
    --h23-color: #0f172a; /* 見出しの色 メインと同じ*/
    --text-color: #0f172a; /* 基本の文字色 */

    --subtext-color: #475569; /*補足テキスト */
    --ui-color: #ffffff; /* ホワイト要素 */

    --form-border-color: rgba(
        2,
        6,
        23,
        0.08
    ); /* 半透明　セッション、ボタンなどに利用 */
    --form-bg-color: #ffffff; /* フォームバックグラウンド */

    /* グラデーションも変数として登録できる 上から下*/
    /* --sheet-gradient: linear-gradient(
        to bottom,
        var(--sheet-color_concept_light),
        var(--sheet-color_concept_dark)
    ); */

    /* ドロップシャドウ */
    --drop-shadow: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.8));
    --drop-shadow-btn: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    --card-drop-shadow: drop-shadow(8px 8px 8px rgba(0, 0, 0, 0.25));

    /* --- フォントウェイト（太さ） --- */
    --fw-bold: 700; /* ボールド（太字） */
    --fw-medium: 500; /* ミディアム（中太） */
    --fw-regular: 400; /* レギュラー（標準） */

    /*  --- ボタンの枠太さと色 ---  */
    /* --border-button-bold_color: 3px solid #d8d3cf; ボタンの枠の太さ */
    --border-button-radius: 24px; /* 枠の丸み */

    /* --- フォントサイズ --- */
    --fs-h1: clamp(36px, 5vw, 64px);
    --fs-h2: clamp(20px, 4vw, 48px); /* 固定→clampに変更推奨 */
    /* --fs-h3: clamp(24px, 3vw, 36px); 固定→clampに変更推奨 */
    --fs-h3: clamp(18px, 2vw, 24px); /* 固定→clampに変更推奨 */
    --fs-h4: clamp(16px, 1.6vw, 20px); /* 2vw → 1.6vwに修正 */
    --fs-h5: clamp(12px, 1.4vw, 18px);
    --fs-text-bold: clamp(14px, 1.2vw, 16px);
    /* --fs-Catch-middle-bold: 24px; */
    /* --fs-Catch-large-bold: 48px;  */
    --fs-text: clamp(14px, 1.2vw, 16px);
    --fs-low: clamp(10px, 1vw, 12px);

    /* --- フォント種類 --- */
    /* Google Fontsを読み込む */
    --font-Play-en-serif: 'Playfair Display', serif;
    --font-Inter-en-sans: 'Inter', sans-serif;
    --font-Noto-jp-sans: 'Noto Sans JP', sans-serif;

    /* 行間 line-height */
    --lh-h1-fv-copy: 1.1; /* 見出し */
    --lh-h2-sub: 1.8; /* h2の日本語サブタイトル */
    --lh-h3h4: 1.2; /* ゆったり */
    --lh-cardcatchcopy: 1.2; /* カードのキャッチコピー */
    --lh-workscatchcopy: 1.5; /* worksのキャッチコピー */
    --lh-text-bold: 1.2; /* テキストの太文字日本語文字行間 */
    --lh-text: 1.8; /* テキストの日本語文字行間 */
    --lh-text-low: 1.6; /* テキストの小日本語文字行間 */

    /* 文字間 letter-spacing */
    --ls-h1-fv-copy: 0.1em; /* h1のキャッチコピー */
    --ls-text: 0.1em; /* テキストの日本語文字間 */
    --ls-h3h4: 0.05em; /* h3の日本語見出し */
    --ls-cardcatchcopy: 0.08em; /* カードのキャッチコピー */
    --ls-text-low: 0.1em; /* テキストの小日本語文字行間 */
}

/* h3の設定統合 */
h3 {
    font-family: var(--font-Noto-jp-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h3h4);
    letter-spacing: var(--ls-h3h4);
}

/* h4の設定統合 */
h4 {
    font-family: var(--font-Noto-jp-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-h3h4);
    letter-spacing: var(--ls-h3h4);
}

/* 通常文字統合 */
p {
    font-family: var(--font-Noto-jp-sans);
    font-size: var(--fs-text);
    line-height: var(--lh-text);
    letter-spacing: var(--ls-text);
}

/* 親要素を画像が超えないように設定する */
img {
    max-width: 100%;
    height: auto;
}
/* -----------------------------統一設定 ここまで----------------------------- */

/* -----------------------------TOPここから--- */
@media (max-width: 768px) {
    .fv_catchcopy {
        text-align: center;
        width: 100%;
        margin-bottom: 42px;
    }

    .fv-copy-all {
        padding: 0 16px;
    }

    .fv-name {
        display: flex;
        flex-direction: column; /* 縦並びにする */
        align-items: start; /* 中央揃えにする場合 */
        justify-content: center;
        position: relative;
        /* padding-top: 80px; */
    }

    .fv-name-first {
        max-width: 500px;
        width: 80%; /* 調整 */
        z-index: 2; /* 上に重ねる */
    }

    .fv-name-last {
        max-width: 500px;
        width: 55%; /* 調整 */
        margin-top: -5%; /* 不要な箇所重ねる調整 */
        /* align-self: flex-end;  */
        /* 少し右にずらして重ねる場合 */
        z-index: 1;

        padding-left: 1em;
    }

    /* --- ハンバーガーメニュー本体 --- */
    .h-hamburger {
        top: 16px;
        right: 32px;
        z-index: 9999;
        width: 48px;
        height: 48px;
        position: absolute;
        display: flex;
        flex-direction: column; /* テキスト → 線ラッパー の縦並び */
        align-items: center;
        justify-content: center;
        gap: 6px;
        cursor: pointer;
    }

    /* MENUテキスト */
    .h-hamburger-text {
        color: var(--base-color);
        font-size: 10px;
        font-weight: var(--fw-bold);
        letter-spacing: 0.1em;
        line-height: 1;
        transition: 0.3s;
        padding-bottom: 10px;
    }

    /* 線のラッパー：2本線を重ねる土台 */
    .h-hamburger-lines {
        position: relative; /* 子のspanをここ基準で重ねる */
        width: 40px;
        height: 3px; /* 線1本分の高さ */
    }

    /* 2本の線 共通設定 */
    .h-hamburger-lines .line {
        position: absolute; /* ラッパー基準で重ねる */
        top: 0; /* 2本とも同じ位置からスタート */
        left: 0;
        display: block;
        width: 40px;
        height: 3px;
        border-radius: 2px;
        background: var(--base-color);
        transition: 0.5s;
    }

    /* 通常時：上の線を上にずらして2本に見せる */
    .h-hamburger-lines .line:first-child {
        transform: translateY(-8px); /* 上にずらす */
    }

    /* 通常時：下の線はそのまま */
    .h-hamburger-lines .line:last-child {
        transform: translateY(8px); /* 下にずらす */
    }

    /* × アニメーション：上の線 → ＼ */
    .h-hamburger.close .h-hamburger-lines .line:first-child {
        transform: rotate(45deg); /* translateYを消してrotateだけ */
    }

    /* × アニメーション：下の線 → ／ */
    .h-hamburger.close .h-hamburger-lines .line:last-child {
        transform: rotate(-45deg); /* 同じ位置でrotateだけ */
    }

    /* CLOSEテキスト切り替え */
    .h-hamburger.close .h-hamburger-text {
        font-size: 0;
        transition: 0.3s;
    }

    .h-hamburger.close .h-hamburger-text::before {
        content: 'CLOSE';
        font-size: 8px;
        letter-spacing: 0.05em;
        color: var(--base-color);
    }

    /*  ×（クローズ）アニメーション */
    .h-hamburger.close span {
        background: rgba(0, 0, 0, 0); /* 中央の線を透明に */
    }
    .h-hamburger.close span::before {
        top: 0;
        transform: rotate(45deg); /* 上の線を斜め45度 */
    }
    .h-hamburger.close span::after {
        bottom: 0;
        transform: rotate(-45deg); /* 下の線を逆に45度 */
    }

    /* --- ⑱ ナビリスト 最初非表示--- */
    .h-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: var(--main-color);
        z-index: 999;
        translate: 0 -100%; /* 初期状態：画面上に隠す */
        display: flex; /* display:none は使わない */
        justify-content: center;
        align-items: center;
    }

    .h-nav-list {
        flex-direction: column; /* 横並び→縦並びに変更 */
        gap: 32px;
    }
    .h-nav-list a {
        color: var(--base-color);
    }

    h2 {
        padding: 42px 8px 30px 8px;
    }

    /* profileの文字幅調整 */
    .profile {
        padding: 0 32px;
    }

    /* titleあしらい */
    .en_main {
        gap: 24px;
    }

    .en_main::before,
    .en_main::after {
        width: 110px;
    }

    /* -----------------------------about ここから--- */

    /* -----------------------------worksここから--- */
    /* worksの各ページ */
    .work-text {
        width: 100%;
        padding: 0 16px;
    }

    /* ボタン配置 */
    .works-btn-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    /* 画像と文字の入れ替え */
    /* ① 縦並びにする */
    .works-container {
        display: flex;
        flex-direction: column;
    }

    /* ② 画像（works-visual-img）を先頭に移動 */
    .works-visual-img {
        order: -1; /* テキストより前に表示 */
        width: 100%;
    }

    /* ③ 画像を幅いっぱいに表示 */
    .works-img {
        width: 100%;
        height: auto;
        display: block;
    }

    .card-img {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    /* ④ テキストエリアも幅いっぱいに */
    .work-text {
        width: 100%;
    }

    /* bannerのレスポンシブ */
    .visual-block {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .visual-header {
        order: -1; /* テキストより前に表示 */
        width: 100%;
    }

    .visual-content {
        width: 100%;
    }

    .works-visual-container {
        gap: 32px;
    }

    /* -----------------------------CONTACTここから--- */

    .contact_containers {
        max-width: 340px;
        width: 100%;
        padding: 0 16px;
    }
}

/* -----------------------------パラックスここから--- */
/* パラックス表示のため、iPhoneのWebKit（Chrome・Safari両方）に対応 20260421NG*/
@supports (-webkit-touch-callout: none) {
    #title_works {
        background-attachment: scroll; /* fixedをscrollに切り替え */
    }
}

/* ========================================
   Logo Design Collection
   左画像 + 右コンセプトレイアウト
======================================== */

/* ========================================
   Smartphone
======================================== */

@media screen and (max-width: 768px) {
    .logo-work-item {
        display: block;

        padding: 4px 0;
    }

    .logo-work-image {
        width: 100%;

        max-width: none;

        min-width: auto;

        margin-bottom: 16px;

        padding: 32px;
    }

    .logo-work-image .works-img {
        max-width: 220px;

        margin: 0 auto;
    }

    .works-sub-title {
        font-size: var(--fs-h4);

        margin-bottom: 8px;
    } 

    .works-logo-textarea {
        margin-bottom: 24px;
    }

    .logo-work-images {
        display: block;
    }
}