.search-container {
           	right:36px;
			bottom:20px;
            position: absolute;
        }
        .search-button {
            background: none;
            border: none;
            cursor: pointer;
        }
        .search-form-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 159px;
            background-color: rgba(0, 0, 0, 0.3); /* 背景色を薄く */
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }
        .search-form {
            background-color: #fff;
            width: 500px;
            padding: 30px;
            border-radius: 5px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .search-input {
            flex: 1;
            padding: 10px;
            border: none;
            border-bottom: 1px solid #ccc;
            outline: none; /* フォーカス時のアウトラインを削除 */
        }
        .search-submit {
            background-color: #FFB5C5;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
        .search-submit:hover,
        .search-submit:focus {
            background-color: #FFA0B1;
        }
        .search-submit-text {
            color: #333;
        }
        /* フェードインのアニメーション */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* フェードアウトのアニメーション */
        @keyframes fadeOut {
            from {
                opacity: 1;
            }
            to {
                opacity: 0;
            }
        }

        /* フェードインとフェードアウトのアニメーションを適用するクラス */
        .fade-in {
            animation: fadeIn 0.3s ease-in-out;
        }

        .fade-out {
            animation: fadeOut 0.3s ease-in-out;
        }
		
		#searchIcon img{
			width:32px;
			height:32px;
		}
		p.searchWord{
		text-align:center;
		padding:20px;
		font-size:17px;
		}
/* スマートフォン用のスタイル */
@media (max-width: 768px) { 

        .search-container {
           	top:0;
			right:20px;
            position: absolute;
        }
        .search-form-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 202px;
            background-color: rgba(0, 0, 0, 0.3); /* 背景色を薄く */
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 999;
        }
        .search-form {
            background-color: #fff;
            width: 80%;
            padding: 20px;
            border-radius: 5px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .search-input{
			width:64%;
        }
		p.searchWord{
			text-align:center;
			padding:10px;
			font-size:15px;
		}
		#searchIcon img{
			width:22px;
			height:22px;
		}
        .search-submit {
            background-color: #FFB5C5;
            color: #fff;
            border: none;
            padding: 10px 14px;
            border-radius: 3px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }
}