.input-group {
    position: relative;
    display: block;
    width: 100%;
}
.input-group input {
    width: 100%;
    padding-right: 30px; /* アイコンのスペース確保 */
}
.input-group span {
    position: absolute;
    right: 10px; /* 右端からの距離 */
    top: 0; /* 上端 */
    bottom: 0; /* 下端 */
    display: flex;
    align-items: center; /* アイコンを中央に配置 */
    cursor: pointer;
    color:#555;
}

.scroll-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99999;
}

.scroll-to-top2 {
    position: fixed;
    right: 30px;
    bottom: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 99998;
}

/* ホバー時の影をさらに強くして、"浮いている"感じを強調 */
.scroll-to-top.hover:shadow-lg:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.scroll-to-top2.hover:shadow-lg:hover {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 360px) {
	/* 360px以下に適用されるCSS（スマホ用） */
    .headtitle{
        font-size: 10.5px;
    }
}

/* 追加のレスポンシブCSS */
@media (max-width: 640px) { /* 小さい画面（スマートフォンなど）用のスタイル */
    .scroll-to-top {
        width: 90%; /* モバイルではボタンの幅を最大に */
        padding: 12px 20px; /* タップしやすいようにパディングを調整 */
        font-size: 14px; /* フォントサイズを少し小さくする */
        position: fixed;
        right: 5%;
        bottom: 5px;
    }

    .scroll-to-top2 {
        width: 90%; /* モバイルではボタンの幅を最大に */
        padding: 12px 20px; /* タップしやすいようにパディングを調整 */
        font-size: 14px; /* フォントサイズを少し小さくする */
        position: fixed;
        right: 5%;
        bottom: 55px;
    }

    main {
        padding-bottom: 120px; /* 固定ボタンの高さ + 少し余裕 */
    }
}

@media (min-width: 641px) and (max-width: 1024px) { /* タブレットサイズのスタイル */
    .scroll-to-top,.scroll-to-top2 {
        width: auto; /* タブレットでは自動で幅を調整 */
        padding: 10px 15px; /* タブレットではやや小さめのパディング */
        font-size: 16px; /* タブレットでは標準のフォントサイズ */
    }
}