/* Noto Sans JP フォントの適用 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #333;
    line-height: 1.6;
}

/* ヒーローセクションの背景グラデーションと高さ調整 */
.hero-section {
    background: linear-gradient(45deg, #1e90ff, #00bfff); /* 青系のグラデーション */
    min-height: 70vh; /* ビューポートの高さの70% */

    background-image: url('../img/mainvisual.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* features-section 内の画像スタイル */
.features-section img {
    width: 150px; /* 画像のサイズを調整 */
    height: 150px;
    object-fit: cover; /* 画像がはみ出さないように */
}

.function-section img {
    width: 400px; /* 画像のサイズを調整 */
    height: 300px;
    object-fit: cover; /* 画像がはみ出さないように */
}

/* Bootstrapのデフォルトスタイルを上書きする場合 */
/* 例: セクション間のパディングを調整したい場合など */
/* section { padding: 80px 0; } */

/* 見出しのスタイル */
h1, h2, h3 {
    font-weight: 700;
}

.hero-section h1 {
    text-shadow: 0px 0px 10px #666;
}

.hero-section p {
    text-shadow: 0px 0px 10px #666;
}

/* Bootstrapのリストスタイルをさらにカスタマイズしたい場合 */
.problem-section ul li {
    background-color: #e0f7fa; /* 例: 薄い水色の背景 */
    border: 1px solid #b2ebf2; /* 例: 枠線 */
}

/* 価格カードのボタンの色などを調整したい場合 */
.price-section .btn-primary {
    background-color: #1e90ff;
    border-color: #1e90ff;
}
.price-section .btn-primary:hover {
    background-color: #00bfff;
    border-color: #00bfff;
}


/* 問い合わせボタンのスタイルを調整 */
.hero-section .btn-light {
    color: #1e90ff; /* ボタンの文字色 */
}
.hero-section .btn-light:hover {
    background-color: #e0e0e0; /* ホバー時の背景色 */
    border-color: #e0e0e0;
}


/* フッターの背景色や文字色 */
footer {
    background-color: #343a40; /* ダークグレー */
    color: #ffffff;
}

/* レスポンシブ対応はBootstrapのグリッドシステムが主に担いますが、
   特定の要素で調整が必要な場合はここに追加してください */