/*
Theme Name: あかばね就労サポート
Description: あかばね就労サポート LP WordPress Theme
Version: 1.0.0
Text Domain: akabane-support
*/

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font-family: 'M PLUS Rounded 1c', sans-serif; color: #5a5550; background: #ffffff; line-height: 1.75; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ヒーロー スライドショー（3枚クロスフェード） */
.hero-slideshow { position: relative; width: min(100%, 780px); aspect-ratio: 3 / 2; }
.hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; animation: heroFade 18s ease-in-out infinite; }
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  33%  { opacity: 1; }
  41%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none; }
  .hero-slide:nth-child(1) { opacity: 1; }
}

@keyframes akFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes akFloat2 { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(10px) rotate(6deg); } }
@keyframes akPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ハンバーガー */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: #6b665f;
  border-radius: 2px;
  transition: all 0.3s;
}

/* モバイルナビ */
.mobile-nav {
  display: none;
  flex-direction: column;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  z-index: 49;
  padding: 12px 16px 20px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #5a5550;
  border-bottom: 1px solid #f0ede8;
}
.mobile-nav a.cta-mobile {
  margin-top: 12px;
  text-align: center;
  background: #F2917F;
  color: #fff;
  border-radius: 40px;
  border: none;
  padding: 14px 20px;
}

@media (max-width: 768px) {
  .hamburger { display: flex; }
  .desktop-nav { display: none !important; }
  .hero-photo { min-width: unset !important; width: 100% !important; }
}

.sp-br { display: none; }
.work-title-ai { white-space: nowrap; }
@media (max-width: 640px) {
  .sp-br { display: inline; }
  .work-title-ai { font-size: 13px !important; padding: 12px 10px !important; }
  /* セクション余白を縮小 */
  #top  { padding: 36px 0 44px !important; }
  #target, #works, #features, #flow, #access { padding: 48px 0 !important; }

  /* ヒーロー：テキスト→画像の順に縦並び */
  #top > div > div[style*="flex:1 1 320px"] {
    flex: 1 1 100% !important;
    min-width: unset !important;
  }
  .hero-slideshow {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 4 / 3 !important;
  }

  /* ヒーローのはみ出し装飾を制限 */
  #top > div[style*="position:absolute"] { display: none !important; }

  /* スカラップ区切りをモバイルで低く */
  [aria-hidden="true"] svg { height: 36px !important; }
  [aria-hidden="true"] { height: 36px !important; }

  /* こんな方へ：バッジを横並び維持しつつ縮小 */
  #target div[style*="width:96px"] {
    width: 80px !important;
    height: 80px !important;
    font-size: 13px !important;
  }

  /* できること・特徴：1列にする */
  #works div[style*="grid-template-columns"],
  #features div[style*="grid-template-columns"]:last-child {
    grid-template-columns: 1fr 1fr !important;
  }

  /* ご利用の流れ：2列 */
  #flow div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 14px !important;
  }

  /* アクセス：1列 */
  #access div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* CTAボタンを横幅いっぱいに */
  #top a[href^="mailto"] {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  /* 利用時間バナー縦並び */
  #features > div > div:first-of-type {
    flex-direction: column !important;
    gap: 14px !important;
  }
}