@charset "utf-8";
/* CSS Document */
.hero-image-container img {
        width: 100%; /* 横幅を画面いっぱいに */
        height: auto; /* 高さは自動調整 */
        display: block; /* 画像下の余分な余白を消す */
	margin-top: 60px;
}
.hero-sp {
        display: none;
    }
@media (max-width: 768px) {
        /* PC用の画像を隠す */
        .hero-pc {
            display: none;
        }
        /* 隠しておいたスマホ用の画像を表示する */
        .hero-sp {
            display: block;
        }
    }

 /* CTAボタンを囲むセクションの設定 */
    .cta-button-section {
        /* ボタンの上下と左右の余白。お好みで調整してください。 */
        padding: 20px 20px 50px 20px; 
        text-align: center; /* ボタンを中央に配置 */
        background-color: #fff; /* 背景が画像と異なる場合は色を指定 */
    }

    /* CTAボタン画像自体の設定 */
    .cta-button-section img {
        max-width: 100%; /* スマホではみ出さないための設定 */
        width: 600px; /* PCでのボタンの横幅。画像のサイズに合わせて調整してください。 */
        height: auto; /* 高さは自動調整 */
        vertical-align: middle; /* vertical-align: middle; */
        cursor: pointer; /* マウスカーソルを指の形にして、クリックできることを示す */
        transition: opacity 0.3s ease; /* ホバー時のアニメーション効果 */
    }

    /* マウスを乗せたときに、少し透明にして反応しているように見せる */
    .cta-button-section img:hover {
        opacity: 0.8;
    }