/*
Theme Name: 結い言 LP Theme
Version: 3.10.0
*/

/* ===== カスタムプロパティ ===== */
:root {
  --yuigon-gold: #C0A062;
  --yuigon-navy: #2c3e50;
  --bg: #FDFBF8;
}

/* ===== ベーススタイル ===== */
body {
  background: var(--bg);
  font-family: 'Noto Sans JP', sans-serif; /* M-4: header.php のインラインスタイルから統合 */
}

h1, h2, h3, h4, h5, h6,
.font-serif {
  font-family: 'Noto Serif JP', serif; /* M-4: header.php のインラインスタイルから統合 */
}

/* ===== ユーティリティクラス ===== */
.navy-text { color: var(--yuigon-navy); }
.gold-text { color: var(--yuigon-gold); }
.bg-gold { background-color: var(--yuigon-gold); }
.navy-bg { background-color: var(--yuigon-navy); }

/* 幅の上限（Tailwind未使用環境向けフォールバック） */
.container.max-w-6xl { max-width: 72rem; }

/* ===== CTAボタン ===== */
.cta-button {
  transition: all .3s ease;
}
.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,.1);
}

/* ===== フォーム共通スタイル（M-6: 重複統合） ===== */
.yuigon-form,
.partner-form {
  max-width: 720px;
  margin: 0 auto;
}

.yuigon-form label,
.partner-form label {
  display: block;
  font-weight: 600;
  color: var(--yuigon-navy);
  margin-bottom: .4rem;
}

.yuigon-form input,
.yuigon-form textarea,
.yuigon-form select,
.partner-form input,
.partner-form textarea,
.partner-form select {
  width: 100%;
  border: 1px solid #E5E7EB;
  border-radius: .75rem;
  padding: .75rem 1rem;
  background: #fff;
  color: var(--yuigon-navy);
  margin-bottom: 1rem;
}

.yuigon-form input:focus,
.yuigon-form textarea:focus,
.yuigon-form select:focus,
.partner-form input:focus,
.partner-form textarea:focus,
.partner-form select:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(192,160,98,.25);
  border-color: var(--yuigon-gold);
}

.yuigon-form input[type=radio],
.yuigon-form input[type=checkbox],
.partner-form input[type=radio],
.partner-form input[type=checkbox] {
  width: auto;
  margin-right: .4em;
}

/* ===== CF7 レスポンス出力 ===== */
.wpcf7 form .wpcf7-response-output {
  margin-top: 1rem;
  border-color: var(--yuigon-gold);
}

.wpcf7-not-valid-tip {
  color: #b91c1c;
  font-size: .85rem;
  margin-top: .25rem;
}

/* ===== 送信ボタン（M-7: !important を詳細度で代替） ===== */
.yuigon-form .yuigon-submit,
.partner-form .partner-submit,
.partner-form .yuigon-submit {
  display: inline-block;
  background: var(--yuigon-gold);
  color: #fff;
  padding: .9rem 2.5rem;
  border-radius: 9999px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
}

.yuigon-form .yuigon-submit:hover,
.partner-form .partner-submit:hover,
.partner-form .yuigon-submit:hover {
  opacity: .92;
}

/* CF7が独自スタイルを上書きする場合の対策 - 詳細度を上げて対応 */
.wpcf7 form.yuigon-form input[type=submit].yuigon-submit,
.wpcf7 form.partner-form input[type=submit].partner-submit,
.wpcf7 form input[type=submit].yuigon-submit {
  background: var(--yuigon-gold);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: .9rem 2.5rem;
  font-weight: 700;
  line-height: 1;
  display: inline-block;
  cursor: pointer;
  box-shadow: none;
}

.wpcf7 form input[type=submit].yuigon-submit:hover {
  opacity: .92;
}

/* ===== FAQ アコーディオン ===== */
.faq-item {
  position: relative;
  border-radius: .75rem;
}

.faq-item + .faq-item {
  margin-top: 1rem;
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.4;
}

.faq-question .chev {
  transition: transform .3s ease;
  will-change: transform;
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.faq-answer > * {
  padding: 0.75rem 1rem;
}

/* ===== 提携フォーム専用のライトテーマ ===== */
.partner-form {
  color: var(--yuigon-navy);
}

.partner-form input::placeholder,
.partner-form textarea::placeholder {
  color: #9CA3AF;
}

/* ===== LINE案内カード ===== */
.line-contact-box {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.line-contact-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.line-contact-box .line-icon {
  width: 80px;
  flex-shrink: 0;
}

.line-contact-box .line-text h3 {
  color: var(--yuigon-navy);
  font-size: 1.25rem;
  margin: 0 0 .5rem 0;
}

.line-contact-box .line-text p {
  margin: 0 0 1rem 0;
  color: #374151;
  font-size: .95rem;
}

.line-contact-box .line-button {
  display: inline-block;
  background: #06C755;
  color: #fff;
  font-weight: bold;
  padding: .6rem 1.2rem;
  border-radius: 9999px;
  text-decoration: none;
  transition: opacity .3s ease;
}

.line-contact-box .line-button:hover {
  opacity: .9;
}

/* ===== LINE CTAカード ===== */
.card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.line-cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  margin-bottom: 28px;
}

.line-cta__icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #06C755;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
}

.line-cta__title {
  margin: 0 0 4px 0;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--yuigon-navy);
  font-weight: 700;
}

.line-cta__desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  color: #4b5563;
}

.line-cta__btn {
  display: inline-block;
  white-space: nowrap;
  padding: .6rem 1.1rem;
  border-radius: 9999px;
  background: #06C755;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s ease, opacity .2s ease;
}

.line-cta__btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}

/* ===== ヒーローセクション 背景画像対応（v1.5） ===== */
.hero-section {
  position: relative;
  background-size: cover;
  background-position: center;
  background-image: url('./assets/img/hero-bg.jpg');
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(253, 251, 248, 0.85);
  z-index: 1;
}

/* 背景画像がない場合のフォールバック（画像読み込み失敗時は元のソリッドカラーが見える） */
.hero-section {
  background-color: #FDFBF8;
}

/* ===== スティッキーCTA モバイル固定ボトムバー（v1.5） ===== */
#sticky-cta {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

#sticky-cta a {
  transition: opacity 0.2s ease;
}

#sticky-cta a:active {
  opacity: 0.85;
}

/* スティッキーCTA分のフッター余白（モバイルのみ） */
@media (max-width: 767px) {
  footer {
    padding-bottom: 3.5rem;
  }
}

/* ===== fade-in アニメーション（C-1） ===== */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== レスポンシブ ===== */
@media (max-width: 640px) {
  .line-contact-inner {
    flex-direction: column;
    text-align: center;
  }
  .line-contact-box .line-icon {
    width: 64px;
  }
  .line-cta {
    grid-template-columns: 1fr;
    text-align: left;
    gap: 12px;
  }
  .line-cta__btn {
    width: fit-content;
  }
}