/* 悩みカードのリンク下線を完全に消す */
.brand-worry-card,
.brand-worry-card:hover,
.brand-worry-card:focus,
.brand-worry-card:active,
.brand-worry-card__btn,
.brand-worry-card__btn .common-btn__text {
  text-decoration: none !important;
}


/* ==================================================
   ECFORCE FREE PAGE - FULL WIDTH RESET
================================================== */

#brand-page,
#brand-page * {
  box-sizing: border-box;
}

/* ページ管理側の本文幅に影響されず、BRANDだけ画面幅いっぱいにする */
#brand-page {
  align-self: stretch;
}

/* ==================================================
   BRAND PAGE
================================================== */

.brand-page {
  position: relative;

  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  overflow: hidden;
  background: #fff;
}

.brand-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;

  background-image: url("../images/brand/brand-back-fixed.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.45s ease,
    visibility 0.45s ease;

  pointer-events: none;
}

.brand-page.is-brand-bg-visible::before {
  opacity: 1;
  visibility: visible;
}

.brand-page>* {
  position: relative;
  z-index: 1;
}


/* ==================================================
   FV
================================================== */

.brand-fv {
  position: relative;

  width: 100vw;
  max-width: none;
  height: 100dvh;
  min-height: 100dvh;

  margin: 0;

  background: #fff;
}

.brand-breadcrumb {
  position: absolute;
  top: 112px;
  left: 50%;
  z-index: 5;

  transform: translateX(-50%);

  color: #777;
  font-size: 12px;
  line-height: 1;
}

.brand-breadcrumb a {
  color: inherit;
}

.brand-fv__visual {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
}

.brand-fv__visual picture,
.brand-fv__visual img {
  display: block;
  width: 100%;
  height: 100%;
}

.brand-fv__visual img {
  object-fit: cover;
  object-position: center;
}

.brand-fv__copy {
  position: absolute;
  top: 24%;
  left: 50%;

  width: min(90%, 685px);

  transform: translateX(-50%);

  color: #555;
  text-align: center;
}

.brand-fv__eyebrow {
  margin: 0 0 24px;

  font-size: clamp(18px, 1.35vw, 26px);
  line-height: 1;
  letter-spacing: .08em;
}

.brand-fv__logo {
  margin: 0;
}

.brand-fv__logo img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  margin-inline: auto;
  object-fit: contain;
}

.brand-fv__tagline {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  margin-top: 28px;
}

.brand-fv__tagline span {
  width: 72px;
  height: 1px;

  background: #9ca7ad;
}

.brand-fv__tagline p {
  margin: 0;

  color: #777;

  font-size: 13px;
  line-height: 1.4;
  letter-spacing: .05em;
}

.brand-fv__description {
  max-width: 685px;

  margin: 25px auto 0;
}

.brand-fv__description p {
  margin: 0;

  color: #666;

  font-size: clamp(12px, .9vw, 16px);
  line-height: 1.75;
  letter-spacing: .03em;
}

.brand-fv__copy--sp {
  display: none;
}

.brand-fv__copy-sp {
  display: none;
}


/* ==================================================
   WORRIES
================================================== */

.brand-worries {
  position: relative;

  width: 100vw;
  max-width: none;
  min-height: 0;

  margin: 0;
  padding: 96px 0 150px;

  background: transparent;
}

.brand-worries>.wrapper {
  width: calc(100% - 64px);
  max-width: 1200px;
  margin-inline: auto;
}

.brand-worries__heading {
  margin-bottom: 56px;
  text-align: center;
}

.brand-worries__heading h2 {
  margin: 0;

  color: #3694c9;

  font-size: clamp(40px, calc(1.3913vw + 29.286px), 56px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .02em;
  text-align: center;
}

.brand-worries__heading-br--sp {
  display: none;
}

.brand-worries__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 64px 24px;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;
}

.brand-worry-card {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;

  color: inherit;
  text-decoration: none;
}

.brand-worry-card__media img,
.brand-worry-card__btn {
  transition:
    opacity 0.3s ease,
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.brand-worry-card:hover .brand-worry-card__media img {
  opacity: 0.82;
}

.brand-worry-card:hover .brand-worry-card__btn {
  opacity: 0.88;
  transform: translateY(2px);
}

.brand-worry-card:active .brand-worry-card__media img {
  opacity: 0.72;
}

.brand-worry-card:active .brand-worry-card__btn {
  transform: translateY(3px) scale(0.99);
}

.brand-worry-card__media {
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
}

.brand-worry-card__media img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.brand-worry-card__btn {
  width: 260px;
  height: 60px;

  margin-top: 28px;

  gap: 8px;

  font-size: clamp(16px, calc(-0.3478vw + 22.678px), 20px);
  font-weight: 600;
}

.brand-worry-card__btn .common-btn__arrow {
  width: 70px;
  height: 10px;
}


/* ==================================================
   TABLET / SP
================================================== */

@media (max-width: 1170px) {

  .brand-breadcrumb {
    top: 96px;
  }

  .brand-worries {
    padding-top: 72px;
  }

}


@media (max-width: 560px) {

  .brand-page::before {
    background-image: url("../images/brand/brand-back-fixed-sp.png");
    background-size: 100% auto;
    background-position: top center;
  }

  .brand-fv {
    height: 100dvh;
    min-height: 100dvh;
  }

  .brand-breadcrumb {
    top: 84px;

    width: 90%;

    font-size: 9px;
  }

  .brand-fv__visual {
    height: 100%;
  }

  .brand-fv__visual img {
    object-position: center top;
  }

  .brand-fv__copy--pc {
    display: none;
  }

  .brand-fv__copy--sp {
    display: block;

    top: 19%;
    width: 90%;

    color: #555;
  }

  .brand-fv__copy--sp .brand-fv__eyebrow {
    margin-bottom: 18px;
    font-size: 16px;
  }

  .brand-fv__copy--sp .brand-fv__logo img {
    width: min(78vw, 310px);
  }

  .brand-fv__copy--sp .brand-fv__tagline {
    gap: 10px;
    margin-top: 18px;
  }

  .brand-fv__copy--sp .brand-fv__tagline span {
    width: 44px;
  }

  .brand-fv__copy--sp .brand-fv__tagline p {
    font-size: 9px;
  }

  .brand-fv__copy-sp {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 195px;

    padding: 44px 7%;

    background: #4fa5d0;

    color: #fff;
    text-align: center;
  }

  .brand-fv__copy-sp p {
    margin: 0;

    font-size: 16px;
    line-height: 1.9;
    letter-spacing: .025em;
  }

  .brand-worries {
    min-height: auto;

    padding: 46px 0 84px;
  }

  .brand-worries__heading {
    margin-bottom: 32px;
  }

  .brand-worries__heading h2 {
    font-size: 24px;
    line-height: 1.35;
  }

  .brand-worries__heading-br--sp {
    display: block;
  }

  .brand-worries__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    column-gap: 7%;
    row-gap: 42px;

    width: 100%;
  }

  .brand-worry-card__media {
    max-width: none;
  }

  .brand-worry-card__btn {
    width: 122px;
    height: 30px;

    margin-top: 16px;

    gap: 7px;

    font-size: 7px;
  }

  .brand-worry-card__btn .common-btn__arrow {
    width: 28px;
    height: 6px;
  }

  .brand-worry-card__btn .common-btn__arrow::after {
    border-left-width: 6px;
    border-top-width: 6px;
  }

}


/* ==================================================
   FV / TOP OFFSET FIX
   ページ管理側で付く上余白を相殺し、
   FVの上端をビューポート上端まで引き上げる
================================================== */

.brand-page {
  --brand-page-top-offset: 0px;
}

/* .brand-fv {
  margin-top: calc(-1 * var(--brand-page-top-offset));
} */

@media (max-width: 560px) {
  .brand-fv__copy-sp {
    position: absolute;
    top: 100%;
    left: 0;

    width: 100%;

    z-index: 2;
  }

  .brand-worries {
    margin-top: 370px;
  }
}




/* いらんやつ */
.u-margin__top--60 {
  margin-top: 0 !important;
}


.brand-worries__heading h2 {
  font-size: var(--top-h1) !important;
}

.brand-fv__eyebrow,
.brand-fv__tagline p,
.brand-fv__description p,
.brand-fv__copy--sp .brand-fv__eyebrow,
.brand-fv__copy--sp .brand-fv__tagline p {
  font-size: var(--top-16) !important;
}

.brand-breadcrumb {
  font-size: var(--top-small) !important;
}


/* ==================================================
   BRAND PAGE / TOP DESIGN SYSTEM SYNC
   2026-09-17
================================================== */

#brand-page .brand-fv__eyebrow {
  font-size: var(--top-h1) !important;
  font-weight: 600 !important;
  line-height: 1;
}

#brand-page .brand-fv__description p {
  font-size: clamp(16px, calc(0.1739vw + 14.661px), 18px) !important;
}

#brand-page .brand-fv__tagline p {
  font-size: clamp(16px, calc(0.3478vw + 13.322px), 20px) !important;
}

@media (min-width: 1171px) {
  #brand-page .brand-worries>.wrapper {
    width: calc(100% - 64px) !important;
    max-width: 1200px !important;
  }

  #brand-page .brand-worries__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 771px) and (max-width: 1170px) {
  #brand-page .brand-worries>.wrapper {
    width: 90% !important;
    max-width: 1200px !important;
  }

  #brand-page .brand-worries {
    padding-top: 80px !important;
  }

  #brand-page .brand-worries__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 56px 24px !important;
    width: 80%;
  }

  #brand-page .brand-worry-card__btn {
    width: 260px !important;
    height: 60px !important;
  }
}

@media (max-width: 770px) {
  #brand-page .brand-worries>.wrapper {
    width: 90% !important;
    max-width: none !important;
  }

  #brand-page .brand-worries {
    min-height: 0 !important;
    padding: 64px 0 84px !important;
  }

  #brand-page .brand-worries__heading {
    margin-bottom: 40px !important;
    text-align: center !important;
  }

  #brand-page .brand-worries__heading h2 {
    font-size: 40px !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  #brand-page .brand-worries__heading-br--sp {
    display: none !important;
  }

  #brand-page .brand-worries__grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    width: 80% !important;
  }

  #brand-page .brand-worry-card {
    width: 100% !important;
  }

  #brand-page .brand-worry-card__media {
    width: 100% !important;
    max-width: none !important;
  }

  #brand-page .brand-worry-card__btn {
    width: min(260px, 72vw) !important;
    height: 60px !important;
    margin-top: 24px !important;
    font-size: 20px !important;
    gap: 8px !important;
  }

  #brand-page .brand-worry-card__btn .common-btn__arrow {
    width: 70px !important;
    height: 10px !important;
  }
}

@media (max-width: 400px) {
  #brand-page .brand-fv__eyebrow {
    font-size: 6vw !important;
  }

  #brand-page .brand-fv__description p {
    font-size: 16px !important;
  }

  /* #brand-page .brand-fv__tagline p {
    font-size: 16px !important;
  } */

  /* #brand-page .brand-worries__heading h2 {
    font-size: 40px !important;
  } */
}
/* ==================================================
   BRAND PAGE / TOP SPEC SYNC
   2026-09-24

   TOP基準
   - コンテンツ幅: width 90% / max-width 1000px
   - 主要ブレイクポイント: 770px
   - 共通タイポグラフィ変数を使用
   - FVは100dvh固定/coverをやめ、画像比率のまま表示
================================================== */

#brand-page {
  --wc-content-max: 1000px;
  --wc-content-width: 90%;
}

/* -------------------------
   FV：TOP同様、画像をトリミングしない
------------------------- */
#brand-page .brand-fv {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  background: #fff !important;
}

#brand-page .brand-fv__visual {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

#brand-page .brand-fv__visual picture,
#brand-page .brand-fv__visual img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

#brand-page .brand-fv__visual img {
  object-fit: contain !important;
  object-position: center top !important;
}

/* -------------------------
   共通コンテンツ幅
------------------------- */
#brand-page .brand-worries > .wrapper {
  width: var(--wc-content-width) !important;
  max-width: var(--wc-content-max) !important;
  margin-inline: auto !important;
}

#brand-page .brand-worries__grid {
  width: 100% !important;
  max-width: var(--wc-content-max) !important;
  margin-inline: auto !important;
}

/* -------------------------
   TYPOGRAPHY：TOPと共通
------------------------- */
#brand-page .brand-fv__eyebrow,
#brand-page .brand-worries__heading h2 {
  font-size: 32px !important;
  font-weight: 600 !important;
}

#brand-page .brand-fv__tagline p,
#brand-page .brand-fv__description p,
#brand-page .brand-fv__copy--sp .brand-fv__eyebrow,
#brand-page .brand-fv__copy--sp .brand-fv__tagline p {
  font-size: var(--top-16) !important;
}

#brand-page .brand-worry-card__btn {
  font-size: var(--top-20) !important;
  font-weight: 600 !important;
}

#brand-page .brand-breadcrumb {
  font-size: var(--top-small) !important;
}

/* -------------------------
   PC：3カラムはブランド固有仕様として維持
------------------------- */
@media (min-width: 1171px) {
  #brand-page .brand-worries__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 56px 24px !important;
  }
}

/* -------------------------
   TABLET：TOP同様 770pxまで横レイアウト維持
------------------------- */
@media (min-width: 771px) and (max-width: 1170px) {
  #brand-page .brand-worries > .wrapper {
    width: var(--wc-content-width) !important;
    max-width: var(--wc-content-max) !important;
  }

  #brand-page .brand-worries {
    padding: 80px 0 120px !important;
  }

  #brand-page .brand-worries__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 56px 24px !important;
    width: 100% !important;
  }

  #brand-page .brand-worry-card__btn {
    width: min(260px, 100%) !important;
    height: 60px !important;
  }
}

/* -------------------------
   SP：770px以下で1カラム
------------------------- */
@media (max-width: 770px) {
  #brand-page .brand-worries > .wrapper {
    width: var(--wc-content-width) !important;
    max-width: none !important;
  }

  #brand-page .brand-worries {
    min-height: 0 !important;
    padding: 64px 0 84px !important;
  }

  #brand-page .brand-worries__heading {
    margin-bottom: 40px !important;
    text-align: center !important;
  }

  #brand-page .brand-worries__heading h2 {
    font-size: var(--top-h1) !important;
    line-height: 1.3 !important;
    text-align: center !important;
  }

  #brand-page .brand-worries__heading-br--sp {
    display: none !important;
  }

  #brand-page .brand-worries__grid {
    grid-template-columns: 1fr !important;
    gap: 48px !important;
    width: 100% !important;
  }

  #brand-page .brand-worry-card,
  #brand-page .brand-worry-card__media {
    width: 100% !important;
    max-width: none !important;
  }

  #brand-page .brand-worry-card__btn {
    width: min(260px, 72vw) !important;
    height: 60px !important;
    margin-top: 24px !important;
    font-size: var(--top-20) !important;
    gap: 8px !important;
  }
}

/* -------------------------
   SP専用FVコピー：絶対配置と余白ハックを廃止
------------------------- */
@media (max-width: 560px) {
  #brand-page .brand-fv__copy-sp {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 44px 7% !important;
  }

  #brand-page .brand-worries {
    margin-top: 0 !important;
  }

  #brand-page .brand-fv__copy-sp p {
    font-size:15px !important;
    font-weight: 600;
  }
}

/* =========================================================
   WILL CLENS / BRAND TYPOGRAPHY FINAL
   ※ BRAND FV のフォントサイズは一切変更しない
   FVより下のコンテンツのみ共通 --top-* 基準へ統一
   レイアウト・余白・画像サイズは変更しない
   2026-09-25
========================================================= */

/* FVはノータッチ */

/* お悩みセクション */
#brand-page .brand-worries__heading h2 {
  font-size: var(--top-h1) !important;
  font-weight: 600 !important;
}

/* お悩みカード CTA */
#brand-page .brand-worry-card__btn,
#brand-page .brand-worry-card__btn .common-btn__text {
  font-size: var(--top-20) !important;
  font-weight: 600 !important;
}

/* =========================================================
   BRAND / WORRIES IMAGE CLICK FINAL
   2026-09-28

   ・固定背景画像なし
   ・オレンジCTAなし
   ・画像そのものをクリック
   ・450pxまでは2列
   ・449px以下で1列
========================================================= */

/* 固定背景画像を完全に無効化 */
#brand-page::before,
.brand-page::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* WORRIES背景も画像なし */
#brand-page .brand-worries {
  background: #fff !important;
  background-image: none !important;
}

/* カード自体を画像リンクとして扱う */
#brand-page .brand-worry-card {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  color: inherit !important;
  text-decoration: none !important;
}

/* 画像は正方形をそのまま表示 */
#brand-page .brand-worry-card__media {
  width: 100% !important;
  max-width: none !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
}

#brand-page .brand-worry-card__media img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;

  transition:
    opacity .3s ease,
    transform .3s ease !important;
}

/* ボタンはHTMLから消しているが、残っていても非表示 */
#brand-page .brand-worry-card__btn {
  display: none !important;
}

/* hover */
#brand-page .brand-worry-card:hover .brand-worry-card__media img {
  opacity: .86 !important;
  transform: scale(.99) !important;
}

#brand-page .brand-worry-card:active .brand-worry-card__media img {
  opacity: .78 !important;
  transform: scale(.985) !important;
}


/* PC：3列 */
@media (min-width: 771px) {
  #brand-page .brand-worries__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 40px 24px !important;
    width: 100% !important;
  }
}


/* 450px〜770px：2列 */
@media (min-width: 450px) and (max-width: 770px) {
  #brand-page .brand-worries__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 7% !important;
    row-gap: 34px !important;
    width: 100% !important;
  }

  #brand-page .brand-worry-card {
    width: 100% !important;
  }
}


/* 449px以下：1列 */
@media (max-width: 449px) {
  #brand-page .brand-worries__grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    width: 100% !important;
  }

  #brand-page .brand-worry-card {
    width: min(100%, 320px) !important;
    margin-inline: auto !important;
  }
}

/* =========================================================
   BRAND FV COPY OVERFLOW FIX - FINAL
   2026-09-28

   原因：
   561〜770px付近ではPC用コピーがFV画像上に残り、
   ロゴ＋タグライン＋説明文の総高さがFVの高さを超えて
   下端へ潜り込むことがある。

   対策：
   770px以下はSP用コピー構成へ早めに切り替える。
   ・FV上：BRAND / ロゴ / タグライン
   ・FV下：説明文
========================================================= */

@media (max-width: 770px) {

  /* PCコピーは使わない */
  #brand-page .brand-fv__copy--pc {
    display: none !important;
  }

  /* SPコピーをFV上に表示 */
  #brand-page .brand-fv__copy--sp {
    display: block !important;

    position: absolute !important;
    top: 18% !important;
    left: 50% !important;

    width: 88% !important;
    max-width: 520px !important;

    margin: 0 !important;

    transform: translateX(-50%) !important;

    color: #555 !important;
    text-align: center !important;

    z-index: 3 !important;
  }

  #brand-page .brand-fv__copy--sp .brand-fv__eyebrow {
    margin: 0 0 14px !important;
    font-size: clamp(18px, 4.2vw, 26px) !important;
    line-height: 1 !important;
  }

  #brand-page .brand-fv__copy--sp .brand-fv__logo {
    margin: 0 !important;
  }

  #brand-page .brand-fv__copy--sp .brand-fv__logo img {
    display: block !important;

    width: min(72vw, 420px) !important;
    max-width: 100% !important;
    height: auto !important;

    margin-inline: auto !important;
  }

  #brand-page .brand-fv__copy--sp .brand-fv__tagline {
    gap: 10px !important;
    margin-top: 14px !important;
  }

  #brand-page .brand-fv__copy--sp .brand-fv__tagline span {
    width: clamp(34px, 8vw, 58px) !important;
  }

  #brand-page .brand-fv__copy--sp .brand-fv__tagline p {
    margin: 0 !important;
    font-size: clamp(10px, 2.2vw, 15px) !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
  }

  /* 説明文はFV下へ出す */
  #brand-page .brand-fv__copy-sp {
    display: flex !important;

    position: relative !important;
    top: auto !important;
    left: auto !important;

    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 0 !important;

    padding: 34px 7% !important;

    background: #4fa5d0 !important;

    color: #fff !important;
    text-align: center !important;

    z-index: 2 !important;
  }

  #brand-page .brand-fv__copy-sp p {
    margin: 0 !important;

    font-size: clamp(13px, 2.4vw, 15px) !important;
    font-weight: 600 !important;
    line-height: 1.8 !important;
  }

  /* 以前の余白ハックを無効化 */
  #brand-page .brand-worries {
    margin-top: 0 !important;
  }
}


/* 560px以下はさらに少しコンパクト */
@media (max-width: 560px) {

  #brand-page .brand-fv__copy--sp {
    top: 17% !important;
    width: 90% !important;
  }

  #brand-page .brand-fv__copy--sp .brand-fv__logo img {
    width: min(76vw, 310px) !important;
  }

  #brand-page .brand-fv__copy-sp {
    padding: 30px 7% !important;
  }

  #brand-page .brand-fv__copy-sp p {
    font-size: 14px !important;
  }
}