/*
 * 注釈：
 * BEM（ベム）: Block, Element, Modifierの略。CSSのクラス名を設計するための手法。
 * - .block { ... }               // コンポーネントの大枠（ブロック）
 * - .block__element { ... }      // ブロックを構成する要素（エレメント）
 * - .block--modifier { ... }     // ブロックの見た目や状態のバリエーション（モディファイア）
 *
 * CSSカスタムプロパティ: `--`で始まる変数のこと。色やフォントサイズなどを一元管理できる。
 * - 定義: :root { --primary-color: #333; }
 * - 使用: .selector { color: var(--primary-color); }
 */

/*
 * ===============================================
 * デザイン・トークン (Design Tokens)
 * ===============================================
 */
 :root {
    /* Colors */
    --color-primary: #06C755; /* デザインのメインカラー（緑） */
    --color-secondary: #f9d423; /* サブカラー（黄） */
    --color-text-main: #333333;
    --color-text-white: #ffffff;
    --color-background: #ffffff;

    /* Breakpoints */
    --bp-tab: 765px;
    --bp-pc: 1080px;
}

/*
 * ===============================================
 * 基本設定
 * ===============================================
 */
body {
    margin: 0;
    font-family: sans-serif;
    background-color: var(--color-background);
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

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

/*
 * ===============================================
 * 共通コンテナ
 * ===============================================
 */
 .l-container {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
}

/*
 * ===============================================
 * 共通コンポーネント: セクションタイトル (c-section-title)
 * ===============================================
 */
 .c-section-title {
    position: relative; /* 下線（疑似要素）の基準位置にする */
    display: inline-block; /* テキストの幅にフィットさせる */
    padding-bottom: 16px; /* 下線との余白を確保 */
    font-size: 28px;
    font-weight: bold;
    text-align: center;
}

.c-section-title::after {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 50%; /* ★ 中央から配置を開始 */
    transform: translateX(-50%); /* ★ 要素の幅の半分だけ左に戻して完全な中央揃えに */
    
    width: 420px; /* ★ 指定された横幅 */
    height: 4px;  /* 線の太さ */
    background-color: var(--color-primary);
}

/*
 * ===============================================
 * ヘッダーレイアウト (l-header) - 修正後
 * ===============================================
 */
 .l-header {
    position: sticky;
    top: 0;
    z-index: 50;
    width: 100%;
    background-color: var(--color-background);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    height: 90px; /* ★ヘッダーの高さを90pxに固定 */
}

.l-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%; /* 親要素の高さ(90px)に合わせる */
    box-sizing: border-box; 
    
    /* ★max-widthを削除し、左右のpaddingで余白を確保 */
    padding: 0 24px; 
}

/* ★レスポンシブ用のmax-width設定は不要になったので削除 */


/*
 * ===============================================
 * ロゴ (c-logo) - 修正後
 * ===============================================
 */
.c-logo img {
    /* ★90pxのヘッダー内に収まるように高さを調整 */
    max-height: 40px; 
}


/*
 * ===============================================
 * ヘッダーCTA (c-header-cta) - 修正後
 * ===============================================
 */
.c-header-cta {
    display: none;
}

@media (min-width: 1080px) {
    .c-header-cta {
        display: flex;
        align-items: stretch;
        height: 70px; /* ★CTA全体の高さを調整 */
        border: 2px solid #808080;
        overflow: hidden; /* 角丸に合わせて中身をマスク */
    }
}

.c-header-cta__info {
    display: flex;

}

.c-header-cta__label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    line-height: 1.2;
    /* ★縦書き(writing-mode)を削除 */
}

.c-header-cta__tel-block {
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.c-header-cta__tel-number {
    font-size: 24px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.2;
}
.c-header-cta__time {
    font-size: 12px;
}

.c-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-white);
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    /* ★幅と高さをCTAの高さに合わせる */
    width: 90px;
    height: 100%; 
    padding: 8px;
    box-sizing: border-box;
    /* ★aspect-ratioは削除 */
}

.c-btn__icon {
    width: 32px; /* アイコンサイズ調整 */
    height: 32px;
    margin-bottom: 4px;
}

/* 共通ボタン（修正後） */
.c-btn {
    display: flex;
    flex-direction: column; /* アイコンとテキストを縦に並べる */
    align-items: center;
    justify-content: center;
    color: var(--color-text-white);
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    width: 110px; /* 正方形にするための幅を指定 */
    aspect-ratio: 1 / 1; /* アスペクト比を1:1（正方形）に保つ */
    padding: 8px;
    box-sizing: border-box;
}

.c-btn__icon {
    margin-bottom: 8px;
}

.c-btn__text {
    line-height: 1.3;
}

.c-btn--mail {
    background-color: var(--color-secondary);
}
.c-btn--line {
    background-color: var(--color-primary);
}

/*
 * ===============================================
 * ハンバーガーメニュー (c-hamburger)
 * ===============================================
 */
.c-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    box-sizing: border-box;
}

.c-hamburger span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary);
    border-radius: 2px;
    transition: all 0.3s;
}

/*
 * ===============================================
 * ハンバーガーメニュー (c-hamburger) - 修正後
 * ===============================================
 */
 .c-hamburger.is-active span:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}
.c-hamburger.is-active span:nth-child(2) {
    opacity: 0;
}
.c-hamburger.is-active span:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}


/*
 * ===============================================
 * グローバルナビゲーション (g-nav)
 * ===============================================
 */
.g-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 300px; /* メニューの幅 */
    max-width: 100%;
    height: 100vh;
    background-color: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.1);
    transform: translateX(100%); /* 初期状態では画面外に隠す */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    visibility: hidden;
    z-index: 100; /* ヘッダーより手前に表示 */
}

/* is-nav-activeクラスが付与されたら表示 */
.is-nav-active .g-nav {
    transform: translateX(0);
    visibility: visible;
}

.g-nav__list {
    padding-top: 80px;
}

.g-nav__link {
    display: block;
    padding: 16px 24px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
}

/*
 * ===============================================
 * ナビゲーション表示時の背景オーバーレイ
 * ===============================================
 */
 body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* 半透明の黒 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s;
    z-index: 99; /* ナビゲーションより一段階下に配置 */
}

/* is-nav-activeクラスが付与されたらオーバーレイを表示 */
body.is-nav-active::after {
    opacity: 1;
    visibility: visible;
}

/*
 * ===============================================
 * キービジュアル (p-kv) - 修正版
 * ===============================================
 */
.p-kv {
    position: relative;
    width: 100%;
    height: 550px;
    background-image: url('/img/kv-background.png');
    background-size: cover;
    background-position: center;
    overflow: hidden;
    font-family: 'M PLUS 1p', sans-serif;
}

.p-kv__inner {
    position: relative;
    max-width: 780px; /* ★ 君の調整を維持 */
    height: 100%;
    margin: 0 auto;
}

/* ★ 追加：グループ1（タイトル関連）のコンテナ */
.p-kv__title-group {
    position: absolute;
    top: 20px; /* 君が調整したtitleの位置を継承 */
    left: 15px;
    z-index: 10;
    
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
}

/* ★ 追加：「回収なら」の縦書きラベル */
.p-kv__catch-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    line-height: 1;
    background-color: var(--color-primary);
}
.p-kv__catch-label-large {
    font-size: 86px; /* 君が調整したサイズを継承 */
}
.p-kv__catch-label-small {
    font-size: 20px;
    margin-top: 4px;
}

/* ★ 変更：メインキャッチコピー（位置指定を削除） */
.p-kv__title {
    /* position: absolute; top, left, z-index は親グループに移動 */
    font-size: 80px;
    font-weight: 900;
    line-height: 1.2;
    color: #333;
    -webkit-text-stroke: 1.5px #333;
    text-stroke: 1.5px #333;
}

.p-kv__title-main {
    display: block;
    position: relative;
}

.p-kv__title-main::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 10px;
    width: 100%;
    height: 25px;
    background-color: var(--color-primary);
    z-index: -1;
    transform: skewX(-15deg);
}


/* ★ 追加：グループ2（エリア情報）のコンテナ */
.p-kv__area-group {
    position: absolute;
    top: 20px; /* 君が調整したmap-areaの位置を継承 */
    right: 20px;
    z-index: 5;
    background-color: var(--color-primary);
    padding: 6px;
    display: flex;
    align-items: center;
    flex-direction: column;
}
/* ★ 追加：エリア情報のテキスト */
.p-kv__area-text {
    color: #fff;
    font-weight: 800;
}
/* ★ 追加：エリア情報のマップ画像 */
.p-kv__area-map {
   width: 100%;
   max-width: 180px;
   height: auto;
}

/* 中央の黄色いバナー（君の調整を維持） */
.p-kv__banner {
    position: absolute;
    top: 220px;
    left: -5px;
    background-color: var(--color-secondary);
    color: #000;
    padding: 5px 30px;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.5;
    text-align: center;
    border: 4px solid #000;
    transform: rotate(-4deg);
}


/* 左下の料金（君の調整を維持しつつ、重複を整理） */
.p-kv__price {
    position: absolute;
    left: 20px;
    bottom: 30px;
    line-height: 1;
    font-weight: 900;
}
.p-kv__price-label {
    font-size: 24px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    padding: 4px 12px;
    display: inline-block;
}
.p-kv__price-main,
.p-kv__price-sub {
    color: #e60012;
    text-shadow: 3px 4px 6px var(--color-secondary);
}
.p-kv__price-main {
    margin-top: 8px;
}
.p-kv__price-number {
    font-size: 90px;
    letter-spacing: -5px;
}
.p-kv__price-unit {
    font-size: 32px;
}
.p-kv__price-sub {
    font-size: 50px;
    text-align: right;
}

/* 右下の人物画像（君の調整を維持） */
.p-kv__persons {
    position: absolute;
    right: 50px;
    bottom: 0;
    width: 300px;
}
.p-kv__persons img {
    width: 100%;
}



/* ===============================================
 * Large SP / Small Tablet (429px〜764px)
 * ===============================================
 */
 @media (min-width: 429px) and (max-width: 764px) {
    .p-kv {
        /* 高さを自動にして、コンテンツが収まるようにする */
        height: auto;
        padding-top: 50px;
    }

    .p-kv__inner {
        /* 絶対配置の基準点を解除 */
        position: static;
        
        /* Flexboxを使い、子要素を縦一列・中央に並べる */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px; /* 要素間の隙間 */
    }

    /* --- 各コンテンツブロックの絶対配置を解除 --- */
    .p-kv__title-group,
    .p-kv__area-group,
    .p-kv__banner,
    .p-kv__price,
    .p-kv__persons {
        position: static;
        /* 位置指定をリセット */
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    /* --- マップエリアを非表示 --- */
    .p-kv__area-group {
        display: none;
    }
}

/*
 * ===============================================
 * レスポンシブ対応 (〜428px)
 * ===============================================
 */
 @media (max-width: 428px) {

    /* --- 全体のコンテナ設定 --- */
    .p-kv {
        height: auto; /* ★ 高さを自動にして、中身が収まるようにする */
        padding: 20px 0;
    }

    .p-kv__inner {
        position: static; /* ★ 絶対配置の基準を解除 */
        display: flex; /* ★ Flexboxで子要素を並べる */
        flex-direction: column; /* 縦に並べる */
        align-items: center; /* 中央揃え */
        gap: 10px; /* 要素間の隙間 */
        max-width: 90%;
    }

    /* --- 各要素の絶対配置を解除 --- */
    .p-kv__title-group,
    .p-kv__area-group,
    .p-kv__banner,
    .p-kv__price,
    .p-kv__persons {
        position: static;
        /* 位置指定をリセット */
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none; /* 傾きなどをリセット */
        text-align: center;
    }
    
    /* --- 個別の調整 --- */

    /* ★ エリア情報は非表示に */
    .p-kv__area-group {
        display: none;
    }
    
    /* タイトルグループ内の配置を調整 */
    .p-kv__title-group {
        /* ★ PCと同じグリッドレイアウトに戻して、横並びを再現 */
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 10px;
        order: 1;
        width: 100%; /* 幅を100%にしてレイアウトを安定させる */
    }

    .p-kv__title {
        text-align: center;
        font-size: 60px;
    }

    .p-kv__catch-label-large {
        font-size: 60px;
    }

    /* バナーの傾きだけ元に戻す */
    .p-kv__banner {
        transform: rotate(-4deg);
        order: 4; /* 表示順：4番目 */
        margin-top: -50px; /* 数値が大きいほど、より上に重なる */
        position: relative;
        z-index: 2;
    }

    /* ★ 料金エリア */
    .p-kv__price {
        order: 2;
        /* ★ この要素だけ個別に左寄せにする */
        align-self: flex-start;
        text-align: left; /* 中のテキストも左寄せに */
    }

    .p-kv__price-number {
        font-size: 80px;
        letter-spacing: -5px;
    }

    /* ★ 人物画像を料金の下に */
    .p-kv__persons {
        order: 3; /* 表示順：3番目 */
    }

    .p-kv__price-sub {
        /* ★ PCで指定されていたtext-align: rightを上書き */
        text-align: left;
        font-size: 45px;
    }

    .p-kv__banner-text {
        font-size: 22px;
    }

}

@media (max-width: 1080px) {
    .p-kv {
        /* バナーの高さ分の余白を上部に追加 */
        padding-top: 50px;
    }
}

/*
 * ===============================================
 * 共通コンポーネント: プロモーションバナー
 * ===============================================
 */

/* --- Base Styles (Mobile: 〜764px) --- */
.c-promo-banner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #e60012;
    color: #fff;
    z-index: 20;

    /* ★ 存在感を出すための調整 */
    font-size: 18px;
    font-weight: 900;
    padding: 10px 0;

    /* ★ テキストをループさせるための設定 */
    display: flex;
    white-space: nowrap; /* 折り返しを禁止 */
}
.c-promo-banner span {
    padding: 0 1em; /* テキスト間の余白 */
}
.c-promo-banner--right {
    display: none;
}


/* --- Tablet & PC Styles (1080px〜) --- */
@media (min-width: 1080px) {
    .c-promo-banner {
        top: 0;
        height: 100%;
        transform: none;
        font-size: 28px;
        font-weight: 900;
        width: auto; /* 幅は自動 */
        padding: 20px 15px;
        border-radius: 0;
        writing-mode: vertical-rl;
        justify-content: center;
        align-items: center;
        display: flex; /* ★ display: flex をこちらに移動 */
    }
    .c-promo-banner span {
        padding: 1em 0; /* 縦書き用に余白の方向を変更 */
    }
    .c-promo-banner--left {
        left: 0; /* 左側のバナーは左端に配置 */
    }
    .c-promo-banner--right {
        display: flex;
        left: auto; /* leftをリセット */
        right: 0;   /* 右側のバナーは右端に配置 */
    }
}

/*
 * ===============================================
 * 料金一覧セクション (p-price-list)
 * ===============================================
 */
 .p-price-list {
    padding: 60px 0;
    background-color: #fff;
}

.p-price-list__header {
    text-align: center;
    margin-bottom: 40px;
}

.p-price-list__subtitle {
    font-size: 16px;
}

/* --- カードのレイアウト --- */
.p-price-list__cards {
    display: flex;
    flex-direction: column; /* SPでは縦並び */
    gap: 24px;
    margin-bottom: 60px;
}

/* --- 下部エリア --- */
.p-price-list__bottom {
    display: flex;
    flex-direction: column; /* SPでは縦並び */
    gap: 32px;
    align-items: center;
}
.p-price-list__payment {
    text-align: center;
}
.p-price-list__payment-title {
    font-size: 24px;
    margin-bottom: 8px;
}
.p-price-list__payment-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}
.p-price-list__payment-logos img {
    height: 24px;
    width: auto;
}

/*
 * ===============================================
 * 料金カードコンポーネント (c-price-card)
 * ===============================================
 */
.c-price-card {
    border-bottom: 10px solid var(--color-primary);
    border-left: 10px solid var(--color-primary);
    border-right: 10px solid var(--color-primary);

    overflow: hidden; /* 角丸からはみ出ないように */
}

.c-price-card__title {
    background-color: var(--color-primary);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    padding: 12px;
}

.c-price-card__image-placeholder {
    background-color: #f0f0f0;
    text-align: center;
    color: #999;
}
.c-price-card__image-placeholder img {
    width: 100%;
    height: 25vh;
    object-fit: cover;
}

@media (max-width: 765px) {
    .c-price-card__image-placeholder img {
        height: 52vh;
    }
}

@media (max-width: 405px) {
    .c-price-card__image-placeholder img {
        height: 26vh;
    }
}

.c-price-card__description {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.c-price-card__details {
    padding: 10px 0;
    display: grid;
    gap: 8px;
}

.c-price-card__details div {
    display: grid;
    /* ★ dt側の幅を少し広げる */
    grid-template-columns: 75px 1fr;
    align-items: center;
    gap: 16px; /* ★ dtとddの隙間を調整 */
}

.c-price-card__details dt {
    background-color: var(--color-primary); /* ★ 緑の背景 */
    color: #fff; /* ★ 白文字 */
    font-weight: bold;
    text-align: center;
    padding: 4px 10px; /* 内側の余白 */
}


.c-price-card__fee {
    background-color: #f5f5f5;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.c-price-card__fee-label {
    font-weight: bold;
}
.c-price-card__fee-price {
    font-size: 28px;
    font-weight: bold;
    color: #000;
}
.c-price-card__fee-price small {
    font-size: 14px;
    font-weight: normal;
}

/*
 * ===============================================
 * コンポーネント: 料金セクションCTA (c-price-cta)
 * ===============================================
 */
 .c-price-cta {
    display: flex;
    align-items: stretch; /* 高さを揃える */
    height: 100%;
}
.c-price-cta__info {
    display: flex;
    border: 1px solid var(--color-primary);
}
.c-price-cta__label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    font-weight: bold;
    font-size: 14px;
    text-align: center;
}
.c-price-cta__tel-block {
    padding: 8px 16px;
    background-color: #fff;
    color: var(--color-text-main);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.c-price-cta__tel-number {
    font-size: 28px;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1.2;
}
.c-price-cta__time {
    font-size: 12px;
}
.c-price-cta__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 110px;
    padding: 8px;
    color: var(--color-text-white);
    font-weight: bold;
    font-size: 12px;
    text-align: center;
}
.c-price-cta__btn-icon {
    margin-bottom: 8px;
}
.c-price-cta__btn-text {
    line-height: 1.3;
}
.c-price-cta__btn--mail {
    background-color: var(--color-secondary);
}
.c-price-cta__btn--line {
    background-color: var(--color-primary);
}

.c-price-cta__btn-group {
    display: flex;
}

/*
 * ===============================================
 * 料金セクションCTA（タブレット用レイアウト）
 * ===============================================
 */
 @media (min-width: 765px) and (max-width: 1060px) {
    /* CTA全体を縦積みにする */
    .c-price-cta {
        flex-direction: column;
        width: auto; /* 幅を自動調整 */
    }

    /* ボタンを横並びにするための設定 */
    .c-price-cta__btn-group {
        display: flex;
        height: 65px;
    }

    /* ボタンの幅を50%ずつに設定 */
    .c-price-cta__btn {
        width: 50%;
    }
}

/*
 * ===============================================
 * 料金セクションCTAラッパー
 * ===============================================
 */
 .p-price-cta-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* PC表示でCTAが左に寄るように */
}

.p-price-cta-caption {
    font-size: 14px;
    font-weight: bold;
    color: var(--color-text-main);
}

.p-price-list__bottom-caption {
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    background-color: var(--color-primary);
    color: var(--color-text-white);
    text-align: center;
}

@media (max-width: 899px) { /* スマホ表示の時は中央揃えに */
    .p-price-cta-wrapper {
        align-items: center;
    }
}
/*
 * ===============================================
 * コンポーネント: 支払い方法 (c-payment-methods)
 * ===============================================
 */
 .c-payment-methods {
    /* ★ 指定された横幅（レスポンシブを考慮しmax-widthで設定） */
    max-width: 460px;
    width: 100%;
    
    background-color: var(--color-primary);
    color: #fff;
    border-radius: 16px;
    padding: 10px 20px;
    text-align: center;
    box-sizing: border-box;
}

.c-payment-methods__title {
    font-size: 24px;
    font-weight: bold;
    margin: 0 0 8px;
}

.c-payment-methods__subtitle {
    font-size: 16px;
    margin: 0 0 10px;
}

/* ロゴを挿入する白いエリア */
.c-payment-methods__logos {
    background-color: #fff;
    border-radius: 8px;
    
    /* ロゴ画像が追加された時にきれいに並ぶようにFlexboxを設定 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: 16px;
    
    /* 画像がなくてもエリアが見えるように最低限の高さを設定 */
    min-height: 75px; 
}

.c-payment-methods__logos img {
    width: 50%;
}

/*
 * ===============================================
 * 事例紹介セクション (p-case-studies)
 * ===============================================
 */
.p-case-studies {
    padding: 60px 0;
}
.p-case-studies .l-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- グリッドコンテナ --- */
.p-case-studies__grid {
    width: 100%;
    margin-top: 40px;
    display: flex; /* スマホでは縦並び */
    flex-direction: column;
    gap: 30px;
}

/*
 * ===============================================
 * コンポーネント: 事例カード (c-case-card)
 * ===============================================
 */
.c-case-card {
    border: 3px solid #ccc;
    border-radius: 8px;
    padding: 16px;
}
.c-case-card__header h3 {
    background-color: var(--color-primary);
    color: #fff;
    font-size: 14px;
    padding: 4px 8px;
    display: inline-block;
    border-radius: 4px;
    margin: 0 0 8px;
}
.c-case-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    font-weight: bold;
}
.c-case-card__images {
    display: flex;
    gap: 16px;
    margin: 16px 0;
}
.c-case-card__image-group {
    display: flex;
    flex-direction: column;
    align-items: center; /* 中央揃え */
    gap: 8px; /* テキストと枠線の間の隙間 */
    width: 50%;
}
.c-case-card__image-label {
    font-weight: bold;
}
.c-case-card__image-box {
    width: 100%;
    border: 3px solid var(--color-primary);
}
.c-case-card__image-box span {
    font-weight: bold;
}
.c-case-card__image-box img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    background-color: #f0f0f0;
    margin-top: 0px;
}
.c-case-card__pricing {
    border: 3px solid var(--color-primary);
    border-radius: 8px;
    padding: 5px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    max-height: 125px;
}

/* --- グリッド内のテキストブロック --- */
.p-case-studies__summary {
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    line-height: 1.6;
}

@media (min-width: 1080px) {
    .c-case-card__pricing-case4 {
        margin-top: 48px;
    }
}

@media (min-width: 765px) {
    .p-case-studies__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 3列グリッド */
        gap: 24px;
    }

    /* ★ 4つ目のカードを左の2列分に広げる */
    .c-case-card:nth-child(4) {
        grid-column: 1 / span 2;
    }
    
    /* ★ テキストブロックを右の1列に配置 */
    .p-case-studies__summary {
        grid-column: 3 / 4;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/*
 * ===============================================
 * 事例紹介セクション (p-case-studies) - 新構造版
 * ===============================================
 */
 .p-case-studies {
    padding: 60px 0;
}
.p-case-studies .l-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* --- 上段グリッド（CASE1-3） --- */
.p-case-studies__top-grid {
    width: 100%;
    display: grid;
    /* SPでは1列、765px以上で2列、1080px以上で3列に自動で変わる */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

/* --- 下段セクション（CASE4 + テキスト） --- */
.p-case-studies__bottom-section {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr; /* SPでは1列 */
    gap: 24px;
}

/*
 * ===============================================
 * コンポーネント: 事例カード (c-case-card)
 * ===============================================
 */
.c-case-card {
    border: 3px solid #ccc;
    border-radius: 8px;
    padding: 16px;
}
.c-case-card__header h3 {
    background-color: var(--color-primary);
    color: #fff;
    font-size: 14px;
    padding: 4px 8px;
    display: inline-block;
    border-radius: 4px;
    margin: 0 0 8px;
}
.c-case-card__tags { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; font-weight: bold; }
.c-case-card__images { display: flex; gap: 16px; margin: 16px 0; }
.c-case-card__image-box { width: 100%; border: 3px solid var(--color-primary); padding: 8px; }
.c-case-card__image-box span { font-weight: bold; }
.c-case-card__image-box img { width: 100%; height: 100px; object-fit: cover; background-color: #f0f0f0; margin-top: 4px; }
.c-case-card__pricing { border: 3px solid var(--color-primary); border-radius: 8px; padding: 5px; display: flex; justify-content: space-around; align-items: center; text-align: center; }
.c-case-card__price-item .label { font-size: 14px; font-weight: bold; display: block; }
.c-case-card__price-item .price {
    /* ★ font-sizeをclamp()に変更 */
    font-size: clamp(9px, 3vw, 11px);
    font-weight: 900;
}
.c-case-card__price-item .price small {
    font-size: 14px;
    font-weight: normal;
}
.c-case-card__price-item.is-total .price {
    color: var(--color-primary);
    /* ★ font-sizeをclamp()に変更 */
    font-size: clamp(16px, 6vw, 20px);
}

/* --- CASE4の特別レイアウト --- */
.c-case-card--large .c-case-card__main-content {
    display: grid;
    grid-template-columns: 1fr; /* SPでは縦積み */
    gap: 16px;
}

/* --- 補足テキスト --- */
.p-case-studies__summary {
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    line-height: 1.6;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * ===============================================
 * 共通コンポーネント: コンテンツボックス (c-content-box)
 * ===============================================
 */
 .c-content-box {
    position: relative;
    border: 3px solid var(--color-primary);
    border-radius: 8px;
    padding: 20px;
    margin-top: 30px; /* タイトルが重なるための余白 */
}

.c-content-box__body {
    /* タイトル分の高さを確保 */
    margin-top: 30px;
}

/* ★ タイトルを枠線の上に配置するためのスタイル */
.c-content-box .c-section-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* ★ 上下の位置を調整 */
    background-color: var(--color-background); /* ★ 親要素の背景色と同じ色で線を消す */
    padding: 0 15px; /* 線を消すための左右の余白 */
    white-space: nowrap;
}

/*
 * ===============================================
 * PC表示 (1080px〜) のスタイル
 * ===============================================
 */
@media (min-width: 1080px) {
    .p-case-studies__bottom-section {
        grid-template-columns: 10fr 1fr; /* PCでは 2:1 の比率で分割 */
    }

    .c-case-card--large .c-case-card__main-content {
        grid-template-columns: 1fr 1fr; /* PCではカード内部を横並びに */
    }
}

/*
 * ===============================================
 * 対応エリアセクション (p-area) - 最終版
 * ===============================================
 */

/* --- Base Styles (Mobile: 〜764px) --- */
.p-area {
    padding: 60px 0;
}
.p-area .l-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.p-area__grid {
    display: contents;
}
.p-area .c-section-title {
    order: -2;
}
.p-area__locations {
    display: flex;
    flex-wrap: wrap; /* スマホで折り返すように */
    gap: 12px;
    justify-content: center;
    margin-top: -20px;
}
.p-area__map {
    width: 100%;
    max-width: 400px;
}
.p-area__map img {
    border: 5px solid var(--color-primary);
    width: 100%;
}
.p-area__promo {
    text-align: center;
}
.p-area__promo-title {
    font-size: 28px;
    font-weight: 900;
    color: var(--color-text-main);
}

.p-area__info .c-price-cta {
    display: none;
}
/* ★ 新しい地名タグのスタイル */
.c-location-tag {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: bold;
    padding: 6px 18px;
    border-radius: 8px;
}

/* --- Tablet & PC Styles (765px〜) --- */
@media (min-width: 765px) {
    .p-area .l-container {
        align-items: stretch;
    }
    .p-area__grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr; /* ★ マップが左、情報が右になる比率 */
        align-items: center;
        gap: 40px;
    }
    .p-area__info {
        display: flex;
        flex-direction: column;
        gap: 24px;
        order: initial; /* ★ orderをリセットして、HTMLの順番通りに表示 */
    }
    .p-area .c-section-title {
        order: initial;
    }
    .p-area__promo-subtitle {
        display: block;
        font-size: 16px;
        color: var(--color-text-main);
        margin-top: 8px;
    }
    /* ★ 765px以上でCTAを表示 */
    .p-area__info .c-price-cta {
        display: flex;
    }
}


/* --- PC Styles (1080px〜) --- */
@media (min-width: 1080px) {
    .p-area__grid {
        grid-template-columns: 1fr 1.2fr;
        gap: 40px;
    }
    /* PCではCTAを表示 */
    .p-area__info .c-price-cta {
        display: flex;
    }
}

@media (max-width: 764px) {
    .p-area__grid {
        display: flex;
        /* ★ flex-directionをcolumn-reverseにすることで、HTMLの記述順と逆（情報→マップ）に表示 */
        flex-direction: column-reverse;
        gap: 30px;
    }

    .p-area__info {
        /* ★ このエリア自体をFlexboxにして、中身を中央揃えにする */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }

    .p-area__map {
        width: 100%;
        max-width: 400px;
        align-self: center; /* マップ自体も中央に */
    }
    
    .p-area__map img {
        border: 5px solid var(--color-primary);
        width: 100%;
    }
    
    .p-area__locations {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
    }

    .p-area__promo {
        text-align: center;
    }
    
    .p-area__promo-title {
        font-size: 28px;
        font-weight: 900;
        color: var(--color-text-main);
    }

    /* サブタイトルとCTAは非表示のまま */

    .p-area__info .c-price-cta {
        display: none;
    }
}

/*
 * ===============================================
 * 会社概要セクション
 * ===============================================
 */
 .p-company-profile {
    padding: 60px 0;
    text-align: center;
}

.p-company-profile .c-section-title {
    margin-bottom: 40px;
}

.c-definition-list {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
}

.c-definition-list dt {
    background-color: var(--color-primary);
    color: #fff;
    padding: 2px;
    text-align: center;
    font-weight: bold;
}

.c-definition-list dd {
    background-color: #fff;
    color: var(--color-text-main);
    padding: 10px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.c-definition-list div:last-child dd {
    border-bottom: none; /* 最後の項目の下線だけ消す */
}

/*
 * ===============================================
 * 採用情報KV (p-recruit-kv)
 * ===============================================
 */
 .p-recruit-kv {
    position: relative; /* オーバーレイの基準位置 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 250px;
    background-image: url('/img/r-kv-bg.png'); /* 背景画像を指定 */
    background-size: cover;
    background-position: center;
}

/* 画像の上に半透明のオーバーレイを重ねる */
.p-recruit-kv::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* 半透明の白 */
    z-index: 1;
}

.p-recruit-kv__inner {
    position: relative; /* オーバーレイより手前に表示 */
    z-index: 2;
    text-align: center;
    padding: 20px;
}

.p-recruit-kv__title {
    color: var(--color-text-main);
    font-size: clamp(24px, 5vw, 40px); /* レスポンシブな文字サイズ */
    font-weight: 900;
    line-height: 1.6;
}

.p-recruit-kv__title .is-highlight {
    background-color: var(--color-primary);
    color: #fff;
    padding: 0.1em 0.5em;
    border-radius: 4px;
}

/*
 * ===============================================
 * 採用情報メイン (p-recruit-main)
 * ===============================================
 */

/* --- Base Styles (Mobile) --- */
.p-recruit-main {
    padding: 60px 0;
}
.p-recruit-main__grid {
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.p-recruit-main__message { order: 1; }
.p-recruit-main__requirements { order: 2; }
.p-recruit-main__workflow { order: 3; }

/* --- 代表メッセージ --- */
.p-recruit-main__message-body img {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
}
.p-recruit-main__message-name {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 16px;
    font-weight: bold;
    margin-bottom: 24px;
}
.p-recruit-main__message-name span:last-child {
    font-size: 24px;
}
.p-recruit-main__message-text {
    line-height: 1.8;
}

@media (min-width: 765px) and (max-width: 1079px) {
    .p-recruit-main__message-body {
        display: flex;
        align-items: flex-start; /* 上揃え */
        gap: 24px; /* 写真とテキストの間の隙間 */
    }

    .p-recruit-main__message-body img {
        flex-shrink: 0; /* 画像が縮まないように */
        width: 40%; /* 親要素に対して40%の幅 */
    }
}

/* --- 1日の仕事の流れ --- */
.c-timeline {
    list-style: none;
    padding-left: 20px;
    border-left: 4px solid var(--color-primary);
    text-align-last: left;
}
.c-timeline__item {
    position: relative;
    padding: 10px 0 10px 20px;
}
.c-timeline__item::before {
    content: '';
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: var(--color-primary);
    border-radius: 50%;
    border: 4px solid #fff;
}
.c-timeline__time {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 4px;
    margin-right: 16px;
}
.c-timeline__event {
    font-weight: bold;
}
.p-recruit-main__workflow-note {
    margin-top: 16px;
    font-size: 14px;
    text-align: center;
}
.c-content-box .c-section-title::after {
    display: none;
}

.p-recruit-main__requirements {
    text-align: center;
}

.p-recruit-main__message-body img {
    height: 300px;
    object-fit: scale-down;
}

/*
 * ===============================================
 * 応募フォーム (p-contact-form)
 * ===============================================
 */
 .p-contact-form {
    padding: 60px 0;
    text-align: center;
}
.p-contact-form .c-section-title {
    margin-bottom: 40px;
}
.p-contact-form__grid {
    display: grid;
    grid-template-columns: 1fr; /* SPでは1列 */
    gap: 40px;
}
.p-contact-form__form-wrapper {
    border: 3px solid var(--color-primary);
    padding: 30px;
}

/* --- フォーム要素 --- */
.c-form-group {
    margin-bottom: 24px;
}
.c-form-label, .c-form-group label {
    display: block;
    font-weight: bold;
    margin-bottom: 8px;
}
.c-form-input, .c-form-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    background-color: #f5f5f5;
    border-radius: 4px;
    font-size: 16px;
}
.c-form-radios {
    display: flex;
    gap: 24px;
}
.c-form-submit {
    text-align: center;
    margin-top: 30px;
}
.c-submit-button {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: bold;
    font-size: 18px;
    padding: 12px 60px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

/* --- 代替連絡方法 --- */
.p-contact-form__alternatives {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.p-contact-form__alternatives h3 {
    font-size: 20px;
    font-weight: bold;
}
.c-contact-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 350px;
    padding: 20px;
    border-radius: 16px;
    color: #fff;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.c-contact-button div {
    line-height: 1.4;
}
.c-contact-button span {
    font-size: 22px;
    font-weight: bold;
}
.c-contact-button small {
    font-size: 14px;
}
.c-contact-button--line { background-color: #06C755; }
.c-contact-button--tel { background-color: #f7921a; }

/* --- PC表示 (765px〜) --- */
@media (min-width: 765px) {
    .p-contact-form__grid {
        grid-template-columns: 1fr 1fr; /* PCでは2列 */
        align-items: flex-start;
    }
}

/*
 * ===============================================
 * Footer
 * ===============================================
 */
.l-footer {
    background-color: var(--color-primary);
    padding: 20px;
}

.l-footer__copyright {
    color: #fff;
    text-align: center;
    font-size: 12px;
}


/*
 * ===============================================
 * PC表示 (1080px〜) のスタイル
 * ===============================================
 */
@media (min-width: 1080px) {
    .p-recruit-main__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 40px 60px;
    }

    /* --- グリッドの配置指定 --- */
    .p-recruit-main__message {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
        order: initial; /* orderをリセット */
    }
    .p-recruit-main__workflow {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
        order: initial; /* orderをリセット */
    }
    .p-recruit-main__requirements {
        grid-column: 2 / 3;
        grid-row: 1 / 3; /* 縦に2行分またがる */
        order: initial; /* orderをリセット */
    }

}




/*
 * ===============================================
 * Tablet / PC (765px〜) のスタイル
 * ===============================================
 */
@media (min-width: 765px) {
    /* --- カードレイアウトをグリッドに変更 --- */
    .p-price-list__cards {
        display: flex;
        flex-wrap: wrap;         /* 親要素の幅に合わせて折り返す */
        justify-content: center; /* ★ これで各行が中央揃えになる */
        gap: 24px;
        flex-direction: row;
    }

    .c-price-card {
        /* ★ widthを直接指定して、幅を固定する */
        width: calc(33.333% - 16px);
        flex-basis: calc(33.333% - 16px);
        flex-grow: 0;
        flex-shrink: 0; /* ★ カードが縮まないように指定を追加 */
    }

    /* --- 下部エリアを横並びに --- */
    .p-price-list__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    .p-price-list__payment {
        text-align: left;
    }
    .p-price-list__payment-logos {
        justify-content: flex-start;
    }
    
    /* --- PCではCTAを固定解除し、所定の位置に表示 --- */
    .p-price-list__cta-placeholder {
        display: block; /* プレースホルダーを表示 */
    }
    .c-sticky-cta {
        position: static; /* ★固定を解除 */
        box-shadow: none;
        border: 2px solid var(--color-primary);
        border-radius: 8px;
        flex-shrink: 0; /* 縮まないように */
    }
    
    /* PCではbodyの余白は不要 */
    body {
        padding-bottom: 0;
    }
}

/*
 * ===============================================
 * SP版 スティッキーCTA（詳細版）- 修正
 * ===============================================
 */
 .c-sticky-cta-sp {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    
    background-color: #fff;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    padding: 6px; /* ★ パディングを少し詰める */
    height: 70px; /* ★ 高さを少しコンパクトに */
}

/* --- 中身のスタイル --- */
.c-sticky-cta-sp__info {
    display: flex;
    border: 1px solid var(--color-primary);
    flex-grow: 1;
    min-width: 0; /* ★ Flexアイテムが縮小できるように */
}
.c-sticky-cta-sp__label {
    background-color: var(--color-primary);
    color: #fff;
    font-weight: bold;
    padding: 4px 8px; /* ★ パディングを少し詰める */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1.1;
    writing-mode: vertical-rl;
}
.c-sticky-cta-sp__tel-block {
    padding: 4px 8px;
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.c-sticky-cta-sp__tel-number {
    font-weight: bold;
    /* ★ 最小サイズと可変値を調整 */
    font-size: clamp(16px, 5.5vw, 24px);
    white-space: normal; /* ★ 電話番号が折り返すように */
}
.c-sticky-cta-sp__time {
    font-size: 9px;
    white-space: nowrap; /* こちらは折り返さない */
}
.c-sticky-cta-sp__btn-group {
    display: flex;
    margin-left: 6px;
}
.c-sticky-cta-sp__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    aspect-ratio: 1 / 1;
    font-size: 9px; /* ★ テキストを少し小さく */
    color: #fff;
    font-weight: bold;
    gap: 2px;
}
.c-sticky-cta-sp__btn-icon {
    width: 24px;
    height: 24px;
}
.c-sticky-cta-sp__btn--mail { background-color: var(--color-secondary); }
.c-sticky-cta-sp__btn--line { background-color: var(--color-primary); }

/*
 * ===============================================
 * レスポンシブ切り替え (765px以下)
 * ===============================================
 */
@media (max-width: 765px) {
    /* ★ スマホ用のスティッキーCTAを表示 */
    .c-sticky-cta-sp {
        display: flex;
        align-items: stretch;
    }
    
    /* ★ bodyの末尾に余白を追加してコンテンツが隠れないように */
    body {
        /* CTAの高さに合わせて調整 */
        padding-bottom: 80px; 
    }

    .p-price-cta-wrapper {
        display: none;
    }

    .c-section-title::after {
        width: 300px;
    }
}