@charset "UTF-8";

.mega-search-section { 
    background: #1a1a1a;
    padding: 80px 0; 
}

.search-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.search-box-wrapper {
    display: flex;
    align-items: center;
    max-width: 800px;
    margin: 0 auto;
    background-color: #f7f7f7;
    border-radius: 8px; /* 親の角丸 */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.mega-search-input { 
    flex-grow: 1;
    font-size: 1.8rem;
    background: transparent;
    color: #333;
    border: none; 
    outline: none; 
    padding: 20px 25px;
}

.mega-search-input {
  background: #e6e6e6;
  color: #333; /* 入力文字 */
}

.mega-search-input::placeholder {
    color: #777;
}

/* 修正箇所: 塗りを端までフィットさせ、不要な角丸をリセット */
.search-submit {
    background-color: #ff8c69;
    color: #fff;
    border: none;
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    
    /* 追加：ボタン自体の角丸をなくし、親のoverflow:hiddenに任せる */
    border-radius: 0;
    /* 追加：高さが入力欄とズレないように高さを100%にする（flexコンテナ内） */
    align-self: stretch;
}

.search-submit:hover {
    background-color: #ff7f50;
}

.search-submit svg {
    display: block;
}

/* モバイル調整 (Pixel 7 / 1080px閾値) */
@media screen and (max-width: 1080px) {
    /* セクション自体の余白をスマホ用に削る */
    .mega-search-section {
        padding: 40px 0 !important;
    }

    .search-container {
        padding: 0 15px !important;
    }

    /* 1. 横並びを死守しつつ、幅を100%に */
    .search-box-wrapper {
        display: flex !important;
        flex-direction: row !important; /* 絶対に縦割りにしない */
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 2. 入力欄：サイズをスマホ用に落とす */
    .mega-search-input {
        flex: 1 !important; /* ボタン以外のスペースを埋める */
        min-width: 0 !important; /* flex子要素の縮小を許可 */
        font-size: 1.1rem !important; /* 1.8remはデカすぎたので調整 */
        padding: 15px 15px !important; /* 余白を絞る */
        height: auto !important;
    }

    /* 3. ボタン：見切れないように幅を確保 */
    .search-submit {
        padding: 0 20px !important; /* 左右の余白を少し詰める */
        flex-shrink: 0 !important; /* ボタンが潰されるのを防ぐ */
        align-self: stretch !important; /* 高さを入力欄に合わせる */
    }

    /* ボタン内のアイコンサイズ微調整 */
    .search-submit svg {
        width: 20px !important;
        height: 20px !important;
    }
}