.hero-container {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%); /* ど真ん中へ */
        width: 90%;          /* スマホでもはみ出さないように */
        max-width: 600px;    /* PCでの最大幅 */
        text-align: center;  /* 中身（検索バーと文字）を中央揃え */
        z-index: 2;
    }

    /* 検索バー本体 */
    .search-form-5 {
        margin: 0 auto 10px auto; /* 下に20pxの隙間を空ける */
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: 400px; 
        overflow: hidden;
        border-radius: 25px;
        background-color: #f2f2f2;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .hero-text {
        color: white;             /* 白文字 */
        font-weight: bold;        /* 太文字 */
        font-size: 2.5rem;        /* 文字サイズ */
        text-shadow: 0 2px 5px rgba(0,0,0,0.7); /* 写真の上でも読めるように影 */
        margin: 0;
        line-height: 1.2;
    }

    /* 検索バーの中身 */
    .search-form-5 input {
        flex: 1;
        height: 45px;
        padding: 5px 15px;
        border: none;
        box-sizing: border-box;
        background-color: #f2f2f2;
        font-size: 1em;
        outline: none;
        z-index: 2;
    }
    .search-form-5 input::placeholder { color: #777777; }
    
    .search-form-5 button {
        width: 50px;
        height: 45px;
        border: none;
        background-color: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mySwiper {
        padding-bottom: 40px; /* 下のページネーションの場所確保 */
    }
    /* 矢印の色 */
.swiper-button-next, .swiper-button-prev {
    color: #ff6262ff;            /* 矢印の色を「白」にする */
    background-color: #ffffffff; /* 背景を「赤」にする */
    width: 50px;               /* ボタンの幅 */
    height: 50px;              /* ボタンの高さ */
    border-radius: 50%;        /* まん丸にする */
    transition: all 0.3s ease; /* ホバー時の動きをなめらかに */
}

/* 矢印のアイコンサイズを少し調整 */
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 1.5rem;
}

/* マウスを乗せた時に少し大きくする演出 */
.swiper-button-next:hover, .swiper-button-prev:hover {
    transform: scale(1.1);
    opacity: 0.9;
}

.form-control:focus {
    box-shadow: none !important; /* 青い光（影）を消す */
    outline: none !important;    /* 枠線を消す */
    border-color: transparent !important; /* 念のためボーダーの色も消す */
}