/*
 * 11 月キャンペーンのページ `/campaign/`（MK-5126・案 A 固定ページ）の専用の見た目。
 *
 * 🚨 **移行元 `public/campaign/assets/css/style.css`（旧サイト dev ab3b7930e）の写しで、値を 1 つも書き換えていない。**
 * 移行元が変わったら作り直す。直しはこのファイルに書かず、別のファイルを後に読む（`campaign-20th-fixes.css` と同じ型）。
 * 規則はすべて `.page-content--campaign`・`.page-campaign`・`.campaign__cta-wrap` の下に在り、
 * 固定ページ `campaign` でだけ読む（`inc/campaign-nov.php`）。CSS の中に `url()` の参照は無い.
 */

@charset "utf-8";

.page-content--campaign .page-content__body :is(.page-campaign, .cta) {
    --main-color: #f54851;
    --sub-color: #009bd3;
    --base-color: #fff6ec;
}
.page-content--campaign .page-content__body {
	--pa-campaign-rem: 2.5445292621vw;
}

@media screen and (min-width: 750px) {
	.page-content--campaign .page-content__body {
		--pa-campaign-rem: 10px;
	}
}

@media screen and (min-width: 750px) {
  .page-content--campaign .page-content__body {
      --pa-campaign-rem: 10px;
  }
}
@media screen and (min-width: 750px) {
  .pa-breadcrumb {
    max-width: 1100px;
  }
}
@media(max-width:749px){
    .pa-breadcrumb {
      max-width: 100%;
      padding: 0 10px;
    }
}

/* ==========================================
   ページタイトル
   ========================================== */
.page-content--campaign .page-content__body .page-campaign .page-title {
  padding: 64px 0;
  text-align: center;
}

.page-content--campaign .page-content__body .page-campaign .page-title__heading {
  position: relative;
  display: inline-block;

  /* 見出し自体の余計な余白を削除 */
  margin: 0;

  /* 文字と下線の間隔 */
  padding-top: 0;
  padding-bottom: clamp(
    calc(2.4 * var(--pa-campaign-rem)),
    1.1034vw + calc(1.9862 * var(--pa-campaign-rem)),
    calc(3.2 * var(--pa-campaign-rem))
  );

  /* 文字設定 */
  font-size: clamp(
    calc(3.2 * var(--pa-campaign-rem)),
    2.4828vw + calc(2.269 * var(--pa-campaign-rem)),
    calc(5 * var(--pa-campaign-rem))
  );
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.05em;
  line-height: 1.25;
}

.page-content--campaign .page-content__body .page-campaign .page-title__heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;

  /* 下線のサイズ */
  width: clamp(
    calc(8 * var(--pa-campaign-rem)),
    5.5172vw + calc(5.931 * var(--pa-campaign-rem)),
    calc(12 * var(--pa-campaign-rem))
  );
  height: 2px;
  background-color: var(--main-color);
  transform: translateX(-50%) scaleX(1);
  transform-origin: center;
}
@media(max-width:749px){
  .page-content--campaign .page-content__body .page-campaign .page-title {
    padding: 40px 0 32px;
    text-align: center;
  }
}
/* ============================================================
   .page-content--campaign 固有
   ============================================================ */
@media screen and (min-width: 750px) {
  .page-content--campaign .page-content__body .page-campaign .content-wrap {
    max-width: 900px;
    margin: 0 auto;
  }
}

.page-campaign .content-wrap, .campaign-content * {box-sizing:border-box;}
.page-campaign .content-wrap {max-width:900px;margin:0 auto;color:#333;line-height:1.7;background:#fff; }
.page-campaign .content-wrap .campaign-hero img {display: block;margin: 0 auto 50px;}
.page-campaign .content-wrap p {margin:0 0 1em;}
.page-campaign .content-wrap .campaign-content .campaign-transfer-banner {display:block;width:100%;height:auto;}
.page-campaign .content-wrap .campaign-section {margin-top:28px;}
.page-campaign .content-wrap .campaign-heading {font-size:20px;font-weight:700;line-height:1.5;margin:0 0 5px;color:#474747;}
.page-campaign .content-wrap .campaign-lead {font-size:18px;line-height:1.5;margin-bottom:20px;}
.page-campaign .content-wrap .campaign-notes {font-size:14px;line-height:1.6;font-weight: 400;}
.page-campaign .content-wrap .campaign-notes p {margin:0 0 15px;}
.page-campaign .content-wrap .campaign-booking {display:flex;align-items:center;justify-content:center;position:relative;max-width:400px;min-height:74px;margin:40px auto 56px;padding:12px 48px;border-radius:50px;background:#fa4354;color:#fff;text-align:center;text-decoration:none;font-size:18px;font-weight:700;}
.page-campaign .content-wrap .campaign-booking::after {content:'›';position:absolute;right:18px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fff;color:#fa4354;font-size:28px;font-weight:400;line-height:1;}
.page-campaign .content-wrap .campaign-transfer {margin-top:0;}
.page-campaign .content-wrap .campaign-transfer-text {margin:20px 0 30px;font-size:16px;}
.page-campaign .content-wrap .campaign-disclaimer {font-size:14px;line-height:1.7;margin-top:28px;}


@media(max-width:749px){
 .page-campaign .content-wrap {width:100%;padding:0 20px 25px;border-width:2px;}
 .page-campaign .content-wrap .campaign-section {margin-top:26px;}
.page-campaign .content-wrap .campaign-hero img {display: block;margin: 0 auto 30px;}
 .page-campaign .content-wrap .campaign-heading {font-size:16px;}
 .page-campaign .content-wrap .campaign-lead {font-size:16px;font-weight:400;}
 .page-campaign .content-wrap .campaign-notes {font-size:14px;line-height:1.65;}
 .page-campaign .content-wrap .campaign-notes p {margin-bottom:13px;}
 .page-campaign .content-wrap .campaign-booking {max-width:100%;min-height:56px;margin:30px 14px 44px;font-size:14px;}
 .page-campaign .content-wrap .campaign-booking::after {width:23px;height:23px;right:12px;font-size:23px;}
 .page-campaign .content-wrap .campaign-transfer-text {font-size:14px;margin:18px 0 22px;}
 .page-campaign .content-wrap .campaign-disclaimer {font-size:14px;}
}

/* リニューアルトップCSSからCTAボタンCSS転載使用　*/
.page-campaign .campaign__cta-wrap {
  margin: 60px auto 100px;
}
.campaign__cta-wrap {
  text-align: center;
}
/* JSは監視登録できた要素だけを非表示にする。JS無効時はすべて表示。 */
.campaign-reveal.is-pending {
  opacity: 0;
  transform: translateY(18px);
}
.campaign-reveal {
  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.campaign__cta-wrap .arrow-circle {
  fill: currentColor;
}
.campaign__cta-wrap .arrow-path {
  stroke: #fff;
  fill: none;
}
.campaign__cta-wrap .more-button {
  margin: 0 auto;
  display: grid;
  place-items: center;
  height: 80px;
  font-weight: 700;
  font-size: 21px;
  padding-inline: 2em 3.5em;
  width: 40%;
  text-align: center;
  background-color: #fff;
  border: 2px solid #f54851;
  color: #f54851;
  border-radius: 2em;
  position: relative;
  line-height: 1.2;
  text-decoration: none;
}
.campaign__cta-wrap .more-button svg {
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translateY(-50%);
}
.campaign__cta-wrap .more-button.reverse {
  background-color: #f54851;
  border: 2px solid #fff;
  color: #fff;
}
.campaign__cta-wrap .more-button.reverse .arrow-path {
  stroke: #f54851;
}
@media(max-width:749px){
  .page-campaign .campaign__cta-wrap {
    margin: 40px auto 50px;
  }
  .campaign__cta-wrap .more-button {
    display: grid;
    place-items: center;
    height: 60px;
    font-weight: 700;
    font-size: 21px;
    padding-inline: 2em 3.5em;
    width: 66%;
    text-align: center;
    background-color: #fff;
    border: 2px solid #f54851;
    color: #f54851;
    border-radius: 2em;
    position: relative;
    line-height: 1.2;
    text-decoration: none;
  }
}
@media (hover: hover) {
  .campaign__cta-wrap .more-button:hover {
    background-color: #f54851;
    color: #fff;
  }
  .campaign__cta-wrap .more-button:hover .arrow-path {
    stroke: #f54851;
  }
  .campaign__cta-wrap .more-button.reverse:hover {
    background-color: #fff;
    border: 2px solid #f54851;
    color: #f54851;
  }
  .campaign__cta-wrap .more-button.reverse:hover .arrow-path {
    stroke: #fff;
  }
}

.page_top {
	float:none;
	margin:0 auto;
	width:1100px;
	padding:0 0 0;
	text-align:right;
	clear:both;
  background-color: #fff;
}
.page-gotop {
  background-color: #fff;
}
.page_top
  Specificity: (0,1,0)
 {
    margin: 0 auto 30px;
    width: 11.875%;
}
.page-gotop__inner {
    padding: 0 0 3em;
    display: grid;
    justify-content: center;
    margin: auto;
}
@media screen and (min-width: 769px) {
  .page-gotop__inner {
      justify-content: end;
    max-width: 1100px;
     margin: auto;
    }
}
@media screen and (max-width: 768px) {
  .page-gotop__inner {
      justify-content:center
    }
  .page-gotop__inner img {
      width: 38px;
      height: auto;
    }
}