/*
Theme Name: Your Theme
Theme URI:
Author: AONIYOSHI DESIGN
Description: 自社営業用LP カスタムテーマ
Version: 1.0
*/

:root {
  --color-accent: #2D6A4F;
  --color-border: #E8ECF0;
  --color-muted: #6B7A8D;
  --color-dark: #1A2332;
  --color-white: #FFFFFF;
  --radius-form: 14px;
  --shadow-form: 0 18px 50px rgba(26, 35, 50, 0.12);
}

html {
  scroll-behavior: smooth;
}

/* ヒーローのロゴカード：ヒーロー内のみスクロールに追従（sticky） */
.hero-logo-card {
  position: sticky;
  top: 4rem;
}

/* ハンバーガーメニュー：開いている間はバツ印に変形 */
#menu-btn span {
  transition: transform 0.25s ease, opacity 0.2s ease;
}

#menu-btn.is-open span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

#menu-btn.is-open span:nth-child(2) {
  opacity: 0;
}

#menu-btn.is-open span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* タップ時リップル演出（タッチデバイス限定・JS側で発火を制御） */
.ripple-overlay {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 9998;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-expand 0.55s ease-out;
  pointer-events: none;
}

.ripple-effect--dark {
  background: rgba(45, 106, 79, 0.28);
}

.ripple-effect--light {
  background: rgba(255, 255, 255, 0.35);
}

@keyframes ripple-expand {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ripple-effect {
    animation: none;
    display: none;
  }
}

/* APPROACHセクション：カード背景パララックス */
.reason-deco {
  position: absolute;
  border-radius: 50%;
  background: var(--color-accent);
  pointer-events: none;
  transition: transform 0.12s ease-out;
}
.reason-deco--1 { width: 180px; height: 180px; top: 20px; left: -60px; opacity: 0.08; }
.reason-deco--2 { width: 130px; height: 130px; bottom: 40px; right: -40px; opacity: 0.07; }
.reason-deco--3 { width: 70px; height: 70px; top: 160px; right: 40px; opacity: 0.12; }

.reason-card {
  position: relative;
}

.reason-card__bg {
  position: absolute;
  inset: 0;
  background: var(--color-white);
  border: 2px solid var(--color-accent);
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgba(45, 106, 79, 0.1);
  transition: transform 0.12s ease-out;
  will-change: transform;
}

.reason-card__text {
  position: relative;
  z-index: 2;
  padding: 1.5rem;
}

@media (max-width: 768px) {
  .reason-deco {
    opacity: 0.06;
  }
}

/* 料金セクション：カードホバー拡大 */
.main-plan-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  transform-origin: center;
  cursor: pointer;
}

.main-plan-card:hover {
  transform: scale(1.035);
  box-shadow: 0 16px 40px rgba(26, 35, 50, 0.18);
}

.plan-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  transform-origin: center;
  cursor: pointer;
}

.plan-card:hover {
  transform: scale(1.09);
  box-shadow: 0 14px 32px rgba(26, 35, 50, 0.22);
  position: relative;
  z-index: 2;
}

@media (hover: none) {
  .main-plan-card:hover,
  .plan-card:hover {
    transform: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-plan-card,
  .plan-card {
    transition: none;
  }
}

/* 料金カード：クリックで反転（表面はふつうに高さが決まり、裏面はその高さに重なる） */
.flip-scene {
  perspective: 1200px;
  height: 100%;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
  cursor: pointer;
}

.flip-card.is-flipped {
  transform: rotateY(180deg);
}

.flip-card:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.flip-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.flip-face--front {
  position: relative;
  height: 100%;
}

.flip-face--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .flip-card {
    transition: none;
  }
}

/* FLOWセクション：スクロール固定＋カード流し込み */
.flow-pin-spacer {
  position: relative;
  height: 300vh;
}

.flow-section {
  position: sticky;
  top: 4rem;
  height: calc(100vh - 4rem);
  height: calc(100svh - 4rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.flow-row {
  position: relative;
}

.flow-card {
  opacity: 0;
  transform: translateX(60%);
  will-change: transform, opacity;
}

.flow-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.7rem;
  clip-path: polygon(50.00% 0.00%, 61.13% 8.47%, 75.00% 6.70%, 80.41% 19.59%, 93.30% 25.00%, 91.53% 38.87%, 100.00% 50.00%, 91.53% 61.13%, 93.30% 75.00%, 80.41% 80.41%, 75.00% 93.30%, 61.13% 91.53%, 50.00% 100.00%, 38.87% 91.53%, 25.00% 93.30%, 19.59% 80.41%, 6.70% 75.00%, 8.47% 61.13%, 0.00% 50.00%, 8.47% 38.87%, 6.70% 25.00%, 19.59% 19.59%, 25.00% 6.70%, 38.87% 8.47%);
}

.flow-card-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  margin: 0 -1rem;
  padding: 0 0.25rem;
}

.flow-card-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.flow-progress-dots {
  display: flex;
  gap: 8px;
  margin-top: 32px;
  justify-content: center;
}

.flow-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s ease;
}

.flow-dot.is-active {
  background: var(--color-accent);
}

@media (max-width: 768px) {
  /* スマホでは固定演出そのものを行わず、通常の縦並び表示にフォールバック
     （5枚のカードを1画面の固定高さに収めるのは構造上無理があるため） */
  .flow-pin-spacer {
    height: auto;
  }
  .flow-section {
    position: static;
    height: auto;
    display: block;
    padding: 4rem 0;
    overflow: visible;
  }
  .flow-row {
    gap: 12px;
  }
  .flow-card {
    opacity: 1;
    transform: none;
  }
  .flow-progress-dots {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .flow-pin-spacer {
    height: auto;
  }
  .flow-section {
    position: static;
    height: auto;
    display: block;
    padding: 5rem 0;
  }
  .flow-card {
    opacity: 1;
    transform: none;
  }
  .flow-dot {
    background: var(--color-accent);
  }
}

.hero-title {
  font-size: clamp(1.5rem, 8vw, 5.25rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.25;
  font-feature-settings: "palt";
}

@media (min-width: 1024px) {
  /* lg以上はロゴカード分テキスト幅が固定で狭くなる（628px程度）ため、
     ビューポート基準のvwではなくその幅に収まる上限に切り替える */
  .hero-title {
    font-size: min(8vw, 3rem);
  }
}

.eyebrow-title {
  display: block;
  font-size: clamp(0.55rem, 3vw, 1.4rem);
  white-space: nowrap;
  font-feature-settings: "palt";
}

.hero-title__line {
  display: block;
  white-space: nowrap;
}

/* Contact Form 7 上書きスタイル */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-form);
  padding: 14px 16px;
  margin-bottom: 12px;
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  color: var(--color-dark);
  background: var(--color-white);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(45, 106, 79, 0.12);
}

.wpcf7 label {
  display: block;
  color: var(--color-dark);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.wpcf7 input[type="submit"] {
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  font-family: 'Noto Sans JP', sans-serif;
  box-shadow: var(--shadow-form);
  transition: opacity 0.2s, transform 0.2s;
}

.wpcf7 input[type="submit"]:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.wpcf7-response-output {
  margin-top: 12px;
  font-size: 0.875rem;
}

.wpcf7-not-valid-tip {
  color: #B42318;
  font-size: 0.8rem;
  margin-top: -6px;
  margin-bottom: 10px;
}