/**
 * カラースキームカスタマイズ
 * コンセプト: MOSS（苔）- モダン和風 × IT企業
 * 深い苔の緑と、和の落ち着きをベースに、IT企業らしいクリーンさを融合
 */

:root {
    /* メインカラー - 苔の深緑 */
    --primary-color: #3d5a40;      /* 苔グリーン：落ち着きと生命力 */
    --primary-dark: #2d4a30;
    --primary-light: #5a7a5d;

    /* セカンダリカラー - 抹茶グリーン */
    --secondary-color: #88b04b;    /* 抹茶：和の要素 */
    --secondary-dark: #6f9038;
    --secondary-light: #a3c56a;

    /* アクセントカラー - 金茶（和のアクセント） */
    --accent-color: #c9a05f;       /* 金茶：品格と温かみ */
    --accent-dark: #b08d4a;

    /* 背景色 - 和紙のような自然な白 */
    --bg-color: #fafaf8;           /* 和紙ホワイト */
    --bg-light: #ffffff;
    --bg-dark: #f0f0ed;

    /* テキストカラー */
    --text-color: #2c3e2f;         /* 深い緑がかった黒 */
    --text-light: #5a6b5d;
    --text-white: #ffffff;
}

/* 全体の背景 */
body {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
}

/* ヘッダー - 苔グリーン */
.site-header,
.navbar,
header {
    background-color: var(--primary-color) !important;
    border-bottom: 3px solid var(--accent-color) !important;
}

/* ナビゲーションメニュー */
.navbar-nav .nav-link,
.menu-item a {
    color: var(--text-white) !important;
    transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.menu-item a:hover {
    color: var(--accent-color) !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* ボタン - 抹茶グリーン */
.btn,
.button,
input[type="submit"],
button[type="submit"] {
    background-color: var(--secondary-color) !important;
    color: var(--text-white) !important;
    border: 2px solid var(--secondary-dark) !important;
    transition: all 0.3s ease;
}

.btn:hover,
.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--secondary-dark) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(61, 90, 64, 0.2);
}

/* リンク - 苔グリーン */
a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--accent-color) !important;
}

/* 見出し - 深い緑 + 和風装飾 */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-dark) !important;
    border-left: 4px solid var(--accent-color) !important;
    padding-left: 1rem;
}

h2 {
    position: relative;
}

h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color) 0%, transparent 100%);
    margin-top: 0.5rem;
}

/* セクション背景 - 交互に和紙調 */
section:nth-child(even) {
    background-color: var(--bg-dark) !important;
}

section:nth-child(odd) {
    background-color: var(--bg-light) !important;
}

/* カード要素 - IT企業らしいクリーンさ */
.card,
.box,
.panel {
    background-color: var(--bg-light) !important;
    border: 1px solid rgba(61, 90, 64, 0.15) !important;
    box-shadow: 0 2px 8px rgba(61, 90, 64, 0.08) !important;
    transition: all 0.3s ease;
}

.card:hover,
.box:hover,
.panel:hover {
    box-shadow: 0 6px 20px rgba(61, 90, 64, 0.15) !important;
    transform: translateY(-4px);
}

/* フッター - 深い苔グリーン */
.site-footer,
footer {
    background-color: var(--primary-dark) !important;
    color: var(--text-white) !important;
    border-top: 3px solid var(--accent-color) !important;
}

.site-footer a,
footer a {
    color: var(--accent-color) !important;
}

.site-footer a:hover,
footer a:hover {
    color: var(--secondary-light) !important;
}

/* 入力フォーム - クリーンで使いやすく */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select {
    border: 2px solid rgba(61, 90, 64, 0.2) !important;
    background-color: var(--bg-light) !important;
    color: var(--text-color) !important;
    transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px rgba(136, 176, 75, 0.1) !important;
    outline: none !important;
}

/* テーブル */
table {
    border: 1px solid rgba(61, 90, 64, 0.15) !important;
}

th {
    background-color: var(--primary-color) !important;
    color: var(--text-white) !important;
}

tr:nth-child(even) {
    background-color: var(--bg-dark) !important;
}

/* 和風装飾：区切り線 */
hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-color) 20%,
        var(--accent-color) 80%,
        transparent 100%);
    margin: 2rem 0;
}