@charset "UTF-8";

/* PCページ専用：credit
 * このファイルを直接編集します。追加の上書き用CSSは作成しません。
 * ページ範囲は :where() で限定し、既存の詳細度を保持しています。
 */

:where(html[data-pc-page="credit"]) .pc-credit-page {
  margin-top: 18px !important;
  font-family: "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color: var(--ui-pc-base-text-variant-17) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page * {
  box-sizing: border-box;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-two-column-layout {
  grid-template-columns: 810px 332px !important;
  gap: 18px !important;
  align-items: start !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-left-column {
  width: 810px !important;
  gap: 18px !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-right-column {
  width: 332px !important;
  gap: 18px !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-left-column>.pc-section {
  width: 810px !important;
  max-width: 810px !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-right-column>.pc-section {
  width: 332px !important;
  max-width: 332px !important;
  box-sizing: border-box !important;
}

:where(html[data-pc-page="credit"]) .credit-hero {
  display: grid;
  grid-template-columns: minmax(0,1fr) 305px;
  min-height: 244px;
  padding: 0;
  overflow: hidden;
  border-top: 3px solid var(--ui-pc-tone-credit-credit-hero-border-top-56c6e, var(--ui-pc-base-border-variant-29)) !important;
  background: var(--ui-pc-base-bg-variant-12);
}

:where(html[data-pc-page="credit"]) .credit-hero-copy {
  padding: 27px 30px 25px;
}

:where(html[data-pc-page="credit"]) .credit-kicker {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--ui-pc-tone-credit-credit-kicker-color-4b2c1, var(--ui-pc-base-text-variant-6));
  font: 700 10px/1 Arial,sans-serif;
  letter-spacing: .18em;
}

:where(html[data-pc-page="credit"]) .credit-hero h1 {
  margin: 0 0 14px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--ui-pc-tone-credit-credit-hero-h1-border-bottom-e6e49, var(--ui-pc-base-border-variant-14));
  color: var(--ui-pc-base-text-variant-18);
  font-family: "Yu Mincho","Hiragino Mincho ProN",serif;
  font-size: 27px;
  line-height: 1.25;
  letter-spacing: .04em;
}

:where(html[data-pc-page="credit"]) .credit-hero-copy>p {
  margin: 0;
  color: var(--ui-pc-base-text-variant-19);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.95;
}

:where(html[data-pc-page="credit"]) .credit-hero-note {
  margin-top: 16px;
  padding: 10px 12px;
  border-left: 3px solid var(--ui-pc-tone-credit-credit-hero-note-border-left-3cc4b, var(--ui-pc-base-border-variant-29));
  background: var(--ui-pc-tone-credit-credit-hero-note-background-d2ee3, var(--ui-pc-base-bg-variant-9));
  color: var(--ui-pc-base-text-variant-20);
  font-size: 12px;
  line-height: 1.75;
}

:where(html[data-pc-page="credit"]) .credit-hero-note span {
  display: inline-block;
  margin-right: 9px;
  color: var(--ui-pc-tone-credit-credit-hero-note-span-color-43a70, var(--ui-pc-base-text-variant-6));
  font-weight: 700;
}

:where(html[data-pc-page="credit"]) .credit-card-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 24px 18px;
  border-left: 1px solid var(--ui-pc-tone-credit-credit-card-visual-border-left-d92c6, var(--ui-pc-card-border-variant-4));
  background: linear-gradient(145deg,var(--ui-pc-card-bg-variant-6) 0%,var(--ui-pc-card-bg-variant-22) 100%);
}

:where(html[data-pc-page="credit"]) .credit-card-visual>span {
  margin-bottom: 13px;
  color: var(--ui-pc-tone-credit-credit-card-visual-span-color-a6014, var(--ui-pc-card-text-variant-15));
  font: 700 9px/1 Arial,sans-serif;
  letter-spacing: .15em;
}

:where(html[data-pc-page="credit"]) .credit-card-visual img {
  display: block;
  width: 250px;
  height: auto;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ui-pc-card-border-variant-22);
  border-radius: 3px;
  background: var(--ui-pc-card-bg);
}

:where(html[data-pc-page="credit"]) .credit-card-visual small {
  margin-top: 9px;
  color: var(--ui-pc-card-text-variant-20);
  font-size: 10px;
  line-height: 1.3;
}

:where(html[data-pc-page="credit"]) .credit-flow-section {
  padding: 14px 15px 17px;
  background: var(--ui-pc-base-bg-variant-12);
}

:where(html[data-pc-page="credit"]) .credit-notice-section {
  padding: 14px 15px 17px;
  background: var(--ui-pc-message-bg-variant-2);
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-left-column .pc-section-head {
  height: 53px;
  margin: 0 0 12px;
  padding: 0 2px 9px;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-left-column .pc-section-head h2 {
  font-size: 20px;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-left-column .pc-section-en {
  font-size: 10px;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-left-column .pc-section-note {
  font-size: 11px;
}

:where(html[data-pc-page="credit"]) .credit-steps {
  position: relative;
  border: 1px solid var(--ui-pc-tone-credit-credit-steps-border-e99de, var(--ui-pc-base-border-variant-14));
  background: var(--ui-pc-base-bg-variant-12);
}

:where(html[data-pc-page="credit"]) .credit-step {
  display: grid;
  grid-template-columns: 82px minmax(0,1fr);
  min-height: 145px;
  border-bottom: 1px solid var(--ui-pc-tone-credit-credit-step-border-bottom-bd927, var(--ui-pc-base-border-variant-14));
}

:where(html[data-pc-page="credit"]) .credit-step-last {
  border-bottom: 0;
}

:where(html[data-pc-page="credit"]) .credit-step-no {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--ui-pc-tone-credit-credit-step-no-border-right-10e05, var(--ui-pc-base-border-variant-14));
  background: linear-gradient(180deg,var(--ui-pc-tone-credit-credit-step-no-background-ab019, var(--ui-pc-base-bg-variant-9)) 0%,var(--ui-pc-base-bg-variant-12) 100%);
  color: var(--ui-pc-tone-credit-credit-step-no-color-ee63d, var(--ui-pc-base-text-variant-6));
}

:where(html[data-pc-page="credit"]) .credit-step-no small {
  margin-bottom: 3px;
  font: 700 9px/1 Arial,sans-serif;
  letter-spacing: .12em;
}

:where(html[data-pc-page="credit"]) .credit-step-no strong {
  font: 500 38px/1 "Yu Mincho","Hiragino Mincho ProN",serif;
}

:where(html[data-pc-page="credit"]) .credit-step-body {
  position: relative;
  padding: 20px 23px 19px;
}

:where(html[data-pc-page="credit"]) .credit-step-en {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-pc-tone-credit-credit-step-en-color-2e970, var(--ui-pc-base-text-variant-6));
  font: 700 9px/1 Arial,sans-serif;
  letter-spacing: .14em;
}

:where(html[data-pc-page="credit"]) .credit-step h3 {
  margin: 0 0 10px;
  color: var(--ui-pc-base-text-variant-21);
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: .03em;
}

:where(html[data-pc-page="credit"]) .credit-step p {
  margin: 0;
  color: var(--ui-pc-base-text-variant-22);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.9;
}

:where(html[data-pc-page="credit"]) .credit-step p strong {
  color: var(--ui-pc-tone-credit-credit-step-p-strong-color-7da7e, var(--ui-pc-base-text-variant-6));
  font-weight: 700;
}

:where(html[data-pc-page="credit"]) .credit-step-card {
  display: inline-block;
  margin-top: 12px;
  padding: 7px 10px;
  border: 1px solid var(--ui-pc-card-border-variant-23);
  border-radius: 3px;
  background: var(--ui-pc-card-bg);
}

:where(html[data-pc-page="credit"]) .credit-step-card img {
  display: block;
  width: 250px;
  height: auto;
}

:where(html[data-pc-page="credit"]) .credit-security-note {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 12px;
  padding: 15px 17px;
  border: 1px solid var(--ui-pc-base-border-variant-30);
  background: var(--ui-pc-base-bg-variant-9);
}

:where(html[data-pc-page="credit"]) .credit-security-mark {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ui-pc-base-bg-variant-19);
  color: var(--ui-pc-base-text-variant-8);
  font-size: 19px;
  font-weight: 700;
}

:where(html[data-pc-page="credit"]) .credit-security-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ui-pc-base-text-variant-23);
  font-size: 14px;
  line-height: 1.4;
}

:where(html[data-pc-page="credit"]) .credit-security-note p {
  margin: 0;
  color: var(--ui-pc-base-text-variant-24);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.75;
}

:where(html[data-pc-page="credit"]) .credit-notice-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

:where(html[data-pc-page="credit"]) .credit-notice-list li {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr);
  align-items: center;
  min-height: 46px;
  border: 1px solid var(--ui-pc-message-border);
  background: var(--ui-pc-message-bg-variant-2);
}

:where(html[data-pc-page="credit"]) .credit-notice-list li>span {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-right: 1px solid var(--ui-pc-message-border-variant-2);
  background: var(--ui-pc-message-bg-variant-3);
  color: var(--ui-pc-message-text);
  font: 700 10px/1 Arial,sans-serif;
}

:where(html[data-pc-page="credit"]) .credit-notice-list p {
  margin: 0;
  padding: 9px 13px;
  color: var(--ui-pc-message-text-variant-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.65;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-right-column .pc-section-head {
  box-sizing: border-box;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-side-recruit>.pc-section-head {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-group-shops .pc-section-head {
  margin-bottom: 10px !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-left-column > .credit-flow-section > .pc-section-head {
  width: calc(100% + 30px) !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
  padding-left: 17px !important;
  padding-right: 17px !important;
  box-sizing: border-box !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-left-column > .credit-notice-section > .pc-section-head {
  width: calc(100% + 30px) !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
  padding-left: 17px !important;
  padding-right: 17px !important;
  box-sizing: border-box !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-section-head .pc-section-note {
  color: var(--ui-pc-heading-text-variant-4) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-section-head > a {
  color: var(--ui-pc-heading-text-variant-4) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-hero {
  border-top-color: var(--ui-pc-base-border-variant-31) !important;
  background: var(--ui-pc-base-bg-variant-12) !important;
  box-shadow: 0 3px 12px var(--ui-pc-base-shadow-variant-12) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-kicker {
  color: var(--ui-pc-base-text-variant-15) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-hero h1 {
  border-bottom-color: var(--ui-pc-base-border-variant-32) !important;
  color: var(--ui-pc-base-text-variant-25) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-hero-copy>p {
  color: var(--ui-pc-base-text-variant-26) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-hero-note {
  border-left-color: var(--ui-pc-base-border-variant-33) !important;
  background: var(--ui-pc-base-bg-variant-20) !important;
  color: var(--ui-pc-base-text-variant-27) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-hero-note span {
  color: var(--ui-pc-base-text-variant-28) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-card-visual {
  border-left-color: var(--ui-pc-card-border-variant-24) !important;
  background: linear-gradient(145deg,var(--ui-pc-card-bg-variant-23) 0%,var(--ui-pc-card-bg-variant-10) 100%) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-card-visual>span {
  color: var(--ui-pc-card-text-variant-14) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-card-visual img {
  border-color: var(--ui-pc-card-border-variant-19) !important;
  background: var(--ui-pc-card-bg) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-card-visual small {
  color: var(--ui-pc-card-text-variant-21) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-steps {
  border-color: var(--ui-pc-base-border-variant-34) !important;
  background: var(--ui-pc-base-bg-variant-12) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-step {
  border-bottom-color: var(--ui-pc-base-border-variant-32) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-step-no {
  border-right-color: var(--ui-pc-base-border-variant-34) !important;
  background: linear-gradient(180deg,var(--ui-pc-base-bg-variant-11) 0%,var(--ui-pc-base-bg-variant-21) 100%) !important;
  color: var(--ui-pc-base-text-variant-8) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-step-en {
  color: var(--ui-pc-base-text-variant-15) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-step h3 {
  color: var(--ui-pc-base-text-variant-29) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-step p {
  color: var(--ui-pc-base-text-variant-30) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-step p strong {
  color: var(--ui-pc-base-text-variant-28) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-step-card {
  border-color: var(--ui-pc-card-border-variant-25) !important;
  background: var(--ui-pc-card-bg) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-security-note {
  border-color: var(--ui-pc-base-border-variant-35) !important;
  background: var(--ui-pc-base-bg-variant-22) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-security-mark {
  background: linear-gradient(180deg,var(--ui-pc-base-bg-variant-16) 0%,var(--ui-pc-base-bg-variant-23) 100%) !important;
  color: var(--ui-pc-base-text-variant-8) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-security-note strong {
  color: var(--ui-pc-base-text-variant-25) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-security-note p {
  color: var(--ui-pc-base-text-variant-31) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-notice-list li {
  border-color: var(--ui-pc-message-border-variant-3) !important;
  background: var(--ui-pc-message-bg-variant-2) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-notice-list li>span {
  border-right-color: var(--ui-pc-message-border-variant-4) !important;
  background: var(--ui-pc-message-bg-variant-4) !important;
  color: var(--ui-pc-message-text-variant-3) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .credit-notice-list p {
  color: var(--ui-pc-message-text-variant-4) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-right-column > .pc-newface-section > .pc-section-head {
  width: calc(100% + 20px) !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .pc-right-column > .pc-event-section > .pc-section-head {
  width: calc(100% + 20px) !important;
  margin-left: -10px !important;
  margin-right: -10px !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-side-recruit > .pc-section-head {
  box-sizing: border-box !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-side-recruit-copy {
  border-top-color: var(--ui-pc-base-border-variant-36) !important;
  background: linear-gradient(180deg,var(--ui-pc-base-bg-variant-12) 0%,var(--ui-pc-base-bg-variant-24) 100%) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-side-recruit-copy small {
  color: var(--ui-pc-base-text-variant-15) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-side-recruit-copy strong {
  color: var(--ui-pc-base-text-variant-32) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-side-recruit-copy>span {
  color: var(--ui-pc-base-text-variant-33) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-side-recruit-copy b {
  background: var(--ui-pc-recruit-link-bg, linear-gradient(90deg,var(--ui-pc-base-bg-variant-11) 0%,var(--ui-pc-base-bg-variant-16) 100%)) !important;
  color: var(--ui-pc-base-text-variant-8) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-group-shops {
  padding: 14px 15px 16px !important;
  background: var(--ui-pc-footer-bg-variant-5) !important;
}

:where(html[data-pc-page="credit"]) .pc-credit-page .schedule-group-shops > .pc-section-head {
  width: calc(100% + 30px) !important;
  margin-left: -15px !important;
  margin-right: -15px !important;
  padding-left: 17px !important;
  padding-right: 17px !important;
  box-sizing: border-box !important;
}