/* CI用にカスタム */ .PerformanceDate + .PerformanceDate { margin-top: 24px; } .PerformanceDate__head { display: flex; align-items: center; font-weight: 600; margin-bottom: 16px; width: 100%; } .PerformanceDate__head:before { background-color: #0074be; content: ""; display: block; font-size: 1.15942029rem; width: 8px; height: 24px; margin-right: 8px; } /* 横並び：開始 | 〜 | 終了（基本は1行、狭い時のみ折り返し） */ .search-area .PerformanceDate__body.Flatpickr { display: flex; align-items: center; gap: 8px; /* 開始/〜/終了の間隔 */ flex-wrap: nowrap; /* デフォルト横並び固定 */ } /* 両端の入力フィールド：可変幅＋潰れ防止 */ .search-area .PerformanceDate__block { /* flex: 1 1 220px; */ /* min-width: 180px; */ } .search-area .PerformanceDate__line { position: relative; } /* “〜” の見た目 */ .search-area .PerformanceDate .connection { flex: 0 0 auto; } .search-area .PerformanceDate .connection p { margin: 0 4px; font-size: 0.95rem; /* 入力と視覚サイズを合わせる */ line-height: 1; color: #7f7f7f; } /* 狭い画面だけ折り返す（必要時のみ） */ @media (max-width: 420px) { .search-area .PerformanceDate__body.Flatpickr { flex-wrap: wrap; /* 2段に畳む */ row-gap: 6px; } .search-area .PerformanceDate .connection { order: 2; /* 1段目：開始、2段目：〜 終了 の並び */ width: 100%; text-align: center; } .search-area .PerformanceDate__block:last-of-type { order: 3; flex-basis: 100%; } } /* ========== 入力/セレクトの視覚トーン統一 ========== */ /* 日付入力 */ .search-area .PerformanceDate__input { height: 38px; /* セレクトと高さ揃え */ padding: 0 12px; border: 1px solid #ccc; border-radius: 4px; background: #fff; font-size: 0.95rem; line-height: 1; } .search-area .PerformanceDate__input::placeholder { color: #7f7f7f; } /* 地域セレクトの行 */ .search-area .box-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* ラベル側の継承 */ .search-area .box-top .form-item-01 { font-size: 0.95rem; line-height: 1.3; } /* セレクト本体 */ .search-area .prefselect, .search-area .box-top .prefselect { height: 38px; /* 日付入力と一致 */ font-size: 0.95rem; /* バランス調整 */ line-height: 1; padding: 0 28px 0 12px; /* 右に矢印分の余白 */ border: 1px solid #ccc; border-radius: 4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2399a2ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center #fff; background-size: 12px 12px; appearance: none; -webkit-appearance: none; } /* option（効くブラウザのみ） */ .search-area .prefselect option { font-size: 1rem; } /* 先頭のダミー項目のトーン控えめ（対応ブラウザ） */ .search-area .prefselect option[value=""] { color: #7f7f7f; } /* フォーカス（キーボード操作時） */ .search-area .PerformanceDate__input:focus-visible, .search-area .prefselect:focus-visible { outline: 2px solid #90caf9; outline-offset: 2px; } /* カレンダーアイコンのかぶり防止 */ .search-area .PerformanceDate__line .PerformanceDate__icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; pointer-events: none; } /* flatpickr のテーマは既存のまま。ホバーのみ軽く */ .flatpickr-day:hover { filter: brightness(0.98); } /*------------------------------------- 興行まとめAPI（元CSSそのまま） -------------------------------------*/ p.number{margin:0; padding:0;} .MainCover { padding: 30px; background: #000; margin-bottom: 26px; } .MainCover__title { font-size: 1.375rem; text-align: center; font-weight: 600; color: #fff; } .MainCover__text { font-size: 0.7em; text-align: center; font-weight: 600; line-height: 1.2; color: rgba(255, 255, 255, 0.7); } .SectionHeader { display: flex; flex-direction: column; flex-wrap: wrap; } @media (min-width: 48.0625em) { .SectionHeader { flex-direction: row; align-items: baseline; } } .SectionGenre { padding: 26px 0; } .SectionGenre h2.SectionTitle { display: flex; flex-direction: column; font-size: 1.375rem; font-weight: 600; } @media (min-width: 48.0625em) { .SectionGenre h2.SectionTitle { flex-direction: row; align-items: center; } } .meventapi{ padding-bottom:26px; } .ContainerMain { max-width: 1024px; padding: 0 12px; margin: 0 auto; } .Grid.summary { display: flex; width: 100%; flex-wrap: nowrap; margin: 0 auto; padding: 20px 0 0 0; } @media (min-width: 48.0625em) { .Grid.summary { flex-wrap: wrap; padding: 20px 0 0 0; } } .TicketList { display: flex; width: 100%; flex-wrap: wrap; justify-content:flex-start; gap:10px; margin-bottom:1em; } @media (min-width: 48.0625em) { .TicketList { gap:22px; } } .TicketList::after { content: ""; display: block; width: calc(25% - 9px); height: 0; } .TicketList__Item { background-color: #fff; border-radius: 4px; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); overflow: hidden; position: relative; width: calc(50% - 5px); scroll-snap-align: end; flex: none; } @media (min-width: 48.0625em) { .TicketList__Item { width: calc(25% - 17px); } } .TicketList__Item__sub { display: block; padding: 10px 8px; } .TicketList__Item__sub p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } @media (min-width: 48.0625em) { .TicketList__Item__sub p {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.3;font-size: 14px;} } .TicketList__Item__text { padding: 8px 0; } .TicketList__Item__link { font-size: 0.8125rem; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; } .TicketList__Item__link:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .TicketList__Item__thumb { display: block; height: 100%; flex-shrink: 0; background: #707070; width: 100%; } .TicketList__Item__thumb > img { object-fit: contain; object-position: center; background-color: #f4f4f4; width: 100%; height: 160px; position: relative; overflow: hidden; } @media (min-width: 48.0625em) { .TicketList__Item__thumb > img { height: 204px; } } .TicketList__Item.pc_none { display: block; } @media (min-width: 48.0625em) { .TicketList__Item.pc_none { display: none !important; } } .Pagination { background: #F5F5F5; padding: 20px; max-width: 886px; margin: 0 auto; } .Pagination p { text-align: center; padding-bottom: 10px; } .Pagination p span { font-weight: 600; } .Pagination-Item { display: flex; justify-content: center; align-items: center; gap: 0 4px; list-style-type: none; padding: 0; flex-wrap: wrap; } @media (min-width: 48.0625em) { .Pagination-Item { gap: 0 8px; } } .Pagination-Item a { display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; border-radius: 1px; color: #0074be; font-weight: 600; } .Pagination-Item a:not(:hover) { text-decoration: none; } .Pagination-Item .current a { color: #7F7F7F; pointer-events: none; } .Pagination-Item .prev a { background-color: #E5E5E5; border: 1px solid #B2B2B2; border-radius: 5px; color: #B2B2B2; position: relative; } .Pagination-Item .prev a::after { position: absolute; content: ""; right: 8px; top: 0; bottom: 0; margin: auto; width: 10px; height: 10px; border-top: 2px solid #0074be; border-right: 2px solid #0074be; transform: rotate(-135deg); } .Pagination-Item .next a { background-color: #E5E5E5; border: 1px solid #B2B2B2; border-radius: 5px; position: relative; } .Pagination-Item .next a::after { position: absolute; content: ""; left: 8px; top: 0; bottom: 0; margin: auto; width: 10px; height: 10px; border-top: 2px solid #0074be; border-right: 2px solid #0074be; transform: rotate(45deg); } /*------------------------------------- アコーディオン（元CSS） -------------------------------------*/ .search-area { list-style: none; width: 100%; margin: 0 auto; border: 1px solid #ccc; background: #F5F5F5; max-width: 886px; } .search-area__list { margin: 25px 0; position: relative; } .search-area__list__down { position: absolute; top: -5px; } .search-area .number { padding: 0 10px 0; font-size: 0.85rem; line-height: 1.1; font-weight: 600; } @media (min-width: 48.0625em) { .search-area .number {font-size: 1.4rem;} } @media screen and (max-width: 20.0625em) { .search-area .number { padding: 0 0 0 10px; } } .search-area .number span { font-size: 0.7rem; } .search-area .conditions { padding: 3px 10px 10px; font-size: 0.7rem; line-height: 1.2; } @media (min-width: 48.0625em) { .search-area .conditions { font-size: 0.8rem; } } @media screen and (max-width: 20.0625em) { .search-area .conditions { padding: 5px 0 0 10px; } } .search-area .comment { padding: 0 10px 10px; font-size: 0.75rem; } @media (min-width: 48.0625em) { .search-area .comment { font-size: 0.9rem; } } @media screen and (max-width: 20.0625em) { .search-area .comment { padding: 0 0 0 10px; } } .search-area .sp-br { display: none; } @media screen and (max-width: 20.0625em) { .search-area .sp-br { display: block; } } .search-area .accordion-content { position: relative; cursor: pointer; font-size: 0.8rem; font-weight: normal; padding: 5px 10px 5px 32px; transition: all 0.5s ease; margin: 0 10px 0 auto; max-width: 109px; border: 1px solid #7F7F7F; background: #fff; border-radius: 5px; } .search-area .accordion-content span { color: #0074be; font-weight: 600; } .search-area .accordion-content span::before {content: "";position: absolute;top: 5px;left: 10px;width: 18px;height: 18px;background: url(https://cdn.l-tike.com/image/mevent/Icon_feather-filter.svg) no-repeat;} .search-area .accordion-content::after { border-right: solid 2px #0074be; border-top: solid 2px #0074be; content: ""; display: block; height: 8px; position: absolute; right: 10px; top: 30%; transform: rotate(135deg); transition: transform 0.3s ease-in-out, top 0.3s ease-in-out; width: 8px; } .search-area .accordion-content.open::after { top: 45%; transform: rotate(-45deg); } .search-area .box { background: #fff; margin: 4% 3% 3% 3%; padding: 2% 3% 1%; } @media (min-width: 48.0625em) { .search-area .box { margin: 4% 3% 3% 3%; } } @media screen and (max-width: 20.0625em) { .search-area .box { margin: 13% 3% 5% 3%; } } .search-area .accordion-box { display: none; } .search-area .ButtonArea { display: flex; justify-content: center; margin: 0 auto; align-items: center; padding: 1% 3% 0; } @media (min-width: 48.0625em) { .search-area .ButtonArea { padding: 0 3%; } } .search-area .ButtonArea__item { background: #fff; text-align: center; border-radius: 4px; font-size: 0.875rem; margin: 0 4.5px; font-weight: 600; padding: 8px; } @media (min-width: 48.0625em) { .search-area .ButtonArea__item { margin: 0 12px; } } .search-area .ButtonArea__item a { display: block; height: 100%; width: 100%; } .search-area .ButtonArea__item.clear { max-width: 79px; width: 100%; background: #fff; color: #0074be; border: 1px solid #707070; } .search-area .ButtonArea__item.prime { max-width: 158px; width: 100%; background: #0074be; color: #fff; border: 1px solid #0074be; } .search-area .ButtonArea__item.prime a{ color: #fff; } /* …（元の各種UI・Footer・Card・Form などは省略せず残す）… */ /* ページングの初期表示/表示切替（元CSS） */ div.meventapi ul.TicketList li { display: none; } div.meventapi ul.TicketList li.on { display: block; } /*------------------------------------- flatpickr（元ベース） -------------------------------------*/ .flatpickr-calendar { background: transparent; opacity: 0; display: none; text-align: center; visibility: hidden; padding: 0; -webkit-animation: none; animation: none; direction: ltr; border: 0; font-size: 14px; line-height: 24px; border-radius: 5px; position: absolute; width: 307.875px; -webkit-box-sizing: border-box; box-sizing: border-box; -ms-touch-action: manipulation; touch-action: manipulation; background: #fff; -webkit-box-shadow: 1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08); box-shadow: 1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08) } .flatpickr-calendar.open,.flatpickr-calendar.inline { opacity: 1; max-height: 640px; visibility: visible } .flatpickr-calendar.open { display: inline-block; z-index: 99999 } .flatpickr-calendar.animate.open { -webkit-animation: fpFadeInDown 300ms cubic-bezier(.23,1,.32,1); animation: fpFadeInDown 300ms cubic-bezier(.23,1,.32,1); } .flatpickr-calendar.inline { display: block; position: relative; top: 2px } .flatpickr-calendar.static { position: absolute; top: calc(100% + 2px) } .flatpickr-calendar.static.open { z-index: 999; display: block } /* …（元のflatpickr詳細は残す）… */ @-webkit-keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } @keyframes fpFadeInDown { from { opacity: 0; -webkit-transform: translate3d(0,-20px,0); transform: translate3d(0,-20px,0) } to { opacity: 1; -webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0) } } /*------------------------------------- UI/UX - 表示/非表示や日付計算などの挙動は変更しない -------------------------------------*/ /* フォーカス可視化 */ .search-area .accordion-content:focus-visible, .search-area .ButtonArea__item a:focus-visible, .Pagination-Item a:focus-visible, .Button:focus-visible { outline: 3px solid #90caf9; outline-offset: 2px; border-radius: 6px; } /* アコーディオンの操作感 */ .search-area .accordion-content { -webkit-tap-highlight-color: transparent; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .search-area .accordion-content:hover { background: #f7fbff; border-color: #90caf9; box-shadow: 0 1px 2px rgba(0,0,0,.06); } /* ボタンの手触り */ .search-area .ButtonArea__item.clear:hover { border-color: #90caf9; background: #f3f9ff; } .search-area .ButtonArea__item.prime:hover { box-shadow: 0 4px 14px rgba(0,116,190,.22); } .search-area .ButtonArea__item.prime:active { transform: translateY(0); } /* ページネーションの手がかり */ .Pagination-Item a { transition: background .12s ease, border-color .12s ease, color .12s ease; } .Pagination-Item a:hover { background: #e3f2fd; border: 1px solid #90caf9; border-radius: 5px; } .Pagination-Item .current a { background: #0074be; color: #fff; border: 1px solid #0074be; border-radius: 5px; } /* カード：軽いホバー */ .TicketList__Item { transition: transform .16s ease, box-shadow .16s ease; } .TicketList__Item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); } /* サムネ背景のちらつき抑制 */ .TicketList__Item__thumb {background: #f4f4f4;} /* 文言のコントラスト */ .search-area .conditions { color: #333; } .search-area .number { color: #111; } /* カーソル/選択 */ .search-area .accordion-content, .search-area .ButtonArea__item a, .Pagination-Item a { cursor: pointer; user-select: none; } /* モーション */ @media (prefers-reduced-motion: reduce) { .TicketList__Item, .search-area .accordion-content, .Pagination-Item a { transition: none !important; } } /*------------------------------------- flatpickr -------------------------------------*/ /* 競合するSVG矢印を無効 */ .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { display: none !important; } /* 前月/次月ボタン：青丸＋白矢印、 */ .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { position: absolute !important; top: 0 !important; width: 28px !important; height: 28px !important; margin: 8px 0 0 0 !important; padding: 0 !important; border-radius: 50% !important; background: #0074be !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; line-height: 0 !important; box-shadow: 0 1px 2px rgba(0,0,0,.08) !important; cursor: pointer !important; } .flatpickr-months .flatpickr-prev-month { left: 12px !important; } .flatpickr-months .flatpickr-next-month { right: 12px !important; } .flatpickr-months .flatpickr-prev-month::after, .flatpickr-months .flatpickr-next-month::after { content: "" !important; width: 8px !important; height: 8px !important; border-top: 2px solid currentColor !important; border-right: 2px solid currentColor !important; display: block !important; } .flatpickr-months .flatpickr-prev-month::after { transform: rotate(-135deg) !important; } .flatpickr-months .flatpickr-next-month::after {transform: rotate(45deg) !important;} .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { filter: brightness(0.95) !important; transform: translateY(-1px); } .flatpickr-months .flatpickr-prev-month:active, .flatpickr-months .flatpickr-next-month:active { transform: translateY(0); } /* 見出し（年月）を中央・太字 */ .flatpickr-current-month { display: flex !important; align-items: center !important; justify-content: center !important; gap: .4rem !important; font-weight: 700 !important; } .flatpickr-current-month .cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { font-weight: 700 !important; font-size: 1rem !important; } .flatpickr-months {background: #eee !important;height: 46px !important;align-items: center !important;} /* 日付セルの基準 */ .flatpickr-day { border-radius: 8px !important; margin: 4px 0 !important; background: #eee !important; border-color: #eee !important; color: #393939 !important; transition: background .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease !important; } /* 当月：白地→ホバー薄青 */ .flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.flatpickr-disabled) {background: #1675c3 !important;border-color: #e5e7eb !important;color: #ffffff !important;} .flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.flatpickr-disabled):hover, .flatpickr-day:not(.prevMonthDay):not(.nextMonthDay):not(.flatpickr-disabled):focus { background: #e7f2ff !important; border-color: #90caf9 !important; color: #0b3d66 !important; } /* 前月/次月：淡色 */ .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { background: #f7f7f7 !important; border-color: #f0f0f0 !important; color: #9aa0a6 !important; font-weight: 400 !important; } /* 選択不可 */ .flatpickr-day.flatpickr-disabled { background: #F8FAFC !important; border-color: #F1F5F9 !important; color: #CBD5E1 !important; cursor: not-allowed !important; } /* 今日：濃青リング */ .flatpickr-day.today { box-shadow: 0 0 0 2px #0074be inset !important; color: #0b3d66 !important; background: #fff !important; border-color: #e5e7eb !important; } .flatpickr-day.today:hover { background: #e7f2ff !important; } /* 選択/範囲端＆範囲内 */ .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: #0E5BAA !important; border-color: #0E5BAA !important; color: #fff !important; box-shadow: none !important; } .flatpickr-day.inRange { background: #C6E9FF !important; border-color: #C6E9FF !important; color: #0b3d66 !important; box-shadow: -5px 0 0 #C6E9FF, 5px 0 0 #C6E9FF !important; } .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange, .flatpickr-day.endRange.startRange { border-radius: 8px 0 0 8px !important; } .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange, .flatpickr-day.endRange.endRange { border-radius: 0 8px 8px 0 !important; } /* クリアボタン */ .flatpickr-clear { width: calc(100% - 16px) !important; margin: 8px auto 12px !important; background: #f7f7f7 !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; font-weight: 700 !important; color: #0074be !important; cursor: pointer !important; transition: background .15s ease, border-color .15s ease !important; } .flatpickr-clear:hover { background: #e3f2fd !important; border-color: #90caf9 !important; } /* キーボード操作のフォーカス */ .flatpickr-calendar :where(button, [role="button"], .flatpickr-day, .flatpickr-clear):focus-visible { outline: 3px solid #90caf9 !important; outline-offset: 2px !important; border-radius: 8px !important; } /* reduce-motion */ @media (prefers-reduced-motion: reduce) { .flatpickr-calendar.animate.open { animation: none !important; } }