@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;800;900&display=swap');

:root {
  --navy: #0f3e83;
  --gold: #f5c400;
  --white: #ffffff;
  --gray-dark: #333333;
  --gray-light: #f8f9fa;
  --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Base Styles */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body { font-family: 'Noto Sans JP', sans-serif; color: var(--gray-dark); background-color: var(--white); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }


/* HERO SECTION (Video Optimization) */
#hero {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* 動画がレスポンシブに全画面表示され、見切れないように */
  max-height: 100vh;
  overflow: hidden;
  background-color: #000;
}

#hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-cta-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 2;
}

#unmute-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 12px 25px;
  border-radius: 50px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}
#unmute-btn:hover { background: rgba(0, 0, 0, 0.8); transform: scale(1.05); }

/* SECTION COMMON */
section { padding: 70px 6%; }
.section-inner { max-width: 1200px; margin: 0 auto; }
.section-tag { display: inline-block; background: var(--gold-light); color: var(--navy); padding: 8px 24px; border-radius: 4px; font-weight: 800; font-size: 1.1rem; margin-bottom: 20px; border: 1px solid var(--gold); }
.section-title { font-size: clamp(2.2rem, 5vw, 3.5rem); font-weight: 900; color: var(--navy); margin-bottom: 40px; line-height: 1.3; }

/* PAIN SECTION */
#pain { background: var(--gray-light); }
.pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; }
.pain-card { background: white; padding: 40px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 20px; border-top: 6px solid var(--gold); }
.pain-icon { font-size: 3.5rem; }
.pain-card p { font-size: 1.2rem; font-weight: 700; }

/* LAWYER */
.lawyer-card { display: flex; gap: 50px; align-items: center; background: white; padding: 60px; border-radius: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.1); }
.lawyer-photo { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; border: 10px solid var(--gray-light); flex-shrink: 0; }
.lawyer-name { font-size: 2.8rem; font-weight: 900; color: var(--navy); margin-bottom: 10px; }
.lawyer-title { color: var(--gold); font-size: 1.3rem; font-weight: 800; }

/* CUSTOMER VOICE */
#voice { background-color: var(--gray-light); }
.voice-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
  gap: 30px; 
}
.voice-card { 
  background: white; 
  border-radius: 15px; 
  overflow: hidden; 
  box-shadow: 0 15px 40px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}
.voice-card:hover { transform: translateY(-5px); }
.video-container { 
  position: relative; 
  padding-bottom: 56.25%; /* 16:9 */
  height: 0; 
  overflow: hidden; 
}
.video-container iframe { 
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%; 
  border: 0;
}

/* PRICING */
.pricing-grid { display: flex; gap: 40px; justify-content: center; }
.price-card { background: white; padding: 70px 40px; border-radius: 30px; width: 100%; max-width: 480px; text-align: center; border: 2px solid #eee; }
.price-card.featured { background: var(--navy); color: white; border: none; transform: scale(1.05); box-shadow: 0 30px 60px rgba(15, 62, 131, 0.3); }
.price-amount { font-size: 4.5rem; font-weight: 900; margin: 25px 0; }
.price-card.featured .price-amount { color: var(--gold); }
/* PAYMENT METHODS */
.payment-area {
  margin-top: 40px;
  background: #62bdf7;
  border-radius: 10px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.payment-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.pay-label {
  background: #fde401;
  color: var(--gray-dark);
  font-weight: 800;
  padding: 8px 20px;
  border-radius: 50px;
  min-width: 180px;
  text-align: center;
  font-size: 1rem;
}
.pay-icons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.card-brand, .pay-badge {
  background: white;
  padding: 5px 12px;
  border-radius: 4px;
  font-weight: 900;
  font-style: italic;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  height: 36px;
}
.card-brand.visa { color: #1a1f71; }
.card-brand.mastercard { 
  font-style: normal;
  display: flex; gap: -5px; padding: 4px 8px; 
}
.mc-red { width: 18px; height: 18px; background: #eb001b; border-radius: 50%; opacity: 0.9; }
.mc-yellow { width: 18px; height: 18px; background: #f79e1b; border-radius: 50%; margin-left: -7px; opacity: 0.9; }
.card-brand.jcb { color: #0079C1; font-style: normal;}
.card-brand.amex { color: white; background: #2671B9; font-style: normal; font-size: 0.9rem; }
.card-brand.diners { color: #004b8d; font-weight: normal; font-style: normal;}
.card-brand.discover { color: #F68121; font-style: normal; }
.pay-badge.apple-pay { font-style: normal; font-weight: 600;}
.pay-badge.google-pay { font-style: normal; font-weight: 600; color: #5f6368;}
.pay-note { color: var(--gray-dark); font-weight: 700; font-size: 0.95rem; }

/* GUARANTEES */
#guarantees { background: linear-gradient(135deg, #102e5b, #0f3e83); padding: 60px 5%; }
.guarantee-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .guarantee-grid { grid-template-columns: 1fr 1fr; }
}
.guarantee-card {
  border-radius: 15px;
  padding: 40px;
  color: var(--gray-dark);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.refund-card {
  background: linear-gradient(135deg, #a4e5fb, #4fc3f7);
}
.g-header {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 900;
  margin-bottom: 5px;
}
.g-title {
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 20px;
}
.g-title span {
  color: #ff0000;
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  display: inline-block;
  background: linear-gradient(transparent 65%, #fde401 65%);
  margin-right: 5px;
}

.cashback-card {
  background: linear-gradient(135deg, #ffffff, #e1ddfe);
}
.c-tags { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: clamp(1.2rem, 2vw, 1.5rem); color: var(--gray-dark); margin-bottom: 10px;}
.c-tag { background: #4a8deb; color: white; padding: 8px 15px; border-radius: 4px; }
.c-cross { color: #f2c700; font-size: 2rem; }
.c-mid { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 900; line-height: 1.5; margin-bottom: 15px; color: var(--navy);}
.c-title {
  color: white;
  background: #2b70c9;
  display: inline-block;
  padding: 10px 20px;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  margin-bottom: 20px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
  width: max-content;
}

.g-desc { font-weight: 700; font-size: 1rem; line-height: 1.7;}


/* FLOW */
#flow { background: var(--gray-light); }
.flow-container {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
@media (min-width: 900px) {
  .flow-container {
    flex-direction: row;
    gap: 15px;
    align-items: stretch;
  }
}
.flow-step {
  flex: 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.step-header {
  padding: 20px 10px;
  text-align: center;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100px;
  position: relative;
}
.flow-step:nth-child(1) .step-header { background: #4a8deb; }
.flow-step:nth-child(2) .step-header { background: #3373cd; }
.flow-step:nth-child(3) .step-header { background: #2156a5; }
.flow-step:nth-child(4) .step-header { background: var(--navy); }

/* Chevron effect for desktop */
@media (min-width: 900px) {
  .step-header {
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%);
    padding-left: 20px;
  }
  .flow-step:nth-child(1) .step-header {
    clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%);
    padding-left: 10px;
  }
  .flow-step:last-child .step-header {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10% 50%);
  }
  .flow-container { gap: 5px; }
}

/* Fallback arrow for mobile */
@media (max-width: 899px) {
  .flow-step { position: relative; overflow: visible; }
  .flow-step:not(:last-child)::after {
    content: "▼";
    position: absolute;
    bottom: -22px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: var(--navy);
    z-index: 10;
  }
  .flow-container { gap: 30px; }
}

.step-num {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 1px;
}
.step-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin-top: 5px;
}
.step-body {
  padding: 25px 20px;
}
.step-body p {
  font-size: 0.95rem;
  line-height: 1.6;
  font-weight: 700;
  color: var(--gray-dark);
}

/* CONTACT FORM */
#contact-form { background-color: var(--gray-light); }
.mail-form { background: white; padding: 50px; border-radius: 20px; box-shadow: 0 15px 40px rgba(0,0,0,0.03); border-top: 6px solid var(--navy); }
.form-group { margin-bottom: 25px; text-align: left; }
.form-group label { display: block; font-weight: 800; color: var(--navy); margin-bottom: 10px; font-size: 1.1rem; }
.form-group span.required { background: #e74c3c; color: white; font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; margin-left: 10px; vertical-align: middle; }
.form-group span.optional { background: #95a5a6; color: white; font-size: 0.8rem; padding: 2px 8px; border-radius: 4px; margin-left: 10px; vertical-align: middle; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 15px; border: 2px solid #ddd; border-radius: 8px; font-family: inherit; font-size: 1rem; transition: border-color 0.3s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--gold); }
.btn-submit { display: block; width: 100%; max-width: 400px; margin: 40px auto 0; background-color: var(--navy); color: white; padding: 20px; border: none; border-radius: 50px; font-weight: 900; font-size: 1.4rem; cursor: pointer; transition: transform 0.3s, background-color 0.3s; box-shadow: 0 10px 20px rgba(15, 62, 131, 0.2); }
.btn-submit:hover { transform: translateY(-3px); background-color: #0c3166; }

/* BOTTOM CTA BUTTON */
#bottom-cta { text-align: center; padding: 60px 5%; }
.cta-catch { font-size: 3rem; color: var(--navy); margin-bottom: 10px; font-weight: 900;}
.btn-line-cta {
  display: inline-block;
  background-color: #06c755;
  color: white;
  padding: 20px 60px;
  border-radius: 50px;
  font-weight: 900;
  font-size: 1.8rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(6, 199, 85, 0.4);
  margin-top: 30px;
  transition: transform 0.3s ease;
}
.btn-line-cta:hover { transform: translateY(-5px); }

/* FOOTER */
footer { background: var(--navy); color: white; padding: 50px 0 100px 0; text-align: center; }
.footer-logo { font-size: 2.5rem; font-weight: 950; letter-spacing: 0.1em; margin-bottom: 20px; }

/* STICKY LINE BUBBLE (Prominent) */
#line-bubble {
  position: fixed;
  bottom: 30px;
  right: 30px;
  background-color: #06c755;
  color: white;
  padding: 15px 35px;
  border-radius: 50px;
  font-weight: 900;
  font-size: 1.3rem;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(6, 199, 85, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: pulse 2s infinite;
  transition: transform 0.3s ease;
}
#line-bubble:hover { transform: scale(1.05); }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0.8); }
  70% { box-shadow: 0 0 0 20px rgba(6, 199, 85, 0); }
  100% { box-shadow: 0 0 0 0 rgba(6, 199, 85, 0); }
}

/* Responsive */
@media (max-width: 992px) {
  .lawyer-card { flex-direction: column; text-align: center; padding: 40px; }
  .pricing-grid { flex-direction: column; align-items: center; }
}
@media (max-width: 600px) {
  .section-inner { width: 100%; }
  .cta-catch { font-size: 2rem; }
  .btn-line-cta { font-size: 1.2rem; padding: 15px 30px; }
  #line-bubble {
    bottom: 20px; right: 20px; left: 20px;
    justify-content: center; border-radius: 10px; font-size: 1.2rem;
  }
}