/* style.css */

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 {
    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);
}

/* セクション間の共通余白設定 */
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 {
    position: relative; 
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 40px 15px;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1), /* アニメーションを滑らかに */
                box-shadow 0.2s ease, 
                border-color 0.2s ease;
    cursor: pointer;
    overflow: hidden;
    user-select: none; /* テキスト選択を防ぎ、ボタンのような操作感に */
}

/* 2. ホバー演出：カードが浮き上がる */
.card:hover {
    transform: translateY(-8px); /* 少し大きく持ち上げる */
    border-color: var(--accent-color);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* 3. 押し込み演出：クリックした瞬間（Active状態） */
.card:active {
    transform: translateY(-2px) scale(0.98); /* 沈み込みつつ、わずかに縮小 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    transition: transform 0.1s ease; /* 押し込みは素早く反応 */
}

/* 4. 透明なリンクの膜（onclick使用時も保険として残しておくとSEOに有利） */
.stretched-link::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

/* 5. 内部要素 */
.card-header, 
.card-body, 
.card-footer {
    position: relative;
    z-index: 1;
    pointer-events: none; /* 内部テキストがクリックを邪魔しないように透過 */
}

/* ホバー時のテキスト・アイコン反応 */
.card:hover .card-link {
    color: #ffffff;
}
.card:hover i {
    transform: translateX(8px);
    transition: transform 0.3s ease;
}

/* カードグリッド設定 */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    margin-top: 40px;
    align-items: stretch;
}

/* 下部のテキストリンク自体の装飾（判定はstretched-linkで広げているので見た目のみ） */
.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;
}

/* カード内のメインタイトル（日本語） */
.card h3 {
    color: #ffffff;
    font-size: 1.4rem; /* 日本語を大きく */
    line-height: 1.4;
    margin-bottom: 0;
    font-weight: 700;
}

/* カード内のサブタイトル（英語） */
.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;
}

/* カード番号も少し調整（英語と馴染ませる） */
.card-num {
    font-family: 'Georgia', serif;
    color: rgba(255, 255, 255, 0.3); /* 番号は少し抑えめに */
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 8px;
}

/* タブレットサイズ（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;
    }
}

/* カード自体の最小の高さを設定して、3x2のバランスを整える */
.card {
    min-height: 320px; 
    /* ...既存のスタイル（背景、ボーダー等）... */
}

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

/* カードヘッダー */
.card-num {
    font-family: 'Georgia', serif;
    color: var(--accent-color);
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 12px;
}

.card h3 {
    color: #ffffff;
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 0;
}

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

/* カード本文 */
.card-body p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.8;
    margin: 20px 0;
    margin-bottom: 20px;    /* 価格との間に最低限の余白を作る */
}

/* カードフッター（リンクボタン） */
.card-footer {
    margin-top: auto; /* ボタンを常に一番下に配置 */
}

.card-link {
    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;
}

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

/* ボタンを光らせる */
.btn {
    background: var(--accent-color);
    color: var(--main-color);
    box-shadow: 0 0 15px rgba(197, 160, 89, 0.3);
    border: none;
}

.btn:hover {
    background: #d4b475;
    box-shadow: 0 0 25px rgba(197, 160, 89, 0.5);
    transform: translateY(-2px);
}

/* 共通ヘッダーを透過させてスタイリッシュに */
.nav-menu {
    background: rgba(15, 23, 42, 0.9);
    backdrop-filter: blur(10px); /* 背景をぼかす */
    border-bottom: 1px solid var(--border-color);
}

.card p {
    color: #666;
    font-size: 15px;
    line-height: 1.7;
    /* 単語の途中で改行させない設定 */
    word-break: keep-all;
    overflow-wrap: anywhere;
    /* 中央揃えにすると隙間が目立ちにくい */
    text-align: center;
    margin: 15px 0;
}

/* カード内の価格表示エリア */
.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;
}

/* カードホバー時に価格も少し光らせる演出 */
.card:hover .card-price .value {
    text-shadow: 0 0 10px rgba(197, 160, 89, 0.5);
    transition: 0.3s;
}

/* 詳細リストのスタイル */
.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:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    transition: 0.3s;
    opacity: 1;
}

/* 特定のフレーズを塊として扱うクラス */
.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);
}

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

/* --- ハンバーガーメニュー用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;
}

/* スマホレイアウト（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); }
}

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

.work-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.work-card:hover {
    transform: translateY(-5px);
}

.work-img-placeholder {
    height: 250px;
    background: var(--main-color);
}

.work-img-placeholder img {
    opacity: 0.8; /* 最初は少し暗く */
    filter: grayscale(20%); /* わずかに彩度を落とす */
}

.work-card:hover .work-img-placeholder img {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.05);
}

.work-info {
    padding: 20px;
}

.work-info h4 {
    margin-bottom: 10px;
    color: var(--main-color);
    font-size: 1.1em;
}

.work-info p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* プロセス全体のグリッド */
.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;
}

/* ステップ間の矢印（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;
    }
}

/* 理由セクションのグリッド */
.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);
}

/* スマホ向けの微調整（レスポンシブ） */
@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;
    }
}

/* 実績 */
/* 実績セクション全体のグリッド */
.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.work-card {
    background: rgba(30, 41, 59, 0.4);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(197, 160, 89, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.work-img {
    height: 220px;
    background: #0f172a; /* 写真がない時のダミー色 */
    position: relative;
}

.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;
}

.work-content {
    padding: 25px;
}

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

.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;
}

/* 画像を表示させるための重要な設定 */
.work-img {
    width: 100%;
    height: 250px; /* 固定の高さを入れる */
    position: relative;
    overflow: hidden;
    background: #1e293b; /* 画像が出ない時に色がつくか確認用 */
}

.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-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を枠にフィットさせる */
    display: block;
}

/* すべての実績を見るボタン */
.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;
}

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

.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); /* 光っている演出 */
}

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


/* フローティングボタンの基本スタイル */
.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;
}

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

/* 依頼ボタン */
/* ココナラ専用ボタンのスタイル */
/* ココナラブルーのボタンデザイン */
.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;
}

/* モバイル表示での調整 */
@media (max-width: 768px) {
    .btn-coconala-blue {
        width: 100%; /* スマホでは押しやすいよう横幅いっぱいに */
        max-width: 300px;
    }
}
/* 青系バッジ（ココナラの特徴用） */
.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);
}

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

/* 実績ページ */
/* 実績グリッドレイアウト */
.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;
}