/* components.css
   - ボタン
   - バッジ
   - カード類
   - インフォバー
   - フローの部品（共通で使うもの）
*/

/* button */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  border-radius: .75rem;
  line-height: 1.4;
  transition: transform .1s ease, box-shadow .1s ease, background .1s ease;
  font-size: .9rem;
}

.btn i { font-size: 1.05rem; }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  padding: .65rem 1.1rem;
  box-shadow: 0 10px 35px rgba(37, 99, 235, .25);
}
.btn--primary:hover { background: #1d4ed8; transform: translateY(-1px); }

/* 白系ボタン共通化 */
.btn--white,
.btn--light {
  background: #fff;
  color: var(--color-primary);
}
.btn--light { padding: .8rem 1.4rem; }

.btn--rounded { border-radius: 9999px; }
.btn--lg { font-size: 1rem; padding: .9rem 1.7rem; }

/* section heading */
.section-heading { margin-bottom: 3.5rem; }
.section-heading--center { text-align: center; }

.section-tag {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-primary);
  letter-spacing: .12em;
  margin-bottom: .45rem;
}

.section-title { font-size: clamp(1.875rem, 2.4vw, 2.4rem); margin-bottom: .75rem; }
.section-lead { color: var(--color-muted); font-size: 1.05rem; }

.section-bottom { text-align: center; margin-top: 3.5rem; }
.section-bottom__icon {
  width: 3rem; height: 3rem; border-radius: 9999px; background: #f8fafc;
  display: grid; place-items: center; margin: 0 auto 1rem; box-shadow: var(--shadow-sm);
}
.section-bottom__icon i { font-size: 1.5rem; color: #94a3b8; }
.section-bottom__label {
  text-transform: uppercase; font-size: .7rem; color: #94a3b8;
  margin-bottom: .7rem; letter-spacing: .1em;
}
.section-bottom__title { font-size: 1.7rem; margin-bottom: .5rem; }
.section-bottom__text { max-width: 48rem; margin: 0 auto; color: #64748b; }

/* grids */
.grid-list { display: grid; gap: 1.5rem; }
.grid-list--3 { grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); }

/* cards */
.card {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 1.35rem;
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.card__head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }

.card__icon {
  width: 3.4rem; height: 3.4rem; border-radius: 1.1rem;
  display: grid; place-items: center; font-size: 1.8rem;
}
.card__icon--blue { background: rgba(37, 99, 235, .1); color: #2563eb; }
.card__icon--slate { background: #e2e8f0; color: #475569; }

.card__title { font-weight: 600; font-size: 1.05rem; }
.card__text { color: #475569; font-size: .9rem; line-height: 1.7; }

/* badge */
.badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .9);
  border-radius: 9999px; padding: .35rem .85rem;
  font-size: .7rem; font-weight: 600;
}
.badge__dot {
  width: .6rem; height: .6rem; border-radius: 9999px;
  background: var(--color-primary); display: inline-block;
}
.badge--ghost { background: rgba(255, 255, 255, .06); }

/* info bar（統合版） */
.info-bar { margin-top: 2rem; margin-bottom: 3.5rem; }

.info-bar__inner {
  background: #0f172a; color: #fff; border-radius: 1.5rem;
  padding: .85rem 1.25rem;
  display: flex; gap: 1rem; align-items: center; /* 中央揃え */
  box-shadow: var(--shadow-md);
}
@media (max-width: 639.98px) { .info-bar__inner { flex-wrap: wrap; } }

.info-bar__icon {
  width: 2.4rem; height: 2.4rem; min-width: 2.4rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem;
}

.info-bar__text {
  flex: 1 1 auto;
  display: flex; align-items: center;
  min-height: 2.2rem;
  line-height: 1.4;
  font-size: .9rem;          /* 既存のサイズを維持 */
  transform: translateY(7px);/* 微調整（tweakを尊重） */
}

.info-bar__link {
  display: flex; align-items: center; gap: .25rem; line-height: 1;
  font-size: .8rem; color: rgba(255, 255, 255, .95);
}
.info-bar__link:hover { color: #fff; }

/* feature cards */
.feature-grid { gap: 2rem; }

.feature-card {
  background: #fff;
  border: 1px solid rgba(148, 163, 184, 0.12);
  border-radius: 1.35rem;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.feature-card__bar { height: .32rem; background: #0f172a; }
.feature-card__body { padding: 2.25rem 2rem 2.25rem; }
.feature-card__head { display: flex; gap: 1rem; margin-bottom: 1.2rem; }

.feature-card__icon {
  width: 3rem; height: 3rem; border-radius: 1rem;
  display: grid; place-items: center; font-size: 1.8rem;
}

.feature-card--green .feature-card__bar { background: #10b981; }
.feature-card--blue  .feature-card__bar { background: #0ea5e9; }
.feature-card--purple .feature-card__bar { background: #a855f7; }

.feature-card__icon--green  { background: rgba(16,185,129,.12);  color:#047857; }
.feature-card__icon--blue   { background: rgba(14,165,233,.12);  color:#0369a1; }
.feature-card__icon--purple { background: rgba(168,85,247,.12);  color:#7c3aed; }

.feature-card__title { font-weight: 600; margin-bottom: .25rem; }
.feature-card__subtitle { font-size: .7rem; color: #94a3b8; }

.feature-card__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .6rem; font-size: .85rem; color: #475569;
}
.feature-card__list li { position: relative; padding-left: 1.6rem; }
.feature-card__list li::before {
  content: ""; position: absolute; left: .3rem; top: .15rem;
  width: .5rem; height: .9rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(40deg); border-radius: 1px;
}

.feature-card__note {
  background: #f8fafc; border-radius: .9rem;
  padding: .85rem 1rem; font-size: .7rem; color: #475569; margin-top: 1.2rem;
}

/* flow cards */
.flow-grid { display: grid; gap: 1.5rem; }
@media (min-width: 768px) {
  .flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.flow-card {
  background: #f8fafc;
  border: 1px solid rgba(148, 163, 184, 0.1);
  border-radius: 1.5rem;
  padding: 1.5rem 1.4rem 1.9rem;
  position: relative; text-align: center; box-shadow: var(--shadow-sm);
}
.flow-card__image { margin-bottom: 1rem; }
.flow-card__image img {
  border-radius: 1.05rem; height: 12rem; width: 100%;
  object-fit: cover; object-position: top;
}

.flow-card__step {
  width: 3.1rem; height: 3.1rem; border-radius: 9999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.3rem; color: #fff;
  margin: 0 auto 1rem; box-shadow: var(--shadow-sm);
}
.flow-card__step--primary { background: var(--color-primary); }
.flow-card__step--secondary { background: var(--color-secondary); }
.flow-card__step--amber { background: #f59e0b; }

.flow-card__title { font-weight: 700; margin-bottom: .75rem; }
.flow-card__text  { font-size: .85rem; color: #556; line-height: 1.6; }

.flow-card__chip {
  display: inline-flex; padding: .35rem .8rem; border-radius: 9999px;
  font-size: .65rem; margin-top: 1rem; background: #fff;
}
.flow-card__chip--green { color: #047857; }
.flow-card__chip--blue  { color: #0369a1; }

.flow-notice {
  margin-top: 2.5rem; background: #fffbeb;
  border: 1px solid rgba(251, 191, 36, .35);
  border-radius: 1.5rem; padding: 1.5rem 1.25rem;
  display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap;
}
.flow-notice__icon {
  width: 2.6rem; height: 2.6rem; border-radius: 9999px;
  background: #fcd34d; color: #fff;
  display: grid; place-items: center; font-size: 1.35rem;
}
.flow-notice__content h4 { margin-bottom: .5rem; }
.flow-notice__content p { margin-bottom: 0; color: #694311; font-size: .85rem; }
.flow-notice__badge {
  margin-left: auto; background: rgba(255, 255, 255, .6);
  border-radius: 9999px; padding: .35rem .9rem; font-size: .65rem; font-weight: 600; white-space: nowrap;
}

/* contact box */
.contact-box {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 1.35rem;
  padding: 1.85rem 1.25rem;
  margin-bottom: 1.5rem;
}
.contact-box__mail {
  display: inline-flex; gap: .6rem; align-items: center;
  font-size: 1.4rem; font-weight: 600; word-break: break-all;
}
.contact-box__mail i { font-size: 2.1rem; }
.contact-box__note { margin-top: .5rem; font-size: .75rem; opacity: .7; }

/* mobile nav active */
.mobile-nav__link--active { background: rgba(148, 163, 184, .15); color: var(--color-primary); }

/* breadcrumb (サブページ用) */
.breadcrumb {
  display: flex; gap: .5rem; align-items: center;
  font-size: .75rem; color: rgba(248, 250, 252, .85); margin-bottom: 1rem;
}
.breadcrumb__link { display: inline-flex; gap: .4rem; align-items: center; }
.breadcrumb__link:hover { color: #fff; }
.breadcrumb__sep { opacity: .6; }
.breadcrumb__current { font-weight: 600; }

/* 小さめのピル型タグ */
.section-tag--pill {
  display: inline-flex; gap: .5rem; align-items: center;
  background: rgba(37, 99, 235, .08); color: rgba(37, 99, 235, 1);
  border-radius: 9999px; padding: .4rem .85rem;
  font-size: .65rem; font-weight: 600; text-transform: uppercase;
}
.section-tag--pill span {
  width: .55rem; height: .55rem; border-radius: 9999px;
  background: rgba(37, 99, 235, .7);
}

/* インラインの矢印リンク */
.link-inline {
  display: inline-flex; gap: .35rem; align-items: center;
  color: var(--color-primary); font-weight: 600; font-size: .8rem;
}
.link-inline:hover { text-decoration: underline; }

/* dark基調の汎用フォーム */
.contact-form {
  max-width: 720px; margin: 2rem auto 0;
  background: rgba(255,255,255,0.08);
  border-radius: 16px; padding: 1.5rem; backdrop-filter: blur(2px);
}
.contact-form .form-row { margin-bottom: 1rem; }
.contact-form label { display:block; margin-bottom:.4rem; font-weight:600; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 10px; padding: .75rem .9rem;
  background: rgba(255,255,255,0.06); color: #fff;
}
.form-row--checkbox label { display:flex; gap:.6rem; align-items:center; font-weight:500; }
.form-result { margin-top:.5rem; font-size:.95rem; }
.form-result--ok { color:#b9f6ca; }
.form-result--error { color:#ff8a80; }

/* スクリーンリーダー向け非表示（視覚的には非表示だが読み上げ対象外）*/
.u-hidden-visually { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* CTAセクション内のフォーム（白基調の上書き） */
.section--cta .contact-form {
  max-width: 720px; margin: 2rem auto 0;
  background: #fff; color: #111; border-radius: 16px; padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.section--cta .contact-form .form-row { margin-bottom: 1rem; }
.section--cta .contact-form label { display:block; margin-bottom:.4rem; font-weight:600; color:#111; }
.section--cta .contact-form input[type="text"],
.section--cta .contact-form input[type="email"],
.section--cta .contact-form input[type="tel"],
.section--cta .contact-form select,
.section--cta .contact-form textarea {
  width:100%; border:1px solid rgba(0,0,0,.15);
  border-radius:10px; padding:.75rem .9rem; background:#fff; color:#111;
}
.section--cta .contact-form input::placeholder,
.section--cta .contact-form textarea::placeholder { color:#7a7a7a; }
.section--cta .contact-form select { appearance:auto; }
.section--cta .contact-form .form-row--checkbox label { display:flex; gap:.6rem; align-items:center; color:#111; font-weight:500; }
.form-result--ok { color:#1b5e20; }  /* CTA配色に合わせて再指定 */
.form-result--error { color:#b00020; }

/* Contactセクション内の送信ボタンを強調表示に（HTML変更不要） */
#contact .btn,
#contact button.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem; padding: .9rem 1.4rem; border-radius: 9999px;
  font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .02s ease;
}
.modal{position:fixed; inset:0; display:none; z-index:1000;}
.modal.is-open{display:block;}
.modal__backdrop{position:absolute; inset:0; background:rgba(0,0,0,.5);}
.modal__dialog{
  position:relative; margin:8vh auto 0; max-width:600px; width:92vw;
  background:#fff; border-radius:16px; padding:1.6rem; box-shadow:0 10px 30px rgba(0,0,0,.2);
}
.modal h2{margin-top:0}
.modal .note{color:#666; font-size:.95rem}
.modal__actions{display:flex; gap:.75rem; justify-content:center; margin-top:1rem}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.2rem; border-radius:9999px; border:1px solid rgba(0,0,0,.15); background:#fff; cursor:pointer; font-weight:700}
.btn--primary{background:#0b57d0; color:#fff; border-color:transparent}
.btn--primary:hover{box-shadow:0 8px 20px rgba(11,87,208,.25)}