/* for-owners.css — 経営者の方へ
   Figma: 2005:56309。事例カード・メルマガ紹介・特典・登録フォームはこのページ固有 */

/* 導入（見出し＋本文 800px＋大ボタン 420）Figma: 2019:16156 */
.owners-intro {
  padding-bottom: var(--space-40);
}

.owners-intro .content-section__body {
  width: min(50rem, 100%); /* 800px */
}

/* 事例カード Figma: 2091:61392 --------------------------------------------- */
.case-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.case-card {
  --case-card-logo: 5rem; /* 80px */

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  width: 100%;
  padding: calc(var(--space-24) - var(--border-width));
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-black);
}

.case-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-30);
  width: 100%;
}

.case-card__logo {
  flex-shrink: 0;
  width: var(--case-card-logo);
  height: var(--case-card-logo);
}

.case-card__title {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  margin: 0;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.case-card__area {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-body);
}

.case-card__name {
  font-size: var(--font-size-h3-lg);
  line-height: var(--line-height-compact);
}

/* SP でだけ効かせる改行（PC は1行のまま）*/
.case-card__br-sp,
.mailmag-form__br-sp {
  display: none;
}

/* メールマガジン紹介（左テキスト＋右写真）Figma: 2019:16332 -------------------- */
.mailmag-intro {
  display: flex;
  align-items: flex-start;
  gap: var(--space-40);
  padding-block: var(--space-40);
  color: var(--color-black);
}

.mailmag-intro__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  align-self: stretch;
  min-width: 0;
}

.mailmag-intro__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  width: 100%;
}

.mailmag-intro__text .heading {
  width: 100%;
}

.mailmag-intro__image {
  flex: 1 0 0;
  align-self: stretch;
  min-width: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mailmag-intro__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 特典（見出し＋バー＋本文＋ボタン＋写真）Figma: 2019:16835 ------------------- */
.gift-section {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-40);
  padding-block: var(--space-40);
  color: var(--color-black);
}

.gift-section__head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  width: 100%;
}

.gift-section__deco {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(460 / 16 * 1rem);
  height: calc(303.594 / 16 * 1rem);
  pointer-events: none;
}

.gift-section__head > :not(.gift-section__deco) {
  position: relative;
}

.gift-section__title {
  margin: 0;
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-compact);
  white-space: nowrap;
}

.gift-section__bar {
  width: calc(120 / 16 * 1rem);
  height: var(--border-width-7);
  background: var(--color-black);
}

.gift-section__head .content-section__body {
  padding-right: var(--space-120);
}

/* 登録フォームパネル Figma: 2019:16537 --------------------------------------- */
.mailmag-form {
  --mailmag-form-width: calc(529 / 16 * 1rem);
  --mailmag-form-deco-right: calc(-359 / 16 * 1rem);
  --mailmag-form-input-height: calc(52 / 16 * 1rem);

  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-40) var(--space-56);
  border-radius: var(--radius-lg);
  background-color: var(--color-white);
  background-image: linear-gradient(90deg, var(--color-genki-port-a89990-20), var(--color-genki-port-a89990-20));
  color: var(--color-black);
  overflow: hidden;
}

.mailmag-form__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-32);
  width: min(var(--mailmag-form-width), 100%);
}

.mailmag-form__deco {
  position: absolute;
  top: 0;
  right: var(--mailmag-form-deco-right);
  width: calc(460 / 16 * 1rem);
  height: calc(303.594 / 16 * 1rem);
  pointer-events: none;
}

.mailmag-form__inner > :not(.mailmag-form__deco) {
  position: relative;
}

.mailmag-form__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  margin: 0;
  font-weight: var(--font-weight-bold);
  text-align: center;
  white-space: nowrap;
}

.mailmag-form__title {
  font-size: var(--font-size-h1);
  line-height: var(--line-height-compact);
}

.mailmag-form__sub {
  font-size: var(--font-size-h3);
  line-height: var(--line-height-tight);
}

.mailmag-form__form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
}

.mailmag-form__fields {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-40);
  width: 100%;
}

.form-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
}

.form-field__label {
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
}

.form-field__input {
  width: 100%;
  height: var(--mailmag-form-input-height);
  padding: 0 var(--space-16);
  border: var(--border-width) solid var(--color-black);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  font: inherit;
  color: var(--color-black);
  transition: box-shadow var(--duration-fast) var(--ease-hover);
}

.form-field__input:focus {
  outline: none;
  box-shadow: 0 0 0 var(--border-width) var(--color-black);
}

.form-consent {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  cursor: pointer;
}

.form-consent__checkbox {
  width: var(--space-16);
  height: var(--space-16);
  margin: 0;
  border: var(--border-width) solid var(--color-black);
  border-radius: 0;
  background: var(--color-white);
  appearance: none;
  cursor: pointer;
}

.form-consent__checkbox:checked {
  background: var(--color-white) url("../../images/icon-check.svg") center / 100% no-repeat;
}

.form-consent a {
  color: inherit;
}

/* 1200px 以下：Figma で1行固定（nowrap）の見出しも、幅が足りなければ折り返す */
@media (max-width: 1200px) {
  .case-card__title,
  .gift-section__title,
  .mailmag-form__heading {
    white-space: normal;
  }
}

/* 767px 以下（SP）：横並びを縦1列に。⚠ SPデザイン未確定のため仮レイアウト */
@media (max-width: 767px) {
  .mailmag-intro {
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
  }

  .mailmag-intro__text {
    gap: var(--space-24);
  }

  /* business.css を読まないページのため、h3 共通の margin-bottom が残る */
  .mailmag-intro .brand-row__title {
    margin-bottom: 0;
  }

  .mailmag-intro__image {
    flex: none;
    aspect-ratio: var(--ratio-4-3);
  }

  .gift-section {
    padding-top: 0;
  }

  .gift-section__title {
    font-size: var(--font-size-h3);
  }

  .gift-section__head {
    gap: var(--space-16);
  }

  .gift-section__deco {
    display: none;
  }

  /* 帯を控えめに（120×7px → 80×4px。SPデザイン未支給のため仮値）*/
  .gift-section__bar {
    width: var(--space-80);
    height: var(--space-4);
  }

  .gift-section__head .content-section__body {
    padding-right: 0;
  }

  .mailmag-form {
    padding: var(--space-40) var(--space-24);
  }

  .case-card {
    gap: var(--space-16);
  }

  .case-card__head {
    gap: var(--space-16);
  }

  .case-card__br-sp,
    .mailmag-form__br-sp {
    display: inline;
  }

  .mailmag-form__sub {
    line-height: var(--line-height-body);
  }

  /* 透かしは右端だと画面外に切れるので、フォーム枠の中央に置く */
  .mailmag-form__deco {
    top: 50%;
    right: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}