/*
 * Bouqlet AI 標準UIコンポーネント (cc-ui)
 * 接頭辞 cc-ui- / data-cc-* 駆動。挙動は cc-ui.js が付与。
 * 重要: 初期非表示は html.cc-ui-js 配下のみに限定する。
 *   → JS無効・クローラ・印刷・JS読込前は「コンテンツが必ず見える」状態を保証する。
 */

/* ===== カルーセル ===== */
[data-cc-carousel] { position: relative; }
.cc-ui-carousel-track { position: relative; }
html.cc-ui-js [data-cc-carousel] [data-cc-slide] { display: none; }
html.cc-ui-js [data-cc-carousel] [data-cc-slide].cc-ui-active { display: block; }
.cc-ui-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.cc-ui-carousel-arrow:hover { background: rgba(0,0,0,.7); }
.cc-ui-carousel-arrow[data-cc-dir="prev"] { left: 10px; }
.cc-ui-carousel-arrow[data-cc-dir="next"] { right: 10px; }
.cc-ui-carousel-dots {
  display: flex; gap: 8px; justify-content: center; margin-top: 12px;
}
.cc-ui-carousel-dot {
  width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0;
  background: rgba(0,0,0,.25); cursor: pointer; transition: background .2s;
}
.cc-ui-carousel-dot.cc-ui-active { background: rgba(0,0,0,.7); }

/* ===== スライダー (Swiper) ===== */
/* Swiper本体CSSは swiper-bundle.min.css。ここはテーマ調整のみ。 */
.cc-ui-slider { --swiper-theme-color: #1f2937; position: relative; overflow: hidden; }
.cc-ui-slider .swiper-button-prev,
.cc-ui-slider .swiper-button-next {
  width: 44px; height: 44px; margin-top: -22px;
  background: rgba(0,0,0,.42); color: #fff; border-radius: 50%;
  transition: background .2s;
}
.cc-ui-slider .swiper-button-prev:hover,
.cc-ui-slider .swiper-button-next:hover { background: rgba(0,0,0,.7); }
.cc-ui-slider .swiper-button-prev::after,
.cc-ui-slider .swiper-button-next::after { font-size: 18px; font-weight: 700; }
.cc-ui-slider .swiper-pagination-bullet { background: rgba(0,0,0,.3); opacity: 1; }
.cc-ui-slider .swiper-pagination-bullet-active { background: rgba(0,0,0,.75); }
.cc-ui-slider .swiper-scrollbar {
  --swiper-scrollbar-bg-color: rgba(0,0,0,.08);
  --swiper-scrollbar-drag-bg-color: var(--swiper-theme-color, #1f2937);
  height: 4px; border-radius: 4px;
}
.cc-ui-slider.swiper-horizontal > .swiper-scrollbar {
  left: 5%; width: 90%; bottom: 6px;
}
/* Swiper初期化前(クラス未付与)は data-cc-slide が縦積みで必ず可視 = JS無効でも内容が見える */

/* ===== タブ ===== */
.cc-ui-tab.cc-ui-active { font-weight: 700; }
html.cc-ui-js [data-cc-tabs] [data-cc-tabpanel] { display: none; }
html.cc-ui-js [data-cc-tabs] [data-cc-tabpanel].cc-ui-active { display: block; }

/* ===== アコーディオン ===== */
html.cc-ui-js [data-cc-accordion] [data-cc-accordion-body] {
  overflow: hidden; max-height: 0; transition: max-height .3s ease;
}
html.cc-ui-js [data-cc-accordion] [data-cc-accordion-item].cc-ui-open [data-cc-accordion-body] {
  max-height: 2000px;
}
[data-cc-accordion-head] { cursor: pointer; }

/* ===== モーダル ===== */
html.cc-ui-js [data-cc-modal] {
  display: none; position: fixed; inset: 0; z-index: 99998;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.6); padding: 20px;
}
html.cc-ui-js [data-cc-modal].cc-ui-open { display: flex; }
.cc-ui-modal-inner {
  background: #fff; max-width: 92vw; max-height: 88vh; overflow: auto;
  border-radius: 8px; padding: 24px; position: relative;
}
body.cc-ui-modal-lock { overflow: hidden; }

/* ===== スクロール連動 reveal (AOS相当) ===== */
html.cc-ui-js [data-cc-reveal] {
  opacity: 0; transform: translateY(24px);
  transition-property: opacity, transform;
  transition-duration: .6s; transition-timing-function: ease;
  will-change: opacity, transform;
}
/* 種類別の初期変位(.cc-ui-reveal-in で打ち消す) */
html.cc-ui-js [data-cc-reveal="fade"] { transform: none; }
html.cc-ui-js [data-cc-reveal="fade-up"] { transform: translateY(28px); }
html.cc-ui-js [data-cc-reveal="fade-down"] { transform: translateY(-28px); }
html.cc-ui-js [data-cc-reveal="fade-left"] { transform: translateX(28px); }
html.cc-ui-js [data-cc-reveal="fade-right"] { transform: translateX(-28px); }
html.cc-ui-js [data-cc-reveal="zoom-in"] { transform: scale(.9); }
html.cc-ui-js [data-cc-reveal="zoom-out"] { transform: scale(1.06); }
html.cc-ui-js [data-cc-reveal="flip-up"] { transform: perspective(800px) rotateX(28deg); transform-origin: bottom; }
html.cc-ui-js [data-cc-reveal].cc-ui-reveal-in {
  opacity: 1; transform: none;
}

/* ===== 追従ヘッダー ===== */
[data-cc-sticky-header] {
  position: sticky; top: 0; z-index: 1000;
  transition: box-shadow .25s ease, background-color .25s ease, padding .25s ease;
}
[data-cc-sticky-header].cc-ui-stuck {
  box-shadow: 0 2px 16px rgba(0,0,0,.12);
  -webkit-backdrop-filter: saturate(1.1) blur(2px); backdrop-filter: saturate(1.1) blur(2px);
}

/* ===== 固定CTAバー ===== */
.cc-ui-cta-bar {
  position: fixed; left: 0; right: 0; z-index: 9990;
  transition: transform .3s ease; will-change: transform;
}
.cc-ui-cta-bottom { bottom: 0; transform: translateY(120%); }
.cc-ui-cta-top { top: 0; transform: translateY(-120%); }
.cc-ui-cta-bar.cc-ui-cta-show { transform: translateY(0); }

/* ===== メガメニュー/ドロップダウン ===== */
[data-cc-menu] [data-cc-menu-trigger] { cursor: pointer; }
html.cc-ui-js [data-cc-menu] [data-cc-submenu] { display: none; }
html.cc-ui-js [data-cc-menu] [data-cc-submenu].cc-ui-menu-open { display: block; }

/* ===== ビフォーアフター比較 ===== */
.cc-ui-compare { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.cc-ui-compare img { display: block; width: 100%; height: auto; }
.cc-ui-compare .cc-ui-compare-over {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cc-ui-compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%; width: 3px;
  background: #fff; transform: translateX(-50%); cursor: ew-resize; z-index: 2;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18);
}
.cc-ui-compare-handle::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 38px; height: 38px; border-radius: 50%; background: #fff;
  transform: translate(-50%,-50%); box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.cc-ui-compare-handle:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* ===== スライドショー (data-cc-slideshow) ===== */
/* img モード: フェードは要素自身の opacity を遷移 */
.cc-ui-ss-img { transition: opacity var(--cc-ss-dur, .6s) ease; }
/* img モード: ズーム選択時のみ付与する最小ラッパ(はみ出しクリップ) */
.cc-ui-ss-imgwrap { position: relative; overflow: hidden; line-height: 0; }
/* 背景モード: 背面の画像レイヤー(グラデprefix温存・可読性オーバーレイの背面) */
.cc-ui-ss-bg {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.cc-ui-ss-layer {
  position: absolute; inset: 0; opacity: 0;
  background-repeat: no-repeat;
  transition: opacity var(--cc-ss-dur, .8s) ease;
  will-change: opacity, transform;
}
.cc-ui-ss-layer.cc-ui-ss-on { opacity: 1; }
/* ズーム(Ken Burns) */
@keyframes ccSsZoomIn { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes ccSsZoomOut { from { transform: scale(1.12); } to { transform: scale(1); } }
.cc-ui-ss-zoom-in.cc-ui-ss-on { animation: ccSsZoomIn var(--cc-ss-zoomdur, 6s) ease-out forwards; }
.cc-ui-ss-zoom-out.cc-ui-ss-on { animation: ccSsZoomOut var(--cc-ss-zoomdur, 6s) ease-out forwards; }
/* img ズームは要素自身に適用 */
img.cc-ui-ss-zoom-in { animation: ccSsZoomIn var(--cc-ss-dur, 6s) ease-out forwards; }
img.cc-ui-ss-zoom-out { animation: ccSsZoomOut var(--cc-ss-dur, 6s) ease-out forwards; }

/* ===== レスポンシブ表示制御(PC/SP) ===== */
@media (max-width: 767px) { [data-cc-hide="sp"] { display: none !important; } }
@media (min-width: 768px) { [data-cc-hide="pc"] { display: none !important; } }

/* ===== モバイルナビ開閉 ===== */
[data-cc-nav-toggle] { cursor: pointer; }

/* ===== 動きを減らす設定の尊重 ===== */
@media (prefers-reduced-motion: reduce) {
  html.cc-ui-js [data-cc-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cc-ui-carousel-arrow, .cc-ui-carousel-dot, .cc-ui-cta-bar,
  [data-cc-sticky-header],
  html.cc-ui-js [data-cc-accordion] [data-cc-accordion-body] { transition: none !important; }
  .cc-ui-ss-img, .cc-ui-ss-layer { transition: none !important; }
  .cc-ui-ss-zoom-in, .cc-ui-ss-zoom-out,
  img.cc-ui-ss-zoom-in, img.cc-ui-ss-zoom-out { animation: none !important; transform: none !important; }
}