/*
 * lp-base.css
 * LP量産テンプレートの共通スタイル（構造・ロジックのみ）
 * デザイン（色・フォント・カード・ボタン）は各LP の <style> で定義する
 */

html {
  scroll-behavior: smooth;
}

/* =====================
   ヒーロー補助アニメーション
   ===================== */
@keyframes hero-label-bounce {
  0%, 100% { transform: translateY(0); }
  10% { transform: translateY(-6px); }
  18% { transform: translateY(0); }
  24% { transform: translateY(-3px); }
  30% { transform: translateY(0); }
}

.hero-label-bounce {
  animation: hero-label-bounce 4.2s ease-in-out infinite;
  transform-origin: center bottom;
}

/* =====================
   ヒーロー時給カード
   ===================== */
.hero-pay-card {
  background: #fff;
  border: 2px solid var(--color-purple, #E0C3FC);
  box-shadow: 3px 3px 0 var(--color-pink, #FFD1DC);
}

/* =====================
   時給表示
   ===================== */
.pay-rate-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.375rem;
  white-space: nowrap;
  font-family: "Arial Black", "Arial", "Helvetica Neue", sans-serif;
  font-weight: 800;
}

.pay-rate-label {
  flex-shrink: 0;
  font-size: 1.125rem;
}

.pay-rate-value {
  font-size: 3rem;
  line-height: 1;
}

.pay-rate-unit {
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1;
}

/* =====================
   募集要項ピル
   ===================== */
.recruit-item-label {
  font-size: inherit;
  line-height: 1.2;
  font-weight: 700;
  color: #4b5563;
}

.recruit-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.recruit-pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding: 0.22rem 0.58rem;
  border-radius: 9999px;
  border: 1px solid var(--color-purple, #E0C3FC);
  font-size: 0.75rem;
  line-height: 1.1;
  font-weight: 700;
  color: var(--color-purple-dark, #C084FC);
  background: rgba(255, 255, 255, 0.86);
}

.recruit-pill--soft {
  background: color-mix(in srgb, var(--color-purple, #E0C3FC) 22%, #ffffff);
}

.recruit-pill--accent {
  background: color-mix(in srgb, var(--color-pink, #FFD1DC) 40%, #ffffff);
}

.recruit-pair-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
}

.recruit-pair-item {
  flex: 1 1 8.6rem;
  min-width: 0;
}

@media (min-width: 640px) {
  .pay-rate-row {
    gap: 0.5rem;
  }

  .pay-rate-label {
    font-size: 1.25rem;
  }

  .pay-rate-unit {
    font-size: 0.875rem;
  }
}

@media (min-width: 768px) {
  .pay-rate-value {
    font-size: 3.75rem;
  }
}

/* =====================
   FAQアコーディオン
   ===================== */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .icon-rotate { transform: rotate(45deg); }
.icon-rotate { transition: transform 0.3s ease; }

/* FAQアコーディオン スライド展開 */
details > .faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
  overflow: hidden;
}
details[open] > .faq-body {
  grid-template-rows: 1fr;
}
details > .faq-body > * {
  overflow: hidden;
}

/* =====================
   フローティングCTA 表示制御
   ===================== */
#floating-cta {
  transform: translateY(150%);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#floating-cta.visible { transform: translateY(0); }

.floating-cta-fade {
  pointer-events: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  height: 7rem;
  background: linear-gradient(to top, var(--bg-base, white), transparent);
  z-index: 49;
}

/* =====================
   背景浮遊アニメーション（構造・位置・タイミングのみ）
   color は各LP の <style> 内で .float-shape:nth-child() に指定する
   ===================== */
.floating-items {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.float-shape {
  position: absolute;
  animation: floatUp 15s infinite linear;
  opacity: 0;
}
.float-shape:nth-child(1) { left: 15%; width: 25px; animation-duration: 14s; }
.float-shape:nth-child(2) { left: 35%; width: 35px; animation-duration: 18s; animation-delay: 2s; }
.float-shape:nth-child(3) { left: 55%; width: 20px; animation-duration: 12s; animation-delay: 5s; }
.float-shape:nth-child(4) { left: 80%; width: 30px; animation-duration: 16s; animation-delay: 1s; }
@keyframes floatUp {
  0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
  20%  { opacity: 0.3; }
  80%  { opacity: 0.3; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* =====================
   タイポグラフィ
   ===================== */
h1, h2, h3, .font-pop {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
}

.font-impact {
  font-family: "Dela Gothic One", cursive;
}

/* =====================
   カード
   ===================== */
.flat-card {
  background: var(--card-bg, white);
  border: 2px solid var(--color-purple);
  border-radius: 20px;
  box-shadow: 4px 4px 0px var(--color-pink);
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
}

/* =====================
   ボタン
   ===================== */
.btn-flat {
  background: var(--lp-color-main, #a855f7);
  color: #fff;
  border: 2px solid var(--lp-color-sub, #9333ea);
  box-shadow: 3px 3px 0px var(--lp-color-sub, #9333ea);
  border-radius: 12px;
  font-weight: 800;
  transition: all 0.2s;
  text-shadow: 1px 1px 0px rgba(0,0,0,0.15);
}
.btn-flat:hover {
  background: var(--lp-color-sub, #9333ea);
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px var(--lp-color-sub, #9333ea);
}
.btn-flat:active {
  transform: translate(3px, 3px);
  box-shadow: 0px 0px 0px transparent;
}

.btn-outline {
  background: var(--card-bg, white);
  color: var(--lp-color-main, #a855f7);
  border: 2px solid var(--color-purple, #E0C3FC);
  border-radius: 12px;
  font-weight: 800;
  transition: all 0.2s;
  box-shadow: 3px 3px 0px var(--color-pink, #FFD1DC);
}
.btn-outline:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px var(--color-pink, #FFD1DC);
}

/* =====================
   マーカーハイライト
   ===================== */
.marker-main { background: linear-gradient(transparent 60%, var(--color-purple) 60%); }
.marker-sub  { background: linear-gradient(transparent 60%, var(--color-pink)   60%); }

/* =====================
   ギャラリーカルーセル
   ===================== */
.gallery-carousel__track {
  display: flex;
  transition: transform 0.3s ease;
  will-change: transform;
}
.gallery-carousel__slide {
  flex: 0 0 100%;
  width: 100%;
}
.gallery-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-purple-dark);
  opacity: 0.3;
  transition: opacity 0.2s, transform 0.2s;
  border: none;
  cursor: pointer;
  padding: 0;
}
.gallery-dot.is-active {
  opacity: 1;
  transform: scale(1.3);
}

/* =====================
   バロメーター
   ===================== */
.barometer-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.barometer-track-fill {
  position: absolute;
  left: 0; top: 0; height: 100%;
  width: calc(var(--val, 2) / 4 * 100%);
  background: var(--lp-color-sub, #9333ea);
  border-radius: 3px;
}
.barometer-nodes {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
.barometer-node {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  z-index: 1;
}
.barometer-indicator {
  position: absolute;
  top: 50%;
  left: calc(var(--val, 2) / 4 * 100%);
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: var(--lp-color-main, #a855f7);
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

/* =====================
   ユーティリティ
   ===================== */
.aspect-square-img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* =====================
   LINEトーク風コメントセクション
   ===================== */
.line-chat-screen .line-chat-message {
  --chat-delay: 0s;
  opacity: 0;
  transform: translateY(14px);
}
.line-chat-screen.is-visible .line-chat-message {
  animation: line-chat-row-in 0.42s cubic-bezier(.2,.8,.25,1) forwards;
  animation-delay: var(--chat-delay);
}
.line-chat-screen .line-chat-avatar {
  opacity: 0;
  transform: scale(.72);
}
.line-chat-screen.is-visible .line-chat-avatar {
  animation: line-chat-avatar-in 0.34s cubic-bezier(.18,.9,.2,1.25) forwards;
  animation-delay: calc(var(--chat-delay) + 0.06s);
}
.line-chat-screen .line-chat-name {
  opacity: 0;
}
.line-chat-screen.is-visible .line-chat-name {
  animation: line-chat-fade-in 0.22s ease forwards;
  animation-delay: calc(var(--chat-delay) + 0.18s);
}
/* タイピングインジケーター（…バブル） */
.line-chat-screen .line-chat-typing-indicator {
  display: flex;
  width: fit-content;   /* コンテンツ幅のみに収める */
  gap: 0.5rem;
  align-items: center;
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}
.line-chat-screen.is-visible .line-chat-typing-indicator {
  animation: typing-indicator-lifecycle 1.6s ease forwards;
  animation-delay: calc(var(--chat-delay) + 0.22s);
}
@keyframes typing-indicator-lifecycle {
  0%   { opacity: 0; max-height: 0;    padding-top: 0;       padding-bottom: 0;       margin-bottom: 0;    }
  10%  { opacity: 1; max-height: 52px; padding-top: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 6px;  }
  70%  { opacity: 1; max-height: 52px; padding-top: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 6px;  }
  88%  { opacity: 0; max-height: 52px; padding-top: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 6px;  }
  100% { opacity: 0; max-height: 0;    padding-top: 0;       padding-bottom: 0;       margin-bottom: 0;    }
}
.line-chat-typing-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #b0b0b0;
  animation: typing-dot-bounce 0.85s ease-in-out infinite;
}
.line-chat-typing-dot:nth-child(2) { animation-delay: 0.16s; }
.line-chat-typing-dot:nth-child(3) { animation-delay: 0.32s; }
@keyframes typing-dot-bounce {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.45; }
  30%           { transform: translateY(-6px); opacity: 1;    }
}

/* 本文バブル（タイピング後に表示） */
.line-chat-screen .line-chat-bubble {
  opacity: 0;
  transform: translateX(-8px) scale(.96);
  transform-origin: 0 12px;
}
.line-chat-screen.is-visible .line-chat-bubble {
  animation: line-chat-bubble-in 0.38s cubic-bezier(.22,.9,.2,1.12) forwards;
  animation-delay: calc(var(--chat-delay) + 1.5s);
}
@keyframes line-chat-row-in {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes line-chat-avatar-in {
  to { opacity: 1; transform: scale(1); }
}
@keyframes line-chat-fade-in {
  to { opacity: 1; }
}
@keyframes line-chat-bubble-in {
  72% { transform: translateX(1px) scale(1.01); }
  to  { opacity: 1; transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .line-chat-screen .line-chat-message,
  .line-chat-screen .line-chat-avatar,
  .line-chat-screen .line-chat-name,
  .line-chat-screen .line-chat-typing-indicator,
  .line-chat-screen .line-chat-bubble {
    opacity: 1;
    max-height: none;
    margin-bottom: revert;
    transform: none;
    animation: none;
  }
}