/* style.css */
/* -----------------------------------------------------------
   PC用スタイル
----------------------------------------------------------- */
a {
    text-decoration: none !important;
    color: inherit; /* 親要素の色を引き継ぐ */
}

:root {
    --main-color: #0f172a;    /* 深いネイビー（メイン） */
    --accent-color: #c5a059;  /* シャンパンゴールド */
    --text-color: #e2e8f0;    /* 白に近いグレー（読みやすさ重視） */
    --bg-color: #0a0f1d;      /* 漆黒に近い紺色（全体の背景） */
    --card-bg: #1e293b;      /* カード部分：背景より一段明るい色 */
    --border-color: #334155;  /* 繊細な区切り線 */
}

body {
    padding-top: 90px;
    background-color: var(--bg-color);
    color: var(--text-color);
    /* 質感として薄いノイズのような質感を背景に足すとさらに高級感が出ます */
}

.container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

header {
    background: var(--main-color); /* グラデーション廃止 */
    color: white;
    padding: 100px 0; /* 余白を広げて贅沢に */
    text-align: center;
    border-bottom: 4px solid var(--accent-color); /* 下線にゴールドを配置 */
}

header h1 {
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    margin-bottom: 10px;
}

header p {
    font-weight: 300;
    opacity: 0.8;
    letter-spacing: 0.2em;
}

.hero-img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* --- Strategy Section --- */
.strategy-section {
    margin-top: 100px;
    padding: 100px 0;
    background: rgba(255, 255, 255, 0.02);
    border-top: 1px solid rgba(197, 160, 89, 0.2);
}

.strategy-header {
    text-align: center;
    margin-bottom: 60px;
}

/* Table Wrapper */
.table-wrapper {
    overflow-x: auto;
    padding: 20px 10px;
}

.comparison-table {
    min-width: 700px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #cbd5e1;
}

.comparison-table th, 
.comparison-table td {
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.comparison-table thead th {
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Highlight Column (Null PC) */
.highlight-column {
    background: linear-gradient(180deg, rgba(197, 160, 89, 0.2) 0%, rgba(197, 160, 89, 0.1) 100%);
    border: 2px solid var(--accent-color) !important;
    border-bottom: none !important;
    border-radius: 15px 15px 0 0;
    color: var(--accent-color);
    position: relative;
    text-align: center !important;
}

.badge {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-color);
    color: #000;
    padding: 2px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
}

.highlight-cell {
    background: rgba(197, 160, 89, 0.05);
    border-left: 2px solid var(--accent-color);
    border-right: 2px solid var(--accent-color);
    color: #fff;
    font-weight: bold;
}

.highlight-cell i {
    color: var(--accent-color);
    margin-right: 8px;
}

.highlight-cell.last {
    border-bottom: 2px solid var(--accent-color) !important;
    border-radius: 0 0 15px 15px;
}

.row-label {
    font-weight: bold;
    color: #fff;
}

/* Pillars */
.pillar-grid {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.pillar-card {
    background: rgba(255, 255, 255, 0.03);
    padding: 30px;
    border-radius: 12px;
    border-left: 4px solid var(--accent-color);
}

.pillar-num {
    font-size: 0.8rem;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.1em;
}

.pillar-card h3 {
    color: #fff;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.pillar-card p {
    font-size: 0.85rem;
    line-height: 1.7;
    color: #cbd5e1;
}

/* 組立代行ページ サービス内容デザイン設定 */
.assembly-sub-title {
    margin: 40px 0 15px;
    border-left: 4px solid var(--accent-color);
    padding-left: 10px;
    font-size: 1rem;
    color: #fff;
}

.check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.check-list li {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #cbd5e1;
}

.list-label {
    color: var(--accent-color);
    font-weight: bold;
}
/* 組立代行ページ サービス内容デザイン設定（ここまで） */

/* 組立代行ページ 料金表デザイン設定 */
.pricing-section { margin-top: 80px; }
.price-card-container {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 30px;
    border: 1px solid rgba(197, 160, 89, 0.2);
}
.base-price-announcement {
    text-align: center;
    color: var(--accent-color);
    font-weight: bold;
    margin-bottom: 20px;
    font-size: 1.2rem;
}
.price-table {
    width: 100%;
    border-collapse: collapse;
    color: #cbd5e1;
}
.price-table th, .price-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.price-table th {
    background: rgba(255, 255, 255, 0.05);
    text-align: left;
    color: var(--accent-color);
}
.price-column {
    font-weight: bold;
    color: #fff;
    white-space: nowrap;
}
.price-table small {
    display: block;
    color: #94a3b8;
    font-size: 0.8rem;
    margin-top: 4px;
}
/* 組立代行ページ 料金表デザイン設定（ここまで）*/

/* セクション間の共通余白設定 */
section {
    padding: 20px 0; /* 上下にしっかりと余裕を持たせる */
    border-bottom: 1px solid rgba(197, 160, 89, 0.05);
}

/* 見出し全体のコンテナ */
.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: none;
}

/* 上側の英語：控えめでスタイリッシュに */
.section-title .en {
    font-size: 0.9rem;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 0.5em; /* 文字間を広げて高級感を出す */
    font-weight: 300;
}

/* 下側の日本語：メインタイトルとして堂々と */
.section-title .jp {
    font-size: 1.8rem;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 10px;
}

/* リード文：少し距離を置いて読みやすく */
.section-lead {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-top: 15px;
    letter-spacing: 0.05em;
}

/* 下側の日本語：メインタイトルとして堂々と */
.section-title .jp {
    font-size: 1.8rem;
    color: #ffffff;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-top: 10px;
}

/* リード文：少し距離を置いて読みやすく */
.section-lead {
    color: #94a3b8;
    font-size: 0.9rem;
    margin-top: 15px;
    letter-spacing: 0.05em;
}

/* 1. カード本体：基準点 */
/* ヘッダー内のレイアウト */
.header-main {
    display: flex;
    align-items: center; /* 垂直中央揃え */
    gap: 15px;           /* アイコンとタイトルの間隔 */
    margin-top: 10px;
}
/* ===========================================================
   Card Component (Base)
   =========================================================== */

/* 1. カード本体の構造と基本スタイル */
.card {
    position: relative; 
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 40px 15px;
    display: flex;
    flex-direction: column;
    min-height: 320px; /* バランスを整える最小高 */
    cursor: pointer;
    overflow: hidden;
    user-select: none; /* ボタンのような操作感 */
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.2s ease, 
                border-color 0.2s ease;
}

/* 2. ホバー・アクティブ演出 */
.card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-color);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

.card:active {
    transform: translateY(-2px) scale(0.98); /* 押し込み演出 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    transition: transform 0.1s ease; /* 押し込みは素早く */
}

/* 3. SEO・アクセシビリティ対応（リンクの膜） */
.stretched-link::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
}

/* ===========================================================
   Card Internal Elements
   =========================================================== */

/* 4. レイアウト・コンテナ */
.card-header, 
.card-body, 
.card-footer {
    position: relative;
    z-index: 1;
    pointer-events: none; /* 内部テキストがクリックを邪魔しない */
}

.card-body {
    flex: 1; /* 説明文の長さに依らず、可能な限り広がる */
    display: flex;
    flex-direction: column;
    padding: 0 20px 20px;
}

.card-footer {
    margin-top: auto; /* 下部要素を常に底面に配置 */
}

/* 5. テキスト装飾：ヘッダー系 */
.card-num {
    font-family: 'Georgia', serif;
    color: var(--accent-color); /* 後の指定(ゴールド)を優先 */
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 12px; /* 後の指定 12px を優先 */
}

.card h3 {
    color: #ffffff;
    font-size: 1.4rem; /* 日本語サイズ 1.4rem を維持 */
    line-height: 1.4;
    font-weight: 700;
    margin-bottom: 0;
}

.en-sub {
    font-size: 0.75rem;
    color: var(--accent-color);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: block;
    margin-top: 4px;
    opacity: 0.9;
}

.jp-sub {
    font-size: 0.8rem;
    color: #94a3b8;
    font-weight: normal;
    display: block;
    margin-top: 4px;
}

/* 6. テキスト装飾：本文 */
.card p {
    color: #666; /* 全体共通の p 指定を維持 */
    font-size: 15px;
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: center;
    margin: 15px 0;
}

.card-body p {
    color: #94a3b8; /* body内のみのカラー上書きを維持 */
    font-size: 14px;
    line-height: 1.8;
    margin: 20px 0; /* body内のみの余白を維持 */
}

/* 7. 特殊要素：詳細リスト・アイコン */
.card-details {
    list-style: none;
    padding: 0;
    margin: 15px 0 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 15px;
}

.card-details li {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-details li i {
    transform: none !important; /* リスト内のアイコンは動かさない */
    transition: none !important;
    color: var(--accent-color);
    font-size: 0.75rem;
}

/* ===========================================================
   Card Pricing & Footer Links
   =========================================================== */

/* 8. 価格表示エリア */
.card-price {
    margin-top: auto; /* 最下部に配置 */
    padding-top: 15px;
    border-top: 1px dashed rgba(197, 160, 89, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.card-price .label {
    font-size: 0.75rem;
    color: #94a3b8;
    letter-spacing: 0.1em;
}

.card-price .value {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent-color);
}

.card-price .tax {
    font-size: 0.6rem;
    color: #94a3b8;
    margin-left: 4px;
}

/* 9. フッターリンク・ボタン */
.card-link {
    position: relative;
    z-index: 2;
    color: var(--accent-color);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

/* ===========================================================
   Interactive Effects (Hover)
   =========================================================== */

.card:hover .card-link {
    color: #ffffff;
}

.card-link:hover {
    gap: 15px; /* リンク単体ホバー時の挙動 */
}

/* カード全体ホバー時の内部パーツ反応 */
.card:hover i {
    transform: translateX(8px);
    transition: transform 0.3s ease;
}

.card:hover .card-price .value {
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
    transition: 0.3s;
}

.card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    transition: 0.3s;
    opacity: 1;
}

/* ===========================================================
   Layout (Grid)
   =========================================================== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 40px;
    align-items: stretch;
}

/* 特定のフレーズを塊として扱うクラス */
.nowrap {
    display: inline-block;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    background: var(--main-color);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 15px;
}

/* SNSアイコンの基本スタイル */
.sns-icon {
    color: white;
    text-decoration: none;
    font-size: 24px; /* アイコンのサイズ */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sns-icon:hover {
    transform: translateY(-3px); /* 少し浮き上がる */
    color: var(--accent-color); /* ホバー時にアクセントカラーに */
}

/* ココナラ専用の色指定 */
.coconala-sns:hover {
    color: #2cb696 !important; /* ココナラグリーン */
}

/* 料金表の専用スタイル */
.price-table {
    background: var(--card-bg);
    border-color: var(--border-color);
}

.price-table th {
    background: var(--main-color);
    color: var(--accent-color);
}

.price-table td {
    border-color: var(--border-color);
    color: var(--text-color);
}

/* FAQセクションの背景を少し変えてリズムを作る */
/* FAQ全体のコンテナ */
.faq-container {
    max-width: 800px;
    margin: 0 auto;
}

/* 各質問項目 */
.faq-item {
    background: rgba(30, 41, 59, 0.4); /* 背景よりわずかに明るい透過紺 */
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    padding: 25px 30px;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--accent-color);
    transform: translateX(5px); /* わずかに右にずれる動きで反応を示す */
}

/* 質問文 */
.faq-question {
    font-weight: bold;
    font-size: 1.1rem;
    color: #ffffff;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 15px;
}

/* 「Q」のラベルをアクセントに */
.faq-label {
    color: var(--accent-color);
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1;
}

/* 回答文 */
.faq-answer {
    color: #94a3b8;
    line-height: 1.8;
    font-size: 15px;
    padding-left: 33px; /* Qラベルの幅に合わせてインデント */
    border-left: 1px solid var(--border-color);
    margin-left: 10px;
}

/* カテゴリー列のスタイル：白背景を避け、サイトのテーマカラーに合わせる */
.category-label {
    background-color: var(--main-color) !important;
    text-align: center;
}

/* ついでにヘッダー（一番上の行）も少し色を濃くしてバランスを取ります */
.price-table th {
    background: #2c3e50; /* カテゴリーより少し明るい色 */
    color: #ffffff;
    padding: 12px;
    border: 1px solid #ddd;
    font-weight: bold;
    text-align: center;
}

/* 金額のカラム：オレンジがネイビーに対して映えるように調整 */
.price-column {
    color: var(--accent-color) !important; /* オレンジからゴールドへ */
    font-size: 1.2em;
    font-family: 'Georgia', serif; /* 数字を少しクラシックなフォントに */
}

small {
    display: block;
    color: #777;
    font-size: 0.85em;
    margin-top: 4px;
}

/* ナビゲーションメニュー */
.nav-menu {
    background: #2c3e50; /* メインカラーに合わせる */
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.nav-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 0 15px;
}

.nav-item {
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background 0.3s;
    white-space: nowrap; /* 改行防止 */
}

.nav-item:hover {
    background: var(--accent-color);
}

/* --- ハンバーガーメニュー用CSS --- */

/* メニューボタン（初期状態は非表示） */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    margin: 10px 15px;
}

.menu-toggle span {
    width: 100%;
    height: 3px;
    background-color: white;
    transition: all 0.3s ease;
}

/* 制作事例セクション */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* プロセス全体のグリッド */
.process-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    padding: 0 10px;
}

/* ステップごとの箱 */
.step-card {
    background: var(--card-bg); /* 深い紺色の背景 */
    border: 1px solid var(--border-color);
    padding: 40px 20px;
    position: relative; /* 番号配置用 */
    transition: all 0.3s ease;
    text-align: center;
    position: relative;
}

.step-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-5px);
}

/* ステップ番号（背景に大きく配置してデザイン性を出す） */
.step-number {
    font-family: 'Georgia', serif;
    font-size: 4rem;
    font-weight: bold;
    color: rgba(197, 160, 89, 0.1); /* ゴールドを非常に薄く透過させる */
    position: absolute;
    top: 5px;
    left: 20px;
    line-height: 1;
    z-index: 1;
}

/* ステップアイコン */
.step-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.2rem;
    color: rgba(197, 160, 89, 0.3); /* ゴールドを少し薄くして背景に馴染ませる */
    z-index: 2; /* 文字と同じレイヤーレベル */
    transition: all 0.3s ease;
}

/* ホバー時にアイコンを少し強調する */
.step-card:hover .step-icon {
    color: var(--accent-color);
    opacity: 1;
}

/* 箱の中身 */
.step-content {
    position: relative;
    z-index: 2; /* 番号より前に出す */
}

.step-content h3 {
    font-size: 1.2rem;
    color: var(--accent-color);
    margin-bottom: 15px;
}

.step-content p {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.6;
}

/* 理由セクションのグリッド */
.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 40px;
}

/* 各項目のスタイル */
.reason-item {
    text-align: center;
    padding: 20px;
    border-top: 1px solid var(--border-color); /* 上に線を引いて区切るのがArchitecture流 */
}

.reason-icon {
    font-size: 2rem;
    color: var(--accent-color);
    margin-bottom: 20px;
    opacity: 0.9;
    transform: none !important;
}

.reason-item h3 {
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}

.reason-item p {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.8;
    text-align: justify; /* 両端揃えで整然と見せる */
}

/* ホバー時にゴールドの線が伸びる演出（オプション） */
.reason-item {
    position: relative;
    overflow: hidden;
}

.reason-item::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-color);
    transition: all 0.4s ease;
    transform: translateX(-50%);
}

.reason-item:hover::before {
    width: 100%;
}

/* グリッドレイアウト */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

/* カードデザイン */
.testimonial-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 40px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
}

.quote-icon {
    font-size: 24px;
    color: var(--accent-color);
    opacity: 0.3;
    margin-bottom: 15px;
}

.stars {
    color: var(--accent-color);
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.review-text {
    font-size: 14px;
    line-height: 2;
    color: #cbd5e1;
    margin-bottom: 30px;
    font-style: italic; /* 引用っぽさを強調 */
}

/* 投稿者情報 */
.reviewer-info {
    margin-top: auto;
    border-top: 1px solid var(--border-color);
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.reviewer-name {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.service-tag {
    font-size: 10px;
    background: rgba(197, 160, 89, 0.1);
    color: var(--accent-color);
    padding: 2px 8px;
    border: 1px solid var(--accent-color);
}

/* ココナラ案内 */
.coconala-external {
    text-align: center;
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
}

.coconala-external p {
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 10px;
}

.coconala-external a {
    color: #ffffff;
    text-decoration: none;
    font-size: 15px;
    border-bottom: 1px solid var(--accent-color);
    padding-bottom: 5px;
    transition: 0.3s;
}

.coconala-external a:hover {
    color: var(--accent-color);
}

/* チェックリストのスタイル */
.check-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.check-list li {
    margin-bottom: 12px;
    font-size: 14px;
    color: #cbd5e1;
    display: flex;
    align-items: center;
}
.check-list li::before {
    content: "✔";
    color: var(--accent-color);
    margin-right: 15px;
    font-weight: bold;
}

/* 同意エリア全体のコンテナ */
.agreement-area {
    text-align: center;
    margin: 100px 0;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

/* チェックボックスとテキスト */
.agree-label {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    cursor: pointer;
    margin-bottom: 40px;
    padding: 12px 25px;
    border: 1px solid var(--border-color);
    border-radius: 50px;
    transition: all 0.3s ease;
}

.agree-label:hover {
    background: rgba(197, 160, 89, 0.05);
    border-color: var(--accent-color);
}

.agree-label input[type="checkbox"] {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.agree-label span {
    font-size: 1rem;
    color: var(--text-color);
}

.agree-label a {
    color: var(--accent-color);
    font-weight: bold;
    text-decoration: underline;
}

/* 送信ボタンの共通設定 */
.btn-submit {
    font-size: 1.2rem;
    padding: 22px 60px;
    min-width: 380px;
    font-weight: bold;
    letter-spacing: 0.1em;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    border: 1px solid #475569;
}

/* ボタンが無効(disabled)な時のスタイル */
.btn-submit:disabled {
    background: transparent !important;
    color: #475569 !important;
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

/* ボタンが有効な時のスタイル（hoverやactiveも含む） */
.btn-submit:not(:disabled) {
    background: var(--accent-color);
    color: var(--main-color);
    border-color: var(--accent-color);
    opacity: 1;
    box-shadow: 0 10px 30px rgba(197, 160, 89, 0.3);
}

.btn-submit:not(:disabled):hover {
    background: #d4b475;
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(197, 160, 89, 0.5);
}

/* ヒントメッセージ */
.agreement-hint {
    color: var(--accent-color);
    font-size: 0.85rem;
    margin-top: 20px;
    opacity: 0.8;
}

/* 同意事項カード */
.agreement-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 30px;
    margin-bottom: 30px;
}

/* 章題のデザイン */
.agreement-heading {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    letter-spacing: 0.05em;
}

.agreement-heading span {
    font-family: 'Georgia', serif;
    color: var(--accent-color);
    font-size: 1.5rem;
    opacity: 0.5;
}

/* 配送フォーマットのボックス */
.format-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px dashed var(--accent-color);
    padding: 20px;
    margin-top: 20px;
}

.format-title {
    color: var(--accent-color);
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.format-box pre {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}

/* 重要情報のハイライト */
.important-note {
    color: var(--accent-color);
    font-weight: bold;
    border-bottom: 1px solid var(--accent-color);
}

/* heroセクション */
/* メインタイトル（Null PC Architecture） */
.main-copy {
    color: #ffffff;
    font-size: clamp(2.5rem, 6vw, 4.2rem); /* 画面サイズに合わせた最適化 */
    font-weight: 800;
    letter-spacing: -0.01em;
    /* 隠し味：文字の輪郭を少しだけシャープにし、背後を微かに光らせる */
    text-shadow: 0 0 20px rgba(197, 160, 89, 0.15), 0 4px 10px rgba(0, 0, 0, 0.5);
    text-shadow: 
        0 2px 10px rgba(0, 0, 0, 0.8),
        0 0 20px rgba(0, 0, 0, 0.4);
}

/* 上のサブコピー（自作の楽しさを〜） */
.sub-copy {
    position: relative;
    color: var(--accent-color); /* ここをボタンと同じゴールド系に */
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    display: block;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}
.sub-copy::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%; /* 中央から広がるライン */
    width: 80%;
    height: 2px;
    background: var(--accent-color);
    opacity: 0.5;
}

/* 説明文（はじめてのワクワクも〜） */
.hero-description {
    color: rgba(255, 255, 255, 0.7); /* 純白より少し透けさせて、背景に馴染ませる */
    font-size: 1.05rem;
    line-height: 1.8;
    font-weight: 300;
    margin: 30px auto;
    max-width: 650px;
}
.hero {
    position: relative;
    width: 100%;
    min-height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    padding: 60px 20px; /* スマホで中身が詰まらないように余白を追加 */
}
.hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url('/images/hero.jpeg');
    background-size: cover;    /* 画像の比率を保ちつつ、枠を埋める */
    background-position: center; /* 画像の「中央」を基準にする */
    z-index: 1;
    filter: brightness(0.4); /* 画像を暗くして文字を浮かせる */
}
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    /* 中央を少し暗く(0.4)、四隅や下部をより深く暗く(0.7)することで
       文字の視認性とボタンの押しやすさを両立します
    */
    background: radial-gradient(
        circle, 
        rgba(15, 23, 42, 0.4) 0%, 
        rgba(15, 23, 42, 0.8) 100%
    );
}

.hero-content {
    position: relative; /* z-indexを有効にするため */
    z-index: 2; /* 重なり順：上（これでボタンが押せるようになる） */
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
}

/* ボタンのスタイル例 */
.hero-btns {
    margin-top: 30px;
}

/* ボタンのホバー（マウスを載せた時）の演出 */
.btn-primary, .btn-secondary {
    display: inline-block;
    padding: 14px 32px;
    margin: 10px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: all 0.3s ease; /* 変化を滑らかに */
}

.btn-primary {
    background-color: var(--accent-color);
    color: #000;
    border: 2px solid var(--accent-color);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--accent-color); /* 背景を透明にして文字と枠線だけに */
    transform: translateY(-3px); /* 少し上に浮き上がる */
    box-shadow: 0 5px 15px rgba(197, 160, 89, 0.3); /* ぼんやり光らせる */
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid var(--accent-color);
    color: var(--accent-color) !important;
}

.btn-secondary:hover {
    background-color: rgba(197, 160, 89, 0.1);
}

/* 実績 */
/* ===========================================================
   Works Section (制作事例共通・グリッド)
   =========================================================== */

.works-grid {
    display: grid;
    /* 後の指定である minmax(320px) と gap: 30px を最終値として採用 */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 40px;
}

/* ===========================================================
   Work Card (ベースとアニメーション)
   =========================================================== */

.work-card {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* デフォルトは後半のリッチなデザインをベースに保持 */
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(197, 160, 89, 0.1);
}

/* ホバー時の浮き上がりと影 */
.work-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-color);
}

/* 【重要】白い背景のページ用の微調整 */
/* もしHTML側で白いカードを使っている箇所があれば、背景色の上書きが必要です */
.work-card.light-style {
    background: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* ===========================================================
   Work Image (画像・エフェクト)
   =========================================================== */

.work-img, .work-img-placeholder {
    width: 100%;
    height: 250px; /* 最終的な固定値 250px を維持 */
    position: relative;
    overflow: hidden;
    background: #1e293b; /* 画像未読み込み時の背景色 */
}

/* 画像自体のフィッティングと初期状態 */
.work-img img, .work-img-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.8; /* 最初は少し暗く */
    filter: grayscale(20%); /* わずかに彩度を落とす */
    transition: 0.5s;
}

/* ホバー時の画像変化 */
.work-card:hover .work-img img,
.work-card:hover .work-img-placeholder img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

/* 光が走るエフェクト (::after) */
.work-img::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-25deg);
    transition: 0.5s;
}

.work-card:hover .work-img::after {
    left: 150%;
}

/* ===========================================================
   Work Content (テキスト情報)
   =========================================================== */

.work-info, .work-content {
    padding: 25px;
}

/* タイトル（ページによる色の違いを保持） */
.work-info h4 {
    margin-bottom: 10px;
    color: var(--main-color);
    font-size: 1.1em;
}

.work-content h3 {
    font-size: 1.1rem;
    color: #fff;
    margin-bottom: 12px;
}

/* 説明文 */
.work-info p, .work-content p {
    font-size: 13px;
    color: #94a3b8; /* 前半の #666 より、後半のカラーを優先的に整理 */
    line-height: 1.8;
}

/* 前半のデザイン（.work-info p）の特定の色が必要な場合 */
.work-info p {
    color: #666;
    line-height: 1.5;
}

/* ===========================================================
   Work Specs & Tags (タグ・スペック)
   =========================================================== */

.work-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-color);
    color: #000;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 2;
}

.work-spec {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.work-spec span {
    font-size: 0.7rem;
    background: rgba(197, 160, 89, 0.1);
    color: var(--accent-color);
    padding: 2px 8px;
    border: 1px solid rgba(197, 160, 89, 0.3);
    border-radius: 4px;
}
/* すべての実績を見るボタン */
.view-more {
    text-align: center;
    margin-top: 50px;
}

.btn-outline {
    display: inline-block;
    padding: 15px 40px;
    color: var(--accent-color); /* ゴールド系 */
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.1em;
    border: 1px solid var(--accent-color);
    border-radius: 4px; /* 少し角を丸める */
    background: transparent;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* ホバーした時に色を反転させて「押した感」を出す */
.btn-outline:hover {
    background: var(--accent-color);
    color: #0f172a; /* 背景色（紺色）を文字色にしてコントラストを出す */
    box-shadow: 0 0 20px rgba(197, 160, 89, 0.4); /* 光る演出 */
    transform: translateY(-2px); /* 少し浮き上がる */
}

/* ボタンの下に少し余白を作る（次のセクションとの間隔） */
.view-more {
    padding-bottom: 20px;
}

/* お問い合わせフォーム */
.form-wrapper {
    background: #fff; 
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
    /* 追加：周りを少し光らせて馴染ませる */
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), 0 0 10px rgba(197, 160, 89, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* 実績・価格ハイライト */
.impact-summary {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 30px 0 50px;
    padding: 30px 0;
    border-top: 2px solid #eeeeee; /* 線を少し太く */
    border-bottom: 2px solid #eeeeee;
    text-align: center;
}

.impact-item {
    flex: 1;
}

.impact-label {
    font-size: 1rem; /* 文字を大きく */
    color: #333333; /* 色を濃くして読みやすく */
    margin-bottom: 10px;
    font-weight: 500;
}

.impact-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #222222;
}

.impact-value .num {
    color: var(--accent-color);
    font-size: 2.2rem; /* サイズはお好みで調整してください */
    font-weight: bold;
}

.impact-value small {
    font-size: 0.75rem;
    font-weight: normal;
    color: #666666;
    margin-left: 5px;
}

/* メインテキスト周り */
.service-content {
    max-width: 800px;
    margin: 0 auto;
}

.service-text-main {
    font-size: 1.15rem; /* 本文を読みやすく大きく */
    line-height: 1.8;
    margin-bottom: 25px;
    color: #222222;
    font-weight: 500;
}

.service-text-sub {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    color: #444444;
}

.service-sub-title {
    margin: 40px 0 20px;
    font-size: 1.25rem; /* 見出しを強調 */
    font-weight: bold;
    color: #222222;
    border-bottom: 1px solid var(--accent-color);
    display: inline-block;
    padding-bottom: 5px;
}

.highlight-text {
    color: var(--accent-color); /* あなたのサイトのアクセントカラー（オレンジや青など） */
    font-weight: bold;          /* 太字にしてより目立たせる */
}


/* 組立代行 説明文セクション */
.build-description {
    color: #ffffff !important;
    text-align: left !important; /* ブロック自体の揃えを左に */
    display: block;              /* ブロック要素であることを明示 */
    width: 100%;                 /* 幅をいっぱいにする */
}

.build-description p {
    color: #ffffff !important;
    text-align: left !important; /* 段落内のテキストを確実に左に寄せる */
    margin-left: 0 !important;   /* もし外側からmarginで中央寄せされていた場合のリセット */
    margin-right: auto !important;
}

/* 強調箇所も白に埋もれないよう再定義 */
.build-description .highlight-text {
    color: var(--accent-color) !important;
    font-weight: bold;
}

.highlight-message {
    color: var(--accent-color) !important; /* 他のハイライトと同じゴールドを適用 */
    font-weight: bold;                     /* 視認性を高めるため太字に */
}

/* 構成相談ページ ハイライトカード */
.config-highlight-cards .card-body p {
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.8;
    opacity: 1; /* もし全体で薄く設定されていても、ここではハッキリ白く出す */
}

/* ついでにアイコン周りも少し華やかに */
.config-highlight-cards h3 i {
    margin-right: 8px;
    filter: drop-shadow(0 0 5px rgba(var(--accent-rgb), 0.5));
}

/* カスタムサービス（対応範囲）専用スタイル */
.custom-service-range .card-body p {
    color: #ffffff !important;
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
}

/* カードの境界線を少し強調して「改造・修理」のプロ感を出す演出（任意） */
.custom-service-range .card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.3s ease;
}

.custom-service-range .card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}







/* サイドナビゲーション全体 */
.side-navigation {
    position: fixed;
    right: 30px; /* 端に寄りすぎない配置 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 25px; /* 押しやすさを考慮した間隔 */
}

/* 各メニュー項目 */
.side-nav-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none;
}

/* ラベルテキスト */
.nav-label {
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: bold;
    margin-right: 15px;
    opacity: 0.5; /* 通常時は控えめに */
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8); /* 背景と被っても読めるように */
}

/* ドット部分 */
.nav-dot {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

/* ホバー時の変化（重要！） */
.side-nav-item:hover .nav-label {
    opacity: 1;
    color: var(--accent-color); /* 文字がゴールドに */
    transform: translateX(-5px); /* 少し左に動いて主張する */
}

.side-nav-item:hover .nav-dot {
    background: var(--accent-color); /* ドットもゴールドに */
    transform: scale(1.5);
    box-shadow: 0 0 10px var(--accent-color); /* 光っている演出 */
}

/* フローティングボタンの基本スタイル */
.floating-cta {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 2000; /* 全ての要素より上に表示 */
    display: flex;
    align-items: center;
    background: var(--accent-color); /* ハイライトと同色のゴールド */
    color: #000; /* ゴールド背景なので文字は黒が読みやすいです */
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 50px; /* 丸みのあるデザイン */
    font-weight: bold;
    font-size: 0.95rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* テキストとアイコンの間隔 */
.cta-text {
    margin-right: 10px;
}

/* ホバー時の挙動 */
.floating-cta:hover {
    transform: translateY(-5px) scale(1.05); /* 少し浮き上がって大きくなる */
    background: #ffffff; /* ホバーで白に変化 */
    color: var(--accent-color); /* 文字がゴールドに */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

/* 常に呼吸するように少しだけ動かす（目立たせるための演出） */
@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(var(--accent-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); }
}

.floating-cta {
    animation: pulse-gold 2s infinite;
}

/* 依頼ボタン */
/* ココナラ専用ボタンのスタイル */
/* ココナラブルーのボタンデザイン */
.btn-coconala-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #00a4bb; /* ココナラ系の爽やかなブルー */
    color: #ffffff !important;
    padding: 14px 32px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 164, 187, 0.3);
}

.btn-coconala-blue:hover {
    background-color: #00c2dd; /* ホバーで少し明るく */
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 164, 187, 0.4);
    color: #ffffff !important;
}

.btn-coconala-blue i {
    margin-right: 10px;
    font-size: 1.1rem;
}

/* 青系バッジ（ココナラの特徴用） */
.badge-blue {
    padding: 4px 16px;       /* 左右の余白を少し広げると丸角が綺麗に見えます */
    border-radius: 20px;     /* 完全な丸角（カプセル型） */
    background: rgba(0, 164, 187, 0.15);
    color: #00e0ff;
    border: 1px solid rgba(0, 164, 187, 0.5);
}

/* ゴールド系バッジ（サービスの強み用） */
.badge-gold {
    padding: 4px 16px;       /* 左右の余白を少し広げると丸角が綺麗に見えます */
    border-radius: 20px;     /* 完全な丸角（カプセル型） */
    background: rgba(212, 175, 55, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(212, 175, 55, 0.4);
}

/* 実績ページ */
/* 実績グリッドレイアウト */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

/* 実績カード本体 */
.work-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.work-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* 画像エリア */
.work-image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2; /* 16/9よりも縦に高く、一眼レフ写真のような比率 */
    overflow: hidden;
    background-color: #000;
}

.work-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 上部を優先的に見せたい場合は object-position: top; を追加 */
    object-position: center; 
    transition: transform 0.8s ease-out;
}

.work-card:hover .work-image img {
    transform: scale(1.1);
}

/* カテゴリータグ（画像左上） */
.work-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--accent-color);
    color: #000;
    font-size: 10px;
    font-weight: bold;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* コンテンツエリア */
.work-content {
    padding: 25px;
}

.work-content h3 {
    color: var(--accent-color);
    font-size: 1.25rem;
    margin-bottom: 12px;
}

.work-desc {
    font-size: 0.9rem;
    color: #ffffff; /* 本文は白文字 */
    line-height: 1.6;
    margin-bottom: 20px;
}

/* スペック情報 */
.work-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 0.75rem;
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
}

.work-specs span {
    background: rgba(255, 255, 255, 0.05);
    padding: 2px 8px;
    border-radius: 4px;
}



/* -----------------------------------------------------------
   スマホ用スタイル (画面幅 768px 以下)
----------------------------------------------------------- */
@media screen and (max-width: 768px) {
    /* 1. 親要素・全体のはみ出しを物理的に封じ込める */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 2. Heroセクションの全設定をスマホ用に完全上書き */
    section.hero {
        /* 位置の強制リセット */
        position: relative !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        
        /* 幅の固定 */
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        
        /* レイアウト（中央揃え） */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        
        padding: 80px 20px !important; /* 上下に余白、左右は20px固定 */
        box-sizing: border-box !important;
    }

    /* 3. 中身のコンテンツも幅を制限 */
    .hero-content {
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        position: static !important; /* 絶対配置などが残っていたら解除 */
        transform: none !important;  /* translateXなどが残っていたら解除 */
    }

    /* 1. 全体コンテナの幅とはみ出しを再固定 */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* 2. 実績グリッドを1列に変更 */
    .works-grid {
        display: flex !important;
        flex-direction: column !important; /* 縦並びに強制 */
        align-items: center !important;
        gap: 30px !important; /* カード同士の間隔 */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. 個別のカードを画面幅に収める */
    .work-card {
        width: 100% !important; /* 親のcontainer(padding20px引いた分)に合わせる */
        max-width: 400px;      /* 大きすぎないように制限 */
        margin: 0 auto !important;
        left: 0 !important;
        transform: none !important;
    }

    /* 4. 画像がはみ出さないように強制 */
    .work-img img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }

    /* セクション全体の調整 */
    .works-cta {
        padding: 0 20px; /* 左右に最低限の余白を持たせる */
    }

    /* ボタンの見切れ防止修正 */
    .works-cta .btn-submit {
        min-width: 0 !important;      /* 以前の 380px 指定を打ち消し */
        width: 100%;                  /* スマホでは横幅いっぱいに */
        max-width: 380px;             /* PCなど大きな画面では元のサイズ（380px）で止める */
        display: inline-flex;         /* 中央揃えを維持 */
        align-items: center;
        justify-content: center;
        box-sizing: border-box;       /* パディングを含めたサイズ計算 */
        white-space: normal;          /* 文字が長い場合に折り返しを許可（または下記で調整） */
        word-break: break-word;
    }

    /* TOP 選定戦略の比較 */
    /* 1. テーブル・行・セルの概念を完全に壊して縦に並べる */
    .comparison-table, 
    .comparison-table thead, 
    .comparison-table tbody, 
    .comparison-table tr, 
    .comparison-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2. PC版のヘッダーは非表示 */
    .comparison-table thead {
        display: none !important;
    }

    /* 3. 各「行（tr）」を独立したカードにする */
    .comparison-table tr {
        margin-bottom: 30px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(197, 160, 89, 0.2);
        border-radius: 12px;
        padding: 15px; /* カードの内側に余白 */
    }

    /* 4. 各「セル（td）」をシンプルな縦並びに */
    .comparison-table td {
        padding: 12px 0 !important; /* 上下に余白を空けて縦に並べる */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        text-align: left !important;
        color: #cbd5e1 !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        position: static !important; /* absolute指定などを解除 */
    }

    /* 5. 項目名（1番目のセル）を目立たせる */
    .comparison-table td:nth-child(1) {
        color: var(--accent-color) !important;
        font-weight: bold !important;
        font-size: 1.1rem !important;
        border-bottom: 2px solid var(--accent-color) !important;
        margin-bottom: 10px;
    }

    /* 6. 各セルの先頭に「Null PC:」「大手:」といった補足を追加（任意） */
    /* 文章が長いので、ラベルと本文を分けるより、改行して表示するのが安全です */
    .comparison-table td:nth-child(2)::before { content: "【Null PC】 "; color: var(--accent-color); display: block; font-size: 0.8rem; margin-bottom: 5px; }
    .comparison-table td:nth-child(3)::before { content: "【大手メーカー】 "; display: block; font-size: 0.8rem; margin-bottom: 5px; }
    .comparison-table td:nth-child(4)::before { content: "【一般的なBTO】 "; display: block; font-size: 0.8rem; margin-bottom: 5px; }

    /* 7. 最後のセルの線は消す */
    .comparison-table td:last-child {
        border-bottom: none !important;
    }

    /* Null PCのセル（2番目）だけ少し背景色をつけて強調 */
    .comparison-table td:nth-child(2) {
        background: rgba(197, 160, 89, 0.05);
        padding: 15px 10px !important;
        border-radius: 4px;
    }
    /* TOP 選定戦略の比較 ここまで */
}


/* タブレットサイズ（992px以下）では2カラムにする */
@media (max-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* スマホサイズ（600px以下）では1カラムにする */
@media (max-width: 600px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

/* スマホ対応：はみ出る場合は横スクロール可能に */
@media (max-width: 768px) {
    .nav-container {
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* スマホレイアウト（768px以下） */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex; /* スマホのみ表示 */
    }

    .nav-container {
        display: none; /* 初期状態は隠す */
        flex-direction: column;
        width: 100%;
        background: #2c3e50;
        padding: 10px 0;
        gap: 0;
    }

    /* メニューが開いている時のクラス */
    .nav-container.active {
        display: flex;
    }

    .nav-item {
        padding: 15px 20px;
        border-bottom: 1px solid #3e4f5f;
        width: 100%;
        box-sizing: border-box;
    }

    /* 三本線アニメーション（開いた時に「×」にする場合） */
    .menu-toggle.active span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

    /* 組立代行ページ サービス内容デザイン設定 */
    .check-list li {
        /* リストの1項目を縦並びに変える */
        display: flex;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.03); /* 軽く枠をつけると読みやすい */
        padding: 15px;
        border-radius: 8px;
    }

    .list-label {
        /* ラベル（圧倒的な実績：など）を独立した1行にする */
        display: block;
        font-size: 1.05rem;
        margin-bottom: 5px;
    }
    /* 組立代行ページ サービス内容 スマホデザイン設定（ここまで） */

    /* 組立代行ページ 料金表 スマホデザイン設定 */
    /* 1. 表の性質を完全に「ただの箱」にする */
    .price-table, 
    .price-table tbody, 
    .price-table tr, 
    .price-table td {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        border: none !important;
        box-sizing: border-box !important;
    }

    .price-table thead {
        display: none !important; /* ヘッダーは消す */
    }

    /* 2. 各行（tr）を1つの区切りにする */
    .price-table tr {
        padding: 20px 5px !important; /* 上下に余白、左右は詰めすぎない */
        border-bottom: 1px solid rgba(197, 160, 89, 0.2) !important;
    }

    /* 3. 内容と料金を縦に積む（これで変な改行を防ぐ） */
    .price-table td {
        padding: 5px 0 !important;
        text-align: left !important;
        line-height: 1.5 !important;
        word-break: normal !important; /* 単語の途中で切らない */
        overflow-wrap: break-word !important; /* 溢れるときだけ改行 */
    }

    /* 内容のタイトル（strong）を読みやすく */
    .price-table td strong {
        display: block;
        font-size: 1.05rem;
        color: #fff;
        margin-bottom: 4px;
    }

    /* 4. 料金を「右寄せ」ではなく「左寄せのアクセント」に変える */
    /* これで「両端に寄りすぎ」という違和感を消します */
    .price-table td.price-column {
        color: var(--accent-color) !important;
        font-size: 1.1rem !important;
        font-weight: bold !important;
        margin-top: 8px;
    }

    .price-table td.price-column::before {
        content: "料金："; /* 料金であることを明示 */
        font-size: 0.8rem;
        color: #94a3b8;
        font-weight: normal;
    }
    /* 組立代行ページ 料金表 スマホデザイン設定（ここまで）*/

    /* 同意、依頼ボタン系 */
    /* 同意エリア全体の余白をスマホ用に絞る */
    .agreement-area {
        margin: 60px 0;
        padding: 40px 15px;
    }

    /* チェックボックスのラベル：横並びを解除して折り返しを許可 */
    .agree-label {
        display: flex; /* inline-flexから変更 */
        padding: 12px 15px;
        border-radius: 12px; /* 楕円から角丸に変えると文字が収まりやすい */
        gap: 10px;
        text-align: left;
    }

    /* 送信ボタン：固定幅を解除して画面幅に合わせる */
    .btn-submit {
        min-width: 0 !important; /* 380pxを強制解除 */
        width: 100% !important;   /* 画面幅いっぱいにする */
        padding: 18px 10px !important; /* 左右の60pxを10pxに削減 */
        font-size: 1rem !important; /* 文字を少し小さくして1行に収める */
        letter-spacing: 0; /* 字間を詰めてはみ出し防止 */
        white-space: normal; /* 万が一の時に改行を許可 */
    }

    /* ココナラボタン（もしクラスが別ならここも） */
    .btn-coconala-blue {
        width: 100% !important;
        box-sizing: border-box;
        padding: 15px 10px !important;
        display: flex !important;
        justify-content: center;
        font-size: 0.95rem !important;
    }

    /* バッジコンテナ：横並びが限界なら折り返す */
    .badge-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px !important;
    }
    /* 同意、依頼ボタン系（ここまで）*/
}

/* ステップ間の矢印（PC表示時のみ） */
@media (min-width: 1024px) {
    .step-card:not(:last-child)::after {
        content: "→";
        position: absolute;
        right: -15px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--border-color);
        font-size: 20px;
        z-index: 10;
    }
}

/* スマホ向けの微調整（レスポンシブ） */
@media (max-width: 768px) {
    .hero {
        min-height: 60vh; /* スマホでは少し高さを出した方が文字が収まりやすい */
    }
    .main-copy {
        font-size: 2rem; /* 画面からはみ出さないようサイズを調整 */
    }
    .sub-copy {
        font-size: 1.1rem;
    }
    .hero-description {
        font-size: 0.9rem;
    }
}

/* スマホ対応 */
@media (max-width: 600px) {
    .impact-summary {
        flex-direction: column;
        gap: 30px;
        padding: 40px 0;
    }
    .impact-value .num {
        font-size: 2.4rem;
    }
}

/* スマホでは邪魔になるので非表示にする設定 */
@media (max-width: 768px) {
    .side-navigation {
        display: none;
    }
}

/* スマホ対応：少し小さくして位置を調整 */
@media (max-width: 768px) {
    .floating-cta {
        right: 20px;
        bottom: 20px;
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}

/* モバイル表示での調整 */
@media (max-width: 768px) {
    .btn-coconala-blue {
        width: 100%; /* スマホでは押しやすいよう横幅いっぱいに */
        max-width: 300px;
    }
}

/* スマホではバッジが詰まりすぎないよう調整 */
@media (max-width: 480px) {
    .badge-container {
        gap: 8px !important;
    }
    .badge {
        font-size: 0.7rem;
        padding: 3px 8px;
    }
}

/* ===========================================================
   TOPのFloating Action Button (スマホだけ)
   =========================================================== */

/* デフォルト（PC）では非表示 */
.sp-fixed-btn {
    display: none;
}

@media (max-width: 768px) {
    .sp-fixed-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        /* 固定位置：右下 */
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 2000; /* ヘッダー等より上に配置 */
        
        /* サイズと形状 */
        width: 70px;
        height: 70px;
        border-radius: 50%; /* 正円 */
        
        /* デザイン：既存のテーマカラー（ゴールド）を継承 */
        background: var(--accent-color);
        color: var(--main-color);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 
                    0 0 10px rgba(197, 160, 89, 0.4);
        
        text-decoration: none !important;
        transition: all 0.3s ease;
    }

    .sp-fixed-btn i {
        font-size: 1.5rem;
        margin-bottom: 2px;
    }

    .sp-fixed-btn span {
        font-size: 0.65rem;
        font-weight: bold;
        letter-spacing: -0.02em;
    }

    /* タップ時の視覚効果（押し心地） */
    .sp-fixed-btn:active {
        transform: scale(0.9) translateY(2px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    }
}