@charset "UTF-8";

.title h1 {
    /* height: 310px; は大きすぎるので、必要であれば削除か調整してください */
    height: auto; 
    font-size: 60px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    padding-top: 100px;
    /* --- ここでh2との隙間を調整します --- */
    margin-bottom: 120px; 
}

.title h2 {
    height: auto; /* ここもautoにすると扱いやすくなります */
    font-size: 30px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 50px;
}


/* --- 階数・ジャンル選択ナビゲーション --- */
.kikaku-nav {
  display: flex;        /* 横並びにする */
  flex-wrap: wrap;      /* 画面幅が狭いときに自動で折り返す */
  justify-content: center; /* 中央寄せ */
  gap: 12px;           /* ボタン同士の隙間 */
  margin-top: 30px;
  margin-bottom: 60px;  /* 下のカードリストとの距離 */
}

.kikaku-nav h2 {
  margin: 0;           /* デフォルトの余白を消す */
  height: auto;
  font-size: 18px;     /* 横並びなので少し小さめに */
}

.kikaku-nav h2 a {
  display: block;
  padding: 8px 18px;
  background-color: rgba(255, 255, 255, 0.8); /* 背景透過 */
  color: #333;
  text-decoration: none;
  border: 1px solid #ccc;
  border-radius: 20px; /* 丸みのあるデザイン */
  transition: all 0.3s ease;
  backdrop-filter: blur(5px); /* 背景のスピードラインを少し透かす */
}

/* マウスを乗せた時・タップした時 */
.kikaku-nav h2 a:hover {
  background-color: #ff9900;
  color: #fff;
  border-color: #ff9900;
  transform: translateY(-3px); /* 少し浮き上がる演出 */
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}







/* 検索窓とタイトルの間の調整 */
.search-box-container {
    margin-bottom: 50px;
    text-align: center;
}


/* フォーム全体のコンテナ */
.search-container {
  max-width: 400px;
  margin: 20px auto;
}


.search-box-container {
    text-align: center;
    margin: 20px 0;
}

#kikakuSearch {
    width: 80%;
    max-width: 400px;
    padding: 12px 20px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.3s;
    flex: 1;              /* 可能な限り横に広げる */
    height: 32px;         /* 高さを抑えて細身にする */
    padding: 4px 10px;    /* 上下の余白を削る */
    font-size: 16px;      /* iPhoneでの自動ズーム防止に16pxを推奨 */
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;

}

#kikakuSearch:focus {
    border-color: #007bff;
}

/* 検索にヒットしなかった要素を非表示にするためのクラス */
.is-hidden {
    display: none !important;
}

.kikaku-contents {
    width:1080px;
    max-width: 90%;
    margin-top: 75px;
    margin-left: auto;
    margin-right: auto;
}

.ikkai {
    flex-grow:1;
    max-width:1200px;
}

.kikaku-list {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(auto-fit, 220px);
    column-gap: 60px;
    row-gap: 60px;
    padding-bottom: 30px;
}

#no-result-message {
    color: #666;
    font-size: 1.1rem;
    padding: 40px 0;
    grid-column: 1 / -1; /* グリッド表示の場合、横いっぱいに表示させる */
}

.search-box-container form {
    display: flex;
    justify-content: center;
    gap: 10px; /* 入力欄とボタンの間隔 */
}


#searchButton {
    background-color: #ff9900; /* 兎原祭のイメージカラーに合わせて */

    font-weight: bold;
    transition: background 0.3s;


    height: 32px;         /* 入力欄と高さを揃える */
    padding: 0 12px;
    white-space: nowrap;  /* ★絶対に改行させず、横書きを維持する */
    font-size: 14px;
    line-height: 32px;    /* 文字を上下中央に */;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;        /* 中央揃えを確実にするため */
    align-items: center;
    justify-content: center;
}

#searchButton:hover {
    background-color: #e68a00;
}





.kikaku-list li {
    background: rgba(255, 255, 255, 0.9); /* 背景を少し透かす */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
    list-style: none; /* 点を消す */
    position: relative;
    display: flex;
    flex-direction: column;
}

.kikaku-list li:hover {
    transform: translateY(-50px); /* ホバーで少し浮く */
}

.kikaku-list a {
    text-decoration: none;
    color: inherit;
}

.kikaku-list img {
    width: 100%;
    height: 150px;
    object-fit: cover; /* 画像の比率を保ったまま切り抜き */
}

.kikaku-list dl {
    padding: 15px;
    margin: 0;
}

.kikaku-list dt {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
    color: #333;
}

.kikaku-list dd {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* 場所ラベルのデザイン */
.place {
    background: #333;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    display: inline-block;
    margin: 0 15px 15px auto; /* 右下に配置 */
    border-radius: 4px;
}




/* --- レスポンシブ調整 --- */
@media (max-width: 768px) {
    .kikaku-list {
        /* スマホでは2列に並べる（1fr 1fr） */
        grid-template-columns: repeat(2, 1fr); 
        column-gap: 10px;
        row-gap: 20px;
        padding: 0 10px;
    }

    .kikaku-list img {
        height: 100px; /* スマホでは画像を少し小さく */
    }

    .kikaku-list dt {
        font-size: 15px; /* 文字を調整 */
    }

    .kikaku-list dd {
        display: none; /* スマホでは説明文を隠してスッキリさせる（任意） */
    }
}

.searchButton {
  font-size: 1px;
  writing-mode: horizontal-tb;
}



@media (max-width: 480px) {
    /* 非常に狭い画面では1列にする */
    .kikaku-list {
        grid-template-columns: 1fr;
    }
    
    .kikaku-list dd {
        display: block; /* 1列なら説明文を表示してもOK */
    }

    .searchButton {
  font-size: 1px;
  writing-mode: horizontal-tb;
}

}