@charset "UTF-8";

/* 企画特設サムネ画像設定 */
.img-box {
    width: 100%;
    max-width: 400px;
    margin: 30px auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.img-box:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.img-box a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border-bottom: none !important;
}

.img-box img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
    transition: filter 0.4s ease;
}

.img-box:hover img {
    filter: brightness(1.05);
}


@media screen and (max-width: 767px) {
    .img-box {
        max-width: 100%;
        margin: 20px 0;
    }
}


/* 企画検索設定 */
.btn-submit-container {
    text-align: center;
    margin-top: 20px;
}

.btn-submit{
    display: inline-block;
    padding: 10px 50px;
    background: linear-gradient(135deg, #7a64d1 0%, #494bd4 100%);
    color: #ffffff !important;
    text-decoration: none !important;
    border-radius: 50px;
    font-size: 0.95rem;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(122, 100, 209, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.btn-submit:visited,
.btn-submit:hover,
.btn-submit:active{
    color: #ffffff !important;
    text-decoration: none !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(122, 100, 209, 0.6);
}

/* buttonへのフォント適用設定 */
button {
  font-family: inherit;
}

.search-form {
    margin: 20px 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.search-form input[type="text"] {
    flex: 1;
    padding: 12px 15px;
    border: 2px solid #3868c9;
    border-radius: 8px;
    font-size: 1rem;
    background-color: #fff;
    color: black;
}

.search-form button {
    padding: 12px 25px;
    background-color: #3868c9;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.search-form button:hover {
    background-color: #7a64d1;
}

.search-form button#clear-search-btn {
    background-color: #f1f5f9;
    color: #3868c9;
    border: 2px solid #3868c9;
    padding: 10px 23px;
    transition: background-color 0.3s, color 0.3s;
}

.search-form button#clear-search-btn:hover {
    background-color: #e0e7ff;
    color: #3868c9;
}

.search-hint-box {
    margin: 20px 0 30px;
    padding: 20px;
    background-color: rgba(225, 231, 255, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(56, 104, 201, 0.3);
}

.hint-section h3 {
    margin: 0 0 15px;
    font-size: 1rem;
    color: #7a64d1;
    border: none;
}

.hint-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hint-chip[class*="fes-"] {
    padding: 6px 15px;
    color: #fff;
    border: none;
    font-weight: 500;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hint-chip[class*="fes-"]:hover {
    filter: brightness(0.9) saturate(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    opacity: 0.8;
}

.search-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.search-item {
    background-color: #fff;
    border: 1px solid rgba(255, 179, 0, 0.2);
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(230, 81, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.search-item:hover {
    transform: translateY(-5px);
}


.search-item-title {
    margin: 0 0 10px;
    font-size: 1.15rem;
    font-weight: bold;
    color: #333;
}

.search-item-place {
    margin: 0;
    font-size: 0.9rem;
    color: #666;
}


.search-image {
    width: 100%;
    height: 180px;
    margin-bottom: 15px;
    border-radius: 8px;
    overflow: hidden;
    background-color: transparent;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; 
    transition: transform 0.3s ease;
    display: block;
}


.search-item h3 {
    margin: 0 0 15px;
    color: #E65100;
    font-size: 1.25rem;
    border: none;
    padding: 0;
}

.search-item p {
    margin: 6px 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.search-item strong {
    color: #BF360C;
}

.search-item .item-footer {
    margin-top: auto;
    padding-top: 20px;
}

/* モーダル表示中のbodyスクロール禁止 */
body.modal-open {
    position: fixed;
    width: 100%;
    overflow-y: scroll;
}


/* モーダル表示 */
.modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content.event-modal-content {
    background-color: #fff;
    margin: 0 auto; 
    padding: 30px;
    border-radius: 15px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh; 
    overflow-y: auto;  
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    position: relative;
    color: #4E342E;
    box-sizing: border-box;
}

.close-modal {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.event-modal-content h3 {
    color: #E65100;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.5rem;
    border-bottom: 2px solid #FFB300;
    padding-bottom: 10px;
}

.modal-image {
    width: 100%;
    height: 250px; 
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    background-color: transparent; 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; 
    display: block;
    margin: 0 auto;
}

.event-modal-content p {
    margin: 10px 0;
    font-size: 1rem;
}

.modal-description {
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(255, 248, 225, 0.6);
    border-radius: 8px;
    border: 1px solid rgba(255, 179, 0, 0.3);
    text-align: left; 
}

/* special カラム: リンクボタン */
.modal-special-container {
    margin: 8px 0 2px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.modal-special-container a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background-color: #d93025;
    color: #fff !important;
    border-radius: 6px;
    border: none !important;
    border-bottom: none !important;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(217, 48, 37, 0.35);
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.modal-special-container a:hover {
    background-color: #b52519;
    box-shadow: 0 5px 16px rgba(217, 48, 37, 0.45);
    transform: translateY(-2px);
    color: #fff !important;
}

/* レスポンシブ対応 */
@media (max-width: 767px) {
    .search-results {
        grid-template-columns: 1fr;
    }
    
    .search-form input[type="text"] {
        width: 100%;
        flex: none;
    }
    
    .search-form button {
        width: 100%;
    }

    .modal {
        padding: 10px; 
    }

    .modal-content.event-modal-content {
        padding: 25px 18px; 
        max-height: 95vh; 
        border-radius: 12px;
    }

    .event-modal-content h3 {
        font-size: 1.25rem; 
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .modal-image {
        height: 100px; 
        margin-bottom: 12px;
    }

    .close-modal {
        top: 10px;
        right: 15px;
        font-size: 24px;
    }

    .modal-description {
        margin-top: 15px;
        padding: 12px;
        font-size: 0.75rem; 
    }
}

/* 祭別カラー設定 */

/* 各祭のアイコン色設定 */
.fes-icon {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    color: #fff;
    font-weight: bold;
    font-size: 0.85rem;
    text-align: center;
}

/* 祭毎のカラーテーマ */
.fes-EXC { background-color: #4527A0; } /* 実行委員会企画 */
.fes-COL { background-color: #C62828; } /* 連携企画 */
.fes-AUW { background-color: #558B2F; } /* 楡陵祭 */
.fes-LET { background-color: #795548; } /* 文系祭 */
.fes-SCI { background-color: #1565C0; } /* 理学祭 */
.fes-ENG { background-color: #E65100; } /* 工学祭 */
.fes-DOC { background-color: #607D8B; } /* 医学展 */
.fes-DEN { background-color: #0298bd; } /* 歯学祭 */
.fes-MED { background-color: #C2185B; } /* 薬学祭 */
.fes-VET { background-color: #7d2e59; } /* 獣医学祭 */
.fes-AGR { background-color: #2E7D32; } /* 農学祭 */

/* 実行委員会企画 EXC: #4527A0 */
.modal-fes-EXC h3 { color: #4527A0 !important; border-bottom-color: rgba(69, 39, 160, 0.3) !important; }
.modal-fes-EXC .modal-description { border-color: rgba(69, 39, 160, 0.3) !important; background-color: rgba(69, 39, 160, 0.03) !important; }
.card-fes-EXC { border-color: rgba(69, 39, 160, 0.25) !important; }
.card-fes-EXC .search-item-title { color: #4527A0; }


/* 連携企画 COL: #C62828 */
.modal-fes-COL h3 { color: #C62828 !important; border-bottom-color: rgba(198, 40, 40, 0.3) !important; }
.modal-fes-COL .modal-description { border-color: rgba(198, 40, 40, 0.3) !important; background-color: rgba(198, 40, 40, 0.03) !important; }
.card-fes-COL { border-color: rgba(198, 40, 40, 0.25) !important; }
.card-fes-COL .search-item-title { color: #C62828; }


/* 楡陵祭 AUW: #558B2F */
.modal-fes-AUW h3 { color: #558B2F !important; border-bottom-color: rgba(85, 139, 47, 0.3) !important; }
.modal-fes-AUW .modal-description { border-color: rgba(85, 139, 47, 0.3) !important; background-color: rgba(85, 139, 47, 0.03) !important; }
.card-fes-AUW { border-color: rgba(85, 139, 47, 0.25) !important; }
.card-fes-AUW .search-item-title { color: #558B2F; }

/* 文系祭 LET: #795548 */
.modal-fes-LET h3 { color: #795548 !important; border-bottom-color: rgba(121, 85, 72, 0.3) !important; }
.modal-fes-LET .modal-description { border-color: rgba(121, 85, 72, 0.3) !important; background-color: rgba(121, 85, 72, 0.03) !important; }
.card-fes-LET { border-color: rgba(121, 85, 72, 0.25) !important; }
.card-fes-LET .search-item-title { color: #795548; }


/* 理学祭 SCI: #1565C0 */
.modal-fes-SCI h3 { color: #1565C0 !important; border-bottom-color: rgba(21, 101, 192, 0.3) !important; }
.modal-fes-SCI .modal-description { border-color: rgba(21, 101, 192, 0.3) !important; background-color: rgba(21, 101, 192, 0.03) !important; }
.card-fes-SCI { border-color: rgba(21, 101, 192, 0.25) !important; }
.card-fes-SCI .search-item-title { color: #1565C0; }

/* 工学祭 ENG: #E65100 */
.modal-fes-ENG h3 { color: #E65100 !important; border-bottom-color: rgba(230, 81, 0, 0.3) !important; }
.modal-fes-ENG .modal-description { border-color: rgba(230, 81, 0, 0.3) !important; background-color: rgba(230, 81, 0, 0.03) !important; }
.card-fes-ENG { border-color: rgba(230, 81, 0, 0.25) !important; }
.card-fes-ENG .search-item-title { color: #E65100; }


/* 医学展 DOC: #607D8B */
.modal-fes-DOC h3 { color: #607D8B !important; border-bottom-color: rgba(96, 125, 139, 0.3) !important; }
.modal-fes-DOC .modal-description { border-color: rgba(96, 125, 139, 0.3) !important; background-color: rgba(96, 125, 139, 0.03) !important; }
.card-fes-DOC { border-color: rgba(96, 125, 139, 0.25) !important; }
.card-fes-DOC .search-item-title { color: #607D8B; }


/* 歯学祭 DEN: #0298bd */
.modal-fes-DEN h3 { color: #0298bd !important; border-bottom-color: rgba(2, 152, 189, 0.3) !important; }
.modal-fes-DEN .modal-description { border-color: rgba(2, 152, 189, 0.3) !important; background-color: rgba(2, 152, 189, 0.03) !important; }
.card-fes-DEN { border-color: rgba(2, 152, 189, 0.25) !important; }
.card-fes-DEN .search-item-title { color: #0298bd; }

/* 薬学祭 MED: #C2185B */
.modal-fes-MED h3 { color: #C2185B !important; border-bottom-color: rgba(194, 24, 91, 0.3) !important; }
.modal-fes-MED .modal-description { border-color: rgba(194, 24, 91, 0.3) !important; background-color: rgba(194, 24, 91, 0.03) !important; }
.card-fes-MED { border-color: rgba(194, 24, 91, 0.25) !important; }
.card-fes-MED .search-item-title { color: #C2185B; }

/* 獣医学祭 VET: #7d2e59 */
.modal-fes-VET h3 { color: #7d2e59 !important; border-bottom-color: rgba(125, 46, 89, 0.3) !important; }
.modal-fes-VET .modal-description { border-color: rgba(125, 46, 89, 0.3) !important; background-color: rgba(125, 46, 89, 0.03) !important; }
.card-fes-VET { border-color: rgba(125, 46, 89, 0.25) !important; }
.card-fes-VET .search-item-title { color: #7d2e59; }

/* 農学祭 AGR: #2E7D32 */
.modal-fes-AGR h3 { color: #2E7D32 !important; border-bottom-color: rgba(46, 125, 50, 0.3) !important; }
.modal-fes-AGR .modal-description { border-color: rgba(46, 125, 50, 0.3) !important; background-color: rgba(46, 125, 50, 0.03) !important; }
.card-fes-AGR { border-color: rgba(46, 125, 50, 0.25) !important; }
.card-fes-AGR .search-item-title { color: #2E7D32; }

/* 屋内・屋外（oi）アイコンのスタイル */
.oi-icon {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #fff;
}

.oi-in {
    background-color: #72640a;
}

.oi-out {
    background-color: #bfab90;
}

.oi-both {
    background: linear-gradient(90deg, #bfab90 50%, #72640a 50%);
}

/* ページトップへ戻るボタン */
.pagetop-btn {
  position: fixed;
  width: 75px;
  height: 75px;
  border: solid 3px rgba(225, 231, 255, 0.6);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  right: 25px;
  bottom: 25px;
  z-index: 1000;
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 0.3s, transform 0.3s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.pagetop-btn::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-left: 2px solid #666059;
  border-top: 2px solid #666059;
  transform: rotate(45deg);
  margin-top: 4px;
}

.pagetop-btn::after {
  content: "PAGE\A TOP";
  white-space: pre;
  text-align: center;
  font-size: 12px;
  color: #666059;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.pagetop-btn.visible {
  opacity: 1;
  transform: translateY(0);
}