/* Path:/css/search/style.css */

@charset "UTF-8";

html, body {
    overflow-x: hidden; /* 横スクロールを完全に禁止してはみ出しを隠す */
    width: 100%; /* 横幅を画面サイズに固定する */
    margin: 0;
    padding: 0;
    overscroll-behavior-x: none; /* スマホブラウザ特有の「横スワイプで戻る/進む」を無効化する */
}

.header_banner_2 {
    width: 100%;
    height: 44px;
    top: 44px;
    position: fixed;
    left: 0;
    z-index: 95;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 1fr 3px;
    align-items: center;
    justify-items: center;
    transition: transform 0.6s ease;
}

.hedder_2_1{
	grid-column: 1 / 5;
}

.hedder_2_2{
	grid-column: 5 / 9;
}

.hedder_2_3{
	grid-column: 9 / 13;
}

.hedder_3_1_w{
	grid-column: 1 / 13;
	justify-self: stretch;
}

.hedder_3_1_c{
	grid-column: 1 / 13;
	justify-self: stretch;
}

.search_button_c{

}

.top_margin {
  margin-top: 88px; /* ★ 104px から 88px(44+44) に変更 */
  transition: margin-top 0.3s ease;
}

.marginright5{
	margin-right: 10px;
}

.details_base{
	max-height: 60vh;
  overflow-y: auto;
}

.hedder_2_1, .hedder_2_2, .hedder_2_3 {
    grid-row: 1;
}

.active_bar {
    grid-row: 2;
    grid-column: 1 / 5;
    width: 100%;
    align-self: end;
    z-index: 10;
}

.right {
    text-align: right;
}

.comm_top {
	width: 100%;
	display: grid;
  grid-template-columns: 1fr 1fr;
}

.comm_main {
	width: 100%;
	min-height: 35px;
}

a.inherit,a.inherit:hover,a.inherit:visited{
    color: inherit;
		text-decoration: none;
		width: 100%;
}

/* メタ情報・カード内リンク（ランキング等） */
.works_meta_box .meta_item > a,
.works_meta_box .meta_item > a:visited,
.works_meta_box .meta_item > a:hover {
    color: inherit;
    text-decoration: none;
}

.works_meta_box .meta_item > a:active {
    opacity: 0.65;
}

/* 返信・シェア・文脈ラベル（下線なし・アクセント色のみ） */
.reply_message a,
.share_messeage > a {
    color: #1E90FF;
    text-decoration: none;
    font-weight: 600;
}

.reply_message a:active,
.share_messeage > a:active {
    opacity: 0.65;
}

/* コメント本文リンクは通常テキストのまま */
a.search_comment_body_link,
a.search_comment_body_link:visited,
a.search_comment_body_link:hover {
    color: inherit;
    text-decoration: none;
}

a.search_comment_body_link:active {
    opacity: 0.65;
}


.thumb {

 }
 .thumb__items {
	 display: flex;
	 flex-flow: wrap;
	 position: relative;
	 z-index: 10;
 }
 .thumb__items > li {
	 flex: 0 1 25%;
	 list-style: none;
	 cursor: pointer;
	 position: relative;
 }
 .thumb__items > li img {
	 max-width: 100%;
	 position: relative;
	 vertical-align: bottom;
 }
 .thumb__items > li:before {
	 content: "";
	 display: block;
	 opacity: 0;
	 background: rgba(0, 0, 0, 0.6);
	 width: 100%;
	 height: 100%;
	 position: absolute;
	 left: 0;
	 top: 0;
	 z-index: 10;
	 transition: all 0.5s 0.3s ease;
 }
 .thumb__items > li:hover::before {
	 opacity: 1;
 }

 .modal {
	display: none;
	 width: 100%;
	 height: 100vh;
	 position: fixed;
	 left: 0;
	 top: 0;
	 z-index: 9999;
 }

 .modal-wrap {
	 width: 100%;
	 height: 100%;
	 text-align: center;
	 padding: 1px;
	 overflow: auto;
	 -webkit-overflow-scrolling: touch;
	 -ms-overflow-style: none;
	 overflow: -moz-scrollbars-none;
	 white-space: nowrap;
 }
 .modal-wrap::-webkit-scrollbar {
	 display: none;
 }
 .modal-wrap:after {
	 content: '';
	 display: inline-block;
	 vertical-align: middle;
	 width: 1px;
	 height: 100%;
 }
 .modal-overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.modal__item {
	width: fit-content;
	max-width: 1200px;
	display: inline-block;
	vertical-align: middle;
	position: relative;
}


 .modal.visible {
	display: block;
 }

 .modal__item img {
 	max-width: 100vw;
 	max-height: 90vh;
 	vertical-align: middle;
 }
 .modal__caption {
 	position: absolute;
 	color: #fff;
 	line-height: 1.6;
 	padding: 10px;
 }

 .modal__close {
 	position: fixed;
 	top: 10px;
 	right: 10px;
 	z-index: 9999;
 }

 .modal__prev {
 	position: fixed;
 	bottom: 5px;
 	left: 10px;
 	z-index: 9999;
 }
 .modal__next {
 	position: fixed;
 	bottom: 5px;
 	right: 10px;
 	z-index: 9999;
 }

 .fas {
	height: 40px;
 	cursor: pointer;
 }

 .fas2 {
	height: 60px;
 	cursor: pointer;
 }

 .fadein {
 animation: fadein .3s;
 }

 .fadeout {
 	animation: fadeout .3s;
 	animation-fill-mode: forwards;
 }
 @keyframes fadein {
 	0% {
 			opacity: 0;
 	}
 	100% {
 			opacity: 1;
 	}
 }
 @keyframes fadeout {
 	0% {
 			opacity: 1;
 	}
 	100% {
 			opacity: 0;
 			display: none;
 	}
 }

 .share_messeage{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #FFF;
    border: solid 1px;/*線*/
    border-radius: 10px;/*角の丸み*/
}

/*searchフォーム*/

/* 第3ヘッダー（検索エリア）の固定配置 */
.search_box_w, .search_box_c {
    position: fixed;
    top: 88px; /* 第1(44px) ＋ 第2(44px) のすぐ下 */
    left: 0;
    width: 100%;
    background: #FFFFFF;
    z-index: 90;
    transition: transform 0.6s ease;
    box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* ★影をつける場合 */
    padding-top: 12px;    /* ★追加：上の青い線との間にゆとりを作る */
    padding-bottom: 12px; /* ★追加：下線との間にも同じゆとりを作る */
}

/* 検索窓（ワード検索・フリーワード）のモダン化 */
.search-form-3 {
    display: grid;
    grid-template-columns: 1fr 50px;
    align-items: center;
    width: 100%;
    height: 40px; /* 44pxより少しスリムにするのが今風です */
    background-color: #F0F4F8; /* ★ここがポイント！SNS風の薄いグレー背景 */
    border-radius: 50px; /* ★両端を丸くする（ピル型） */
    border: 1px solid #E1E8ED; /* ほんのり薄い枠線を足して輪郭を強調 */
}

/* 入力欄とボタンの高さも揃える */
.search-form-3 input, .search-form-3 button {
    height: 100%;
    border: none;
    box-sizing: border-box;
}

.search-form-3 input {
    width: 100%;
    background-color: transparent; /* ★入力欄自体の背景は透明にして親要素のグレーに馴染ませる */
    padding: 5px 20px;
    font-size: 1em;
    outline: none;
}

.search-form-3 input::placeholder{
    color: #777777;
}

.search-form-3 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 45px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.search-form-3 button::after {
    width: 24px;
    height: 24px;
    background-image: url("/admin_pic/search.svg");
    background-repeat: no-repeat;
		background-size: contain;
    content: '';
}
/*
.space{
	width: 100%;
	height: 1000px;
}
*/

.margin_left_30{
	margin-left: 30px;
}

.margin_left_5{
	margin-left: 5px;
}

.margin_bottom_5{
	margin-bottom: 5px;
}

/* ▼▼▼ 空白時のスワイプ領域確保と、無駄な余白の削除 ▼▼▼ */
.blank {
    display: none !important; /* 昔の1000pxの余白は完全に無効化して消す */
}

/* 検索結果やランキングが少なくても、常に「最低でも画面の高さ分」は領域を確保する */
#contentslist,
#search_list_c,
.search_result_slide,
.condition_result_slide {
    min-height: calc(100vh - 160px); /* 画面の高さ(100vh) から、ヘッダー等の高さを引いた分 */
    min-height: calc(100dvh - 160px);
}
/* ▲▲▲ ここまで ▲▲▲ */

#search_button_c {
    background: #0068b7;
    color: white;
    border: none;
    padding: 0 28px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 8px auto;
}


@media (hover: hover) {
	#search_button_c:hover {
	    transform: translateY(-2px);
	    filter: brightness(1.1);
	}
}

#search_button_c:active{
transform: translateY(2px); /* 少し沈む動作 */
filter: brightness(0.9);
cursor:pointer;
}


.details {
    background-color: #fcfcfc;
    border-left: 3px solid #0068b7;
    margin: 4px 5px;
    border-radius: 0 8px 8px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}
.details summary {
    list-style: none;
    cursor: pointer;
    padding: 0 16px;
    height: 38px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    position: relative;
}
.details summary::-webkit-details-marker {
    display: none;
}
.details summary::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -5px;
    border: 5px solid transparent;
    border-top-color: #666;
    transition: transform 0.3s;
}
.details[open] summary::after {
    transform: rotate(180deg);
    transform-origin: center 25%;
}
.details div {
    padding: 0 16px 12px;
}

/* details内のチェックボックスのレイアウト調整 */
.details p {
    margin: 8px 0;
    display: flex;
    align-items: center; /* チェックボックスとテキストの高さを中央で揃える */
}
.details input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.3); /* スマホで押しやすいように少し大きくする */
    cursor: pointer;
}
.details label {
    cursor: pointer; /* 文字を押してもチェックできるようにする */
}


/* ▼▼▼ 検索窓とアコーディオンの幅・マージンを揃える ▼▼▼ */

/* 1. HTMLの「margin_left_30」による左寄りを無効化 */
.search_box_c .margin_left_30 {
    margin-left: 0 !important;
    width: 100%;
}

/* 2. アコーディオンと検索窓の幅を統一して中央に配置 */
.search_box_c .details,
.search_box_c .search-form-3,
.search_box_w .search-form-3 {
    width: calc(100% - 30px) !important; /* 画面幅から左右15pxずつマイナス */
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

/* 3. 縦の隙間（上下の余白）を微調整してバランスを良くする */
.search_box_c .details {
    margin-top: 8px;
    margin-bottom: 8px;
}

.search_box_c .search-form-3 {
    height: 38px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.search_box_c .search-form-3 input {
    font-size: 14px;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* ▼▼▼ アコーディオン展開時の高さ制限とスクロール ▼▼▼ */

/* 1. 検索エリア（ヘッダー内の要素）の最大高さを制限してスクロール可能にする */
.search_box_c, .search_box_w {
    max-height: 65vh; /* ヘッダー上部（ロゴやタブ）と合わせて画面の約80%になるように制限 */
    overflow-y: auto; /* はみ出した分は縦スクロールにする */
    align-self: start; /* 上から下へ自然に広がるようにする（Gridの中央揃えを解除） */
    padding-bottom: 15px; /* スクロールの一番下に少し余裕を持たせる */
    overscroll-behavior-y: contain; /* スクロールしきった時に裏側の画面が動くのを防ぐ */
}

/* 2. スクロールバーのデザイン（邪魔にならない細くてモダンな見た目に） */
.search_box_c::-webkit-scrollbar,
.search_box_w::-webkit-scrollbar {
    width: 6px;
}
.search_box_c::-webkit-scrollbar-track,
.search_box_w::-webkit-scrollbar-track {
    background: transparent; /* 背景は透明 */
}
.search_box_c::-webkit-scrollbar-thumb,
.search_box_w::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* 薄いグレーのバー */
    border-radius: 10px;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* ▼▼▼ リスト全体の左右に余白を作る ▼▼▼ */
#contentslist,
#search_list_c,
.search_result_slide {
    padding: 0 15px; /* 左右に15pxのゆとりを持たせる */
    box-sizing: border-box; /* padding を幅に含め、横はみ出しで白が見えないようにする */
    width: 100%;
    max-width: 100%;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* ▼▼▼ 画面の横揺れ・レイアウト崩れを強制ブロックする ▼▼▼ */
body, html {
    overflow-x: hidden !important;
    width: 100% !important;
}

#main_box {
    overflow-x: hidden !important;
    width: 100% !important;
    touch-action: pan-y; /* ブラウザ特有の横スワイプを無効化し、自作スワイプを優先する */
}

.search_result_window {
    overflow: hidden !important;
    width: 100% !important;
}

.search_result_slide {
    box-sizing: border-box !important;
}
/* ▲▲▲ ここまで ▲▲▲ */
/* ▼▼▼ 検索結果のサブタブ（作品/コメント/ユーザー）とスライダー ▼▼▼ */

/* サブタブ（search_box_w 内・検索窓の直下） */
.sub_tab_container {
    width: 100%;
    margin-top: 4px;
}

/* 2. サブタブを3列（NFT 有効時は4列）に並べる */
.sub_tab_box {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    position: relative;
}
.sub_tab_box.tab_2_cols {
    grid-template-columns: 1fr 1fr;
}
.sub_tab_box.tab_4_cols {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* 3. スライドバー（レイアウトのみ・色は common.css） */
.sub_active_bar {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 33.333%;
    transition: transform 0.3s ease;
}
.sub_active_bar.top_active_bar_4 {
    width: 25%;
}

/* 4. スライダー（画面スワイプ）の設定 */
.search_result_window {
    width: 100%;
    overflow: hidden !important;
    transition: height 0.3s ease; /* ★追加：高さが変わる時に滑らかに伸縮させる */
}
.search_result_slider {
    display: flex;
    width: 300%; /* 3画面分 */
    transition: transform 0.3s ease;
    align-items: flex-start; /* ★追加：少ない要素が勝手に下に伸びるのを防ぐ！ */
}
.search_result_slider.search_result_slider_4 {
    width: 400%;
}
.search_result_slide {
    width: 33.333%;
    max-width: 33.333%;
    box-sizing: border-box !important;
    padding: 0 15px;
}
.search_result_slider_4 .search_result_slide {
    width: 25%;
    max-width: 25%;
}

.condition_sub_tab_container {
    margin: 0 0 8px;
}
.condition_sub_active_bar {
    width: 50%;
}
.condition_result_window {
    width: 100%;
    overflow: hidden;
    transition: height 0.3s ease;
}
.condition_result_slider {
    display: flex;
    width: 200%;
    transition: transform 0.3s ease;
    align-items: flex-start;
}
.condition_result_slide {
    width: 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding: 0 15px;
}
.search_condition_section {
    margin: 0 0 24px;
}
.search_condition_section_title {
    margin: 0 0 10px;
    font-size: 1.05rem;
    font-weight: 700;
}
.search_condition_section_count {
    font-weight: 600;
    color: #64748b;
    font-size: 0.9rem;
}
.search_nft_price_row {
    margin: 0 0 10px;
}
.search_nft_price_input {
    width: 6.5rem;
    padding: 6px 8px;
    margin: 4px 0 8px;
}
.search_nft_kinds_lead {
    margin: 8px 0 4px;
    font-size: 0.9rem;
    color: #64748b;
}
.feed_nft_card {
    position: relative;
    padding-top: 18px;
}
.feed_nft_card_badge {
    position: absolute;
    top: 8px;
    left: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #5b21b6;
    background: #ede9fe;
    padding: 2px 8px;
    border-radius: 999px;
}
.feed_nft_card_title {
    margin: 8px 0 4px;
    font-size: 1.05rem;
}
.feed_nft_card_meta,
.feed_nft_card_seller,
.feed_nft_card_date {
    margin: 0 0 4px;
    font-size: 0.88rem;
    color: #64748b;
}
.feed_nft_card_thumb img {
    display: block;
    max-width: 100%;
    max-height: 180px;
    object-fit: cover;
    border-radius: 8px;
}
.feed_nft_card_clickable {
    cursor: pointer;
}
/* ▲▲▲ ここまで ▲▲▲ */
/* ▼▼▼ 検索前の初期画面（Empty State）のデザイン ▼▼▼ */
.empty_state {
    text-align: center;
    padding: 60px 20px;
    color: #999; /* 主張しすぎないグレー */
    font-weight: bold;
    line-height: 1.6;
}

.empty_icon {
    /* width: 60px; ← これが歪む原因だったので消します！ */
    height: 60px;    /* 高さは60pxで他のアイコンと綺麗に揃える */
    width: auto;     /* 横幅は画像の本来の比率にお任せする */
    opacity: 0.3;
    margin-bottom: 15px;
}
/* ▲▲▲ ここまで ▲▲▲ */

/* ▼▼▼ ワード検索：コメント・ユーザー結果（作品デザイン準拠） ▼▼▼ */
.search_user_icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.search_user_icon_lg {
    width: 40px;
    height: 40px;
}

.search_comment_card {
    padding-bottom: 10px;
}

.search_comment_author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0;
}

.search_comment_author_icon {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
}

.search_comment_date {
    font-size: 0.7em;
    color: #999;
    text-align: right;
    margin-top: 5px;
}

.search_comment_context {
    margin-bottom: 8px;
    font-size: 0.85em;
    color: #888;
}

.search_comment_context .reply_message {
    background: #f0f4f8;
    padding: 6px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
}

.search_share_label {
    font-size: 0.85em;
    color: #888;
    margin-bottom: 8px;
}

.search_comment_body {
    padding: 10px 12px;
    background: #f9f9f9;
    border-radius: 8px;
    line-height: 1.55;
    word-break: break-word;
}

.search_comment_body_muted {
    color: #999;
}

.search_comment_body_link {
    display: block;
    margin: 0 0 8px;
    text-decoration: none;
    color: inherit;
}

.search_share_quote {
    margin: 8px 0;
}

.search_share_quote_inner {
    padding: 8px 10px;
    background: #f0f4f8;
    border-left: 3px solid #87CEFA;
    border-radius: 0 8px 8px 0;
}

.share_messeage {
    margin: 8px 0;
    font-size: 0.9em;
}

.search_user_card {
    padding-bottom: 10px;
}

.search_user_card_header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.search_user_card_header .search_user_card_link {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
}

.search_user_card_link {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: 6px;
}

.search_user_card_main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search_user_name {
    font-size: 1.15em;
    font-weight: bold;
    color: #333;
}

.word_search_scroll_sentinel {
    height: 1px;
    width: 100%;
    pointer-events: none;
}
/* ▲▲▲ ここまで ▲▲▲ */