* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #fff;
    background-color: #0d1b3e; /* 全体の背景色 */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* カバーブロック (Hero Section) */
.hero {
    height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-content {
    width: 100%;
}

.hero-subline {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

/* 汎用量子化学のグラデーション */
.gradient-text {
    background: linear-gradient(to bottom, #fff 30%, #ffd700 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-logo-area {
    text-align: right;
    margin-top: -20px;
}

.main-logo {
    display: block;
    font-family: 'Playfair Display', serif; /* 画像に近いセリフ体 */
    font-size: 8rem;
    font-style: italic;
    line-height: 1;
}

.logo-sub {
    font-size: 1rem;
    margin-right: 20px;
}

/* 紹介セクション (Intro Section) */
.intro {
    padding: 60px 0;
}

.section-title {
    text-align: center;
    font-size: 1.8rem;
    color: #ffd700; /* 金色に近い黄色 */
    margin-bottom: 40px;
}

/* 2. セクションが連続する場合、2つ目以降の上の余白を消して調整する */
.intro + .intro {
    padding-top: 0;
    margin-top: -20px; /* 必要に応じてさらに上に詰めたい場合 */
}

.intro-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.intro-text {
    flex: 1;
    font-size: 0.95rem;
}

.intro-text p {
    margin-bottom: 16px; /* 段落間の余白を少し詰めました（24px → 16px） */
    line-height: 1.55;   /* 行間を少し狭く設定（1.8 → 1.55） */
    letter-spacing: 0.02em; /* 文字間をわずかに広げて可読性を維持 */
}

/* 注釈（※印の文章）はさらに少しだけ詰める */
.intro-text .note {
    font-size: 0.85rem;
    line-height: 1.45;
    color: #fff;
    margin-top: 24px;
    border-top: 1px solid ＃fff(255,255,255,0.1);
    padding-top: 15px;
}

.intro-image {
    flex: 1;
}

.intro-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* レスポンシブ (スマホ対応) */
@media (max-width: 768px) {
    .intro-flex {
        flex-direction: column;
    }
    .main-logo {
        font-size: 5rem;
    }
    .hero-title {
        font-size: 1.8rem;
    }

    /* ★ここを追加：黄色のタイトルのスマホ調整 */
    .section-title {
        font-size: 1.3rem !important;   /* 1.8remから1.3remへ縮小 */
        line-height: 1.5 !important;    /* 行間を広げて2行になっても綺麗に */
        margin-bottom: 25px !important;  /* 下の文章との隙間を調整 */
        padding: 0 15px !important;     /* 左右に余白を作って画面端に付かないように */
    }

    /* ★ここを追加：下の本文も読みやすく調整 */
    .intro-text p {
        font-size: 14px !important;
        line-height: 1.8 !important;   /* 行間を広げて圧迫感をなくす */
        text-align: justify;           /* 左右の端を揃える */
    }
}

/* 文字色の変更（グラデーションから単色ゴールドへ） */
.gold-text {
    color: #ffd700;
}

/* 汎用量子化学の文字（グラデーション設定を削除し上書き） */
.hero-title .gold-text {
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
}

/* Gaussianのロゴ - 文字を浮き上がらせる影の追加 */
.main-logo {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 10rem;
    font-style: italic;
    line-height: 1;
    color: #fff;
    /* 濃い影と薄い広範囲の影を組み合わせて立体感を出す */
    text-shadow: 
        3px 3px 6px rgba(0, 0, 0, 0.8), 
        0px 0px 20px rgba(0, 162, 255, 0.4); 
}

/* ガウシアン（ふりがな） */
.logo-sub {
    font-size: 1rem;
    margin-right: 20px;
    font-weight: bold;
}

/* 特徴セクション全体のコンテナ */
.features-section {
    position: relative;
    padding: 100px 0;
    color: #333; /* 表の中の文字は読みやすく濃いグレーに */
    overflow: hidden;
}

/* 背景画像の設定（45%透過して白っぽく） */
.features-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('image/Gaussian_section_haikei.png');
    background-size: cover;
    background-position: center;
    opacity:  0.55;
    z-index: 1;
}

/* 背景色（白っぽく見せるための土台） */
.features-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); 
    z-index: 2;
}

.relative-content {
    position: relative;
    z-index: 3; /* 背景より上に表示 */
}

/* 各ブロックの余白 */
.feature-block {
    margin-bottom: 60px;
}

/* セクションタイトル */
.feature-title {
    font-size: 2rem;
    color: #1a3683; /* 濃い青 */
    border-left: 8px solid #ffd700; /* 左側のアクセントライン */
    padding-left: 15px;
    margin-bottom: 25px;
    display: flex;
    align-items: baseline;
    gap: 15px;
}

.feature-title span {
    font-size: 1.2rem;
    color: #666;
}

/* テーブルのデザイン */
.feature-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff; /* テーブル自体は白背景 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.feature-table th, 
.feature-table td {
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* 左側の青い見出し列 */
.feature-table th {
    width: 250px;
    background-color: #1a3683;
    color: #fff;
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
}

.feature-table td {
    background-color: #fff;
    color: #444;
}

/* 最後の行の線は消す */
.feature-table tr:last-child th,
.feature-table tr:last-child td {
    border-bottom: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .feature-table th {
        width: 35%;
        font-size: 0.8rem;
        padding: 10px;
    }
    .feature-table td {
        font-size: 0.8rem;
        padding: 10px;
    }
}

/* 操作手順セクション全体 */
.step-section {
    padding: 40px 0; /* 80pxから変更 */
    background-color: #1d3a70;
    color: #fff;
    /* セクション間の境界線を薄く入れると、間隔が狭くても見やすくなります */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

.step-main-title {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 25px; /* ← ここを 60px から 25px 程度に変更 */
}

/* レイアウト構造 */
.step-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 80px;
}

/* テキストエリア（中央寄せ） */
.step-text {
    flex: 1;
    text-align: left;
}

.step-sub-title {
    font-size: 1.3rem;
    margin-bottom: 30px;
    line-height: 1.5;
    color: #ffd700;
}

.step-list p {
    font-weight: 600;
    letter-spacing: 0.02em; /* ほんの少し文字間を広げるとスッキリします */
}

.arrow {
    display: block;
    font-size: 1.2rem;
    color: #fff;
    margin: 0;
    line-height: 1;
   
}

/* タイトルとリストの間の余白も少し詰めました */
.step-sub-title {
    font-size: 1.2rem;
    margin-bottom: 20px; /* 30px → 20px */
    line-height: 1.4;
    color: #fff;
}

/* 画像エリア */
.step-image {
    flex: 1;
}

.step-image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* レスポンシブ */
@media (max-width: 900px) {
    .step-row, .step-row.reverse {
        flex-direction: column;
        gap: 30px;
    }
    .step-image {
        width: 100%;
        max-width: 500px;
    }
}

/* 推奨スペックセクション全体 */
.spec-section {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

/* 共通の背景デザイン（機能紹介と同じものを使用） */
/* ※.features-bg と .spec-section::before は、すでにあるCSSを再利用できます */
.spec-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* 白背景レイヤー */
    z-index: 2;
}

.spec-main-title {
    font-size: 2.2rem;
    color: #1a3683;
    border-left: 8px solid #ffd700;
    padding-left: 15px;
    margin-bottom: 40px;
}

/* テーブルのラッパー（スマホでの横スクロール用） */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    background-color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* テーブルデザイン */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px; /* 表が崩れないように最小幅を設定 */
}

/* ヘッダー（1行目） */
.spec-table thead th {
    background-color: #1a3683;
    color: #fff;
    padding: 20px;
    font-size: 1.1rem;
    text-align: left;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.spec-table thead th:last-child {
    border-right: none;
}

/* データ行 */
.spec-table tbody td {
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    font-size: 0.95rem;
    color: #333;
    line-height: 1.5;
}

/* 左端の見出し列 */
.spec-table .row-label {
    background-color: #f8faff;
    font-weight: bold;
    width: 150px;
    color: #1a3683;
}

.spec-table td:last-child {
    border-right: none;
}

/* セル内のテキスト配置を調整 */
.spec-table tbody tr:nth-child(even) {
    background-color: #fcfcfc; /* 1行おきに薄い色をつけて読みやすく */
}

/* スマホ対応：横スクロールを促す */
@media (max-width: 768px) {
    .spec-main-title {
        font-size: 1.6rem;
    }
}

/* 推奨モデルセクション */
.model-section {
    padding: 80px 0;
    background-color: #fff;
    color: #333;
}

.model-main-title {
    font-size: 2rem;
    color: #1a3683;
    border-left: 8px solid #ffd700;
    padding-left: 15px;
    margin-bottom: 40px;
}

.model-header {
    text-align: center;
    border-top: 2px solid #1a3683;
    border-bottom: 2px solid #1a3683;
    padding: 20px 0;
    margin-bottom: 40px;
}

.model-type {
    font-size: 1.8rem;
    font-weight: bold;
    color: #1a3683;
    margin-bottom: 10px;
}

.model-lead {
    font-size: 1.1rem;
    color: #000;
}

.model-flex {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* 左側：ビジュアル */
.model-visual {
    flex: 1;
    text-align: center;
}

.model-visual img {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.price-note {
    color: #d32f2f; /* 赤色 */
    font-weight: bold;
    font-size: 1.3rem;
}

/* 右側：スペック詳細 */
.model-spec {
    flex: 1.5;
}

.spec-badges {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.badge {
    background-color: #1a3683;
    color: #fff;
    font-size: 0.75rem;
    padding: 4px 12px;
    border-radius: 20px;
}

.badge.blue {
    background-color: #0d47a1;
}

/* スペック詳細の微調整 */
.spec-detail-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem; /* さらに文字を小さく（0.85rem → 0.8rem） */
}

/* 左側の項目名（ネイビーを維持してアクセントに） */
.spec-detail-table th {
    width: 130px;
    text-align: left;
    vertical-align: top;
    padding: 4px 0; /* 行間を狭める（8px → 4px） */
    color: #000; /* 項目名はネイビーのまま */
    border-bottom: 1px solid #eee;
    font-weight: bold;
}

/* 右側の詳細内容（ご要望通り黒に変更し、行間を詰める） */
.spec-detail-table td {
    padding: 4px 0; /* 行間を狭める（8px → 4px） */
    border-bottom: 1px solid #eee;
    line-height: 1.3; /* 行間をさらにタイトに（1.4 → 1.3） */
    color: #000; /* ネイビーから「黒」に変更 */
}

/* リスト形式のポインタ（■）部分の微調整 */
.spec-detail-table td br + text {
    display: inline-block;
    margin-top: 2px;
}

/* 注釈テキストもあわせて調整 */
.spec-footer-notes {
    margin-top: 15px;
    font-size: 0.7rem;
    color: #666;
    line-height: 1.4;
}

/* お問い合わせボタン */
.cta-area {
    text-align: center;
    margin-top: 60px;
}

.cta-button {
    display: inline-block;
    background-color: #0071bc;
    color: #fff;
    padding: 18px 80px;
    font-size: 1.2rem;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
    position: relative;
}

.cta-button:hover {
    background-color: #005a96;
}
/* レスポンシブ（ここからスマホ・タブレット用） */
@media (max-width: 900px) {
    .model-flex {
        flex-direction: column;
    }

    /* ★ここを追加：タイトルの文字サイズを小さくする */
    .model-main-title {
        font-size: 1.5rem !important;
        margin-bottom: 25px !important;
        padding-left: 10px !important;
        border-left-width: 6px !important;
        line-height: 1.3 !important;
    }

    /* ★ここを追加：型式の文字サイズを小さくする */
    .model-type {
        font-size: 1.2rem !important;
        line-height: 1.4 !important;
        margin-bottom: 15px !important;
        padding: 0 10px;
    }
}
/* 導入文のスタイル */
.step-intro {
    margin-top: 0; /* 上の余白をゼロにする */
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}

/* テキストを左寄せにする調整 */
.custom-align-left {
    text-align: left !important;
}

.step-item {
    margin-bottom: 30px;
}

.op-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #e0e0e0;
    margin-left: 15px;
}

/* 画像を白抜きボックスに入れ、影をつける */
.white-bg-box {
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4); /* 深めの影 */
}

.white-bg-box img {
    width: 100%;
    height: auto;
    box-shadow: none !important; /* ボックス自体に影があるので画像単体は解除 */
}

.image-caption {
    font-size: 0.75rem;
    color: #666;
    text-align: right;
    margin-top: 10px;
}

/* STEP2の画像左配置時のマージン調整 */
.step-row.reverse .custom-align-left {
    padding-left: 40px;
}
/* --- 画像に合わせた1カラムレイアウト --- */
.step-full-content {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    align-items: center;
}

/* テキスト部分の調整 */
.step-text-block {
    width: 100%;
    text-align: left;
    margin-bottom: 40px;
}

.step-item {
    margin-bottom: 25px;
}

/* 見出しをゴールドに、横棒を消す */
.step-item .step-sub-title.gold-text {
    font-size: 1.2rem;
    color: #d4af37; /* ゴールド */
    margin-bottom: 5px;
    border-left: none; /* もし既存の装飾があればリセット */
    padding-left: 0;
}

.op-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #fff;
    margin-left: 0;
}

/* --- 画像を大きく白枠で囲んで影をつける --- */
.step-image-full {
    width: 100%;
    max-width: 900px; /* 画像の最大幅 */
    background: #fff;
    padding: 20px; /* 白枠の余白 */
    border-radius: 4px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.5); /* 強い影 */
    margin-bottom: 20px;
}

.step-image-full img {
    width: 100%;
    height: auto;
    display: block;
}

.image-caption {
    color: #0d1b3e; /* 画像内の文字なので暗い色に */
    text-align: right;
    font-size: 0.8rem;
    margin-top: 10px;
}

.step-intro {
    text-align: center;
    margin-bottom: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #fff;
}

.step-section2 {
    padding: 80px 0;.
    background-color: #0d1b3e; /* ←ここを修正（元の #0d1b3e から変更） */
    color: #fff;
}
/* STEPの見出し（h3）のみ、さらに鮮やかなゴールドに変更 */
h3.step-sub-title.gold-text {
    color: #ffd700 !important; /* 強制的にこの色を適用 */
    font-weight: bold;
    margin-bottom: 10px; /* 下のテキストとの間隔を少し調整 */
}
/* 1. セクション自体の上下余白を最小限（10px）にする */
.step-section {
    padding: 0 0 !important;
    background-color: #0d1b3e;
}

/* 2. 画像ボックスの下にあった余白をゼロにする */
.step-full-content {
    margin-bottom: 0 !important;
}

.step-image-full {
    margin-bottom: 0 !important; /* 画像の下の余白を消す */
}

/* 3. STEP 2のタイトルの上の余白を削る */
.step-main-title {
    margin-top: 10px !important; /* セクション内の上側の隙間を調整 */
    margin-bottom: 15px !important; /* タイトルと導入文の間も少し詰める */
}

/* この特定のセクションだけ背景色を指定 */
.step-section2 {
    padding: 20px 0; /* 上下の余白（先ほどの調整に合わせる） */
    background-color: #1d3a70; /* ←ここにお好みのカラーコードを入れてください */
    color: #fff;
    margin-bottom: -1px; /* 隙間対策 */
}

/* --- メリットセクション全体 --- */
.merit-section {
    background-color: #1d3a70;
    color: #ffffff;
    /* 上の余白を半分（40px）に縮小 */
    padding: 40px 20px 80px 20px; 
    /* 前のセクションとの隙間を完全に埋めるための微調整 */
    margin-top: -1px; 
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.merit-container {
    max-width: 1200px; /* 指定幅 */
    margin: 0 auto;
    text-align: center;
}

/* --- タイトルエリア --- */
.merit-main-title {
    color: #ffd700;
    font-size: 2.2rem;
    margin-top: 0; /* デフォルトの余白を削除 */
    margin-bottom: 10px;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.merit-sub-lead {
    font-size: 16px;
    margin-bottom: 60px;
    font-weight: bold;
}

/* --- グリッドレイアウト --- */
.merit-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

/* --- 各メリット項目 --- */
.merit-item {
    flex: 1;
    text-align: center; /* 全体を中央揃えベースに */
    display: flex;
    flex-direction: column;
    align-items: center; /* 子要素を中央に寄せる */
}

/* 項目タイトル（幅を画像に合わせる） */
.merit-item-title {
    color: #ffd700;
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.5;
    font-weight: bold;
    min-height: 2.5em;
    width: 70%; /* 画像と同じ幅に制限 */
    text-align: left; /* テキスト自体は左揃え（お好みでcenterに） */
}

/* 本文（幅を画像に合わせる） */
.merit-item-text {
    font-size: 14px;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify; /* 両端揃え */
    opacity: 0.9;
    width: 70%; /* 画像と同じ幅に制限 */
}

/* --- 画像エリア（30%縮小・中央寄せ） --- */
.merit-image {
    width: 70%;
    margin: 0 auto;
    margin-top: auto;
    background: #ffffff;
    line-height: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); 
    border-radius: 2px;
    overflow: hidden;
}

.merit-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* --- スマホ・タブレット用のレスポンシブ調整 --- */
@media (max-width: 900px) {
    /* ① 3カラムを1カラムに変更 */
    .merit-grid {
        flex-direction: column; /* 縦に並べる */
        align-items: center;    /* 中央に寄せる */
        gap: 60px;              /* 項目ごとの上下の隙間を広げる */
    }

    .merit-item {
        width: 100%;           /* 横幅いっぱい使う */
    }

    .merit-item-title,
    .merit-item-text,
    .merit-image {
        width: 90%;            /* スマホで見やすい幅に調整 */
    }

    .merit-main-title {
        font-size: 1.6rem;     /* タイトルがはみ出さないよう少し小さく */
    }
}

/* ② 画像サイズを統一する設定（PC・スマホ共通） */
.merit-image {
    aspect-ratio: 16 / 9;    /* ★重要：枠の比率を固定（16:9の場合） */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
}

.merit-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;     /* ★重要：比率を保ったまま枠内に収める */
    /* もし隙間なく埋めたい（端を切り取っても良い）場合は cover に変えてください */
    padding: 10px;           /* 白背景との間に少し余白を入れると綺麗です */
}

 /* お問い合わせボタンのスマホ調整 */
    .cta-area {
        margin-top: 30px !important;
        text-align: center !important;
    }

    .cta-button {
        display: inline-block !important; /* 幅を文字に合わせる */
        width: auto !important;           /* 固定幅を解除 */
        min-width: 250px !important;      /* ボタンらしい最低限の幅 */
        max-width: 95% !important;        /* 画面からはみ出さない */
        
        padding: 12px 20px !important;    /* 上下の厚みを抑える */
        background-color: #0071bc !important; /* 青色を維持 */
        color: #fff !important;
        text-decoration: none !important;
        border-radius: 5px !important;

        /* ★ここが解決の決め手 */
        font-size: 15px !important;       /* 文字を少し小さく */
        white-space: nowrap !important;   /* 絶対に改行させない */
        letter-spacing: -0.02em !important; /* 文字間をわずかに詰めて1行に収める */
    }

    .hero-container { /* 画像を囲っているクラス名 */
    width: 100%;
    height: 60vh; /* スマホでの高さを指定（画面の60%など） */
    overflow: hidden;
}

.hero-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* ★重要：枠に合わせて画像を切り抜く */
    object-position: center; /* ★重要：画像の中央（ロゴ部分）を死守する */
}

/* --- 1. PCでの表示設定 --- */
/* スマホ用の画像は、PC（広い画面）では隠しておく */
.hero img {
    display: none;
}

//* --- 1. PC（共通）の設定：スマホ用画像は常に隠す --- */
.hero img {
    display: none;
}

/* PC用の背景設定（元々の設定があればここに） */
.is-pc {
    display: block; /* PCでは表示する */
    background-size: cover;
    background-position: center;
    width: 100%;
    min-height: 400px; /* PCでの高さ（適宜調整） */
}

/* --- 2. スマホ表示（画面幅768px以下）の設定 --- */
@media screen and (max-width: 768px) {
    /* PC用のテキストエリアを消す */
    .is-pc {
        display: none !important;
    }

    /* スマホ用の画像を表示する */
    .hero img {
        display: block !important; /* 強制的に表示 */
        width: 100%;
        height: auto;
    }
}

/* --- PCでの表示 --- */
.sp-only {
    display: none; /* PCではスマホ画像を隠す */
}
.pc-only {
    display: block; /* PCでは表示する */
    width: 100%;
    background-size: cover;
    background-position: center;
    padding: 100px 0;
}

/* --- スマホでの表示 (768px以下) --- */
@media screen and (max-width: 768px) {
    .pc-only {
        display: none !important; /* ★スマホではPC版を完全に消す */
    }
    .sp-only {
        display: block !important; /* ★スマホ画像だけを表示する */
        width: 100%;
        height: auto;
    }
    .hero {
        padding: 0;
        margin: 0;
    }
}
/* スマホ（768px以下）の時だけ表示 */
@media screen and (max-width: 768px) {
    .sp-only-note {
        display: block !important;
        padding: 5px;
        margin: 5px 0;
        font-size: 12px;
        color: #000;
       
        border-radius: 5px;
    }
}