@charset "UTF-8";

body {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* 要素を縦方向に並べる */
    align-items: center; /* 中央揃え */
    background-color: #f9f9f9; /* 背景色 */
}

.fv-cont,
.contents1,
.contents2,
.contents3,
.ev-cont {
    position: relative;
    width: 100%;
    max-width: 750px; /* 最大幅を指定 */
    text-align: center;
}

.fv img,
.contents1 img,
.contents2 img,
.contents3 img,
.ev img {
    width: 100%; /* 画像をコンテナの幅に合わせる */
    height: auto; /* アスペクト比を維持 */
    display: block;
    margin: 0 auto;
}

.cta-button1 {
    position: absolute;
    bottom: -1%; /* ボタン画像を背景画像の底から1%の位置に配置 */
    left: 50%; /* 親要素の中央に配置 */
    transform: translateX(-50%);
    width: 95%; /* ボタン画像を元のサイズをベースに縮小率を調整 */
}

.cta-button1 img {
    width: 100%; /* 親要素の幅に合わせて縮小される */
    height: auto; /* 元画像のアスペクト比を維持 */
    transition: transform 0.3s ease; /* アニメーションを元の状態にも適用 */
}

.cta-button1 img:hover{
    transform: scale(1.05); /* 画像を1.1倍に拡大 */
    transition: transform 0.3s ease; /* なめらかな拡大アニメーション */
    filter: brightness(1.1);
}

.cta-button2 {
    position: absolute;
    bottom: 14%; /* ボタン画像を背景画像の底から1%の位置に配置 */
    left: 50%; /* 親要素の中央に配置 */
    transform: translateX(-50%);
    width: 95%; /* ボタン画像を元のサイズをベースに縮小率を調整 */
}

.cta-button2 img {
    width: 100%; /* 親要素の幅に合わせて縮小される */
    height: auto; /* 元画像のアスペクト比を維持 */
    transition: transform 0.3s ease; /* アニメーションを元の状態にも適用 */
}

.cta-button2 img:hover{
    transform: scale(1.05); /* 画像を1.1倍に拡大 */
    transition: transform 0.3s ease; /* なめらかな拡大アニメーション */
    filter: brightness(1.1);
}


@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.cta-button1 img {
    animation: pulse 2s infinite;
}

.cta-button2 img {
    animation: pulse 2s infinite;
}