@charset "UTF-8";

.u-radius-tr--green-white {
  position: relative;
}

.u-radius-tr--green-white::before,
.u-radius-tr--green-white::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  pointer-events: none;
}

.u-radius-tr--green-white::before {
  background-color: var(--color-white);
}

.u-radius-tr--green-white::after {
  background-color: var(--color-green-1);
  border-top-right-radius: 80px;
}

@media (max-width: 767px) {
  .u-radius-tr--green-white::before,
  .u-radius-tr--green-white::after {
    width: 56px;
    height: 56px;
  }
}

#visa-debitcard {
  position: relative;
}

#visa-debitcard .c-heading--h1 {
  margin-top: 0;
}

/* お知らせ　セクション */
.p-info-section {
  padding-top: 24px;
  padding-bottom: 56px;
}

.p-info-section .c-accordion-group {
  border-color: var(--color-red-2);
}

.p-info-section .c-accordion-trigger {
  border: none;
  background-color: var(--color-light-red);
}

.p-info-section .c-accordion-trigger__text {
  color: var(--color-red-2);
}

.p-info-section .c-accordion-trigger::before {
  background-color: var(--color-red-2);
}

@media (hover: hover) {
  .p-info-section .c-accordion-trigger:hover::before,
  .p-info-section .c-accordion-group.is-active>.c-accordion-trigger:hover::before {
    background-color: var(--color-white);
  }
  .p-info-section .c-accordion-trigger:hover::after,
  .p-info-section .c-accordion-group.is-active>.c-accordion-trigger:hover::after {
    background-color: var(--color-red-2);
  }
}

@media (max-width: 767px) {
  .p-info-section {
    padding-top: 34px;
    padding-bottom: 40px;
  }
  .p-info-section .c-accordion-content__inner {
    padding: 24px;
  }
}

/* KV　セクション */
.p-kv-wrapper {
  min-height: 500px;
  flex-wrap: nowrap;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: center;
  padding-left: clamp(1.5rem, 5.952vw + -1.357rem, 4rem);
  background: url('/assets/images/pages/personal/service/visa_debitcard/bg-kv-pc.jpg') center no-repeat;
  background-size: cover;
  border-radius: 30px;
  position: relative;
}

.p-kv-image {
  flex: 0 1 498px;
  max-width: 498px;
  padding-right: 16px;
  align-self: flex-start;
}

.p-kv-contents {
  flex: 0 1 744px;
  padding-block: 32px;
  margin-right: -40px;
}

.p-kv-title {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: var(--font-family-secondary);
  color: var(--color-primary);
}

.p-kv-title .is-labelgroup {
  display: inline-flex;
  align-items: baseline;
}

.p-kv-title .is-small1 {
  font-size: 3.25rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-xs);
  letter-spacing: var(--ls-p4);
}

.p-kv-title .is-small2 {
  font-size: 3.5rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-xs);
  letter-spacing: var(--ls-p4);
}

.p-kv-title .is-small3 {
  font-size: 3.5rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-xs);
  letter-spacing: var(--ls-p4);
}

.p-kv-title .is-large {
  font-size: 4.8125rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-xs);
  letter-spacing: var(--ls-p4);
}

.p-kv-text {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-n1);
  color: var(--color-primary);
  line-height: 1.7;
  margin-top: 24px;
}

.p-kv-card {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 174px), 174px));
  width: 100%;
  padding-left: 0;
  margin-top: 32px;
}

.p-kv-card__item {
  max-width: 174px;
  padding: 18px 12px;
  background-color: var(--color-white);
  border-radius: 20px;
  margin-bottom: 0;
}

.p-kv-card__contents {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  height: 100%;
}

.p-kv-card__image {
  display: flex;
  justify-content: center;
}

.p-kv-card__label {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
}

@media (max-width: 1023px) {
  .p-kv-wrapper {
    min-height: auto;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 0 16px 32px;
    background: url('/assets/images/pages/personal/service/visa_debitcard/bg-kv-sp.jpg') center no-repeat;
    background-size: cover;
    border-radius: 20px;
  }
  .p-kv-image {
    align-self: center;
    flex: 0 1 auto;
    padding-right: 0;
    margin-block-end: -16px;
  }
  .p-kv-contents {
    flex: 0 1 auto;
    padding-block: 0;
    margin-right: 0;
  }
  .p-kv-heading {
    max-width: 364px;
    margin-inline: auto;
  }
  .p-kv-title .is-labelgroup {
    justify-content: flex-start;
    justify-items: flex-start;
  }
  .p-kv-title .is-small1,
  .p-kv-title .is-small2,
  .p-kv-title .is-small3 {
    font-size: clamp(2rem, 14.545vw + -0.909rem, 2.5rem);
    line-height: 1.2;
    white-space: nowrap;
  }
  .p-kv-title .is-large {
    font-size: clamp(3rem, 14.545vw + 0.091rem, 3.5rem);
    line-height: 1.2;
    white-space: nowrap;
  }
  .p-kv-text {
    font-size: var(--fs-15);
    letter-spacing: var(--ls-p4);
    margin-top: 10px;
  }
  .p-kv-text .sp-hidden {
    display: block !important;
  }
  .p-kv-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 24px;
  }
  .p-kv-card__item {
    flex: 1 1 calc(50% - 16px);
    max-width: auto;
    padding: 16px 7px;
    border-radius: 10px;
  }
  .p-kv-card__contents {
    gap: 8px;
  }
  .p-kv-card__label {
    font-size: clamp(0.75rem, 3.636vw + 0.023rem, 0.875rem);
  }
}

@media screen and (max-width: 767px) {
  .p-kv-text .sp-hidden {
    display: none !important;
  }
}


/* CTAセクション */
.p-ctabox-section .c-cta-box {
  padding-bottom: 32px;
}

@media (max-width: 767px) {
  .p-ctabox-section {
    padding-bottom: 0;
    margin-bottom: -20px;
    position: relative;
    z-index: 1;
  }
  .p-ctabox-section::before,
  .p-ctabox-section::after {
    display: none;
  }
  .p-ctabox-section .l-container {
    padding-left: 0;
    padding-right: 0;
  }
  .p-ctabox-section .c-cta-box {
    padding-top: 40px;
  }
  .p-ctabox-section .c-cta-box .c-cta-box__inner {
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .p-debitcard-section {
    border-top-right-radius: 0;
  }
  .p-debitcard-section .u-radius-bl {
    padding-bottom: 56px !important;
  }
  .p-debitcard-section::before,
  .p-debitcard-section::after {
    display: none;
  }
}

/* アンカーナビ */

@media (max-width: 767px) {
  .p-anchor-section .c-anchor-links__list {
    gap: 8px 14px;
  }
  .p-anchor-section .c-anchor-card {
    padding: 4px 0 4px 20px;
  }
}

/* Visaデビットカードのある快適な生活　セクション */
.p-comfort-section .c-point-box__common {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.p-comfort-section .c-point-box__head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 68px;
}

.p-comfort-section .c-point-box__title {
  margin-top: 0;
}

.p-comfort-section .c-point-box__image img {
  max-height: 135px;
}
.p-comfort-section .c-point-box__text {
  flex: 0 1 100%;
}

.p-comfort-section .c-point-box .c-point-box__text {
  margin-top: 20px;
}

@media (max-width: 1023px) {
  .p-comfort-section .l-row--4>.l-col {
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

@media (max-width: 767px) {
  .p-comfort-section {
    padding-top: 56px !important;
  }
  .p-comfort-section .l-row--4>.l-col {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .p-comfort-section .c-point-box__head {
    min-height: auto;
  }
  .p-comfort-section .c-point-box {
    padding: 24px;
  }
  .p-comfort-section .c-point-box__common {
    height: auto;
  }
  .p-comfort-section .c-point-box__title {
    font-size: var(--fs-20);
  }
  .p-comfort-section .c-point-box__image {
    width: 100%;
  }
  .p-comfort-section .c-point-box__image img {
    max-height: 104px;
  }
}

/* チェックマーク */
.p-checkmark-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding-left: 0;
}

.p-checkmark-list__item {
  flex: 0 1 auto;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-lg);
  color: var(--color-black);
}

.p-checkmark-list__item::before {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  content: '';
  width: 16px;
  height: 16px;
  background: url('/assets/images/pages/personal/service/visa_debitcard/icon_checkmark.svg') center no-repeat;
  background-size: contain;
  transform: translateY(7px);
}

@media (max-width: 767px) {
  .p-checkmark-list__item {
    font-size: var(--fs-14);
  }
  .p-checkmark-list__item::before {
    transform: translateY(5px);
  }
}

/* デビットカードと現金とクレジットカードの比較　セクション */

@media (max-width: 767px) {
  #visa-debitcard .p-comparison-section {
    padding-top: 56px !important;
    padding-bottom: 0 !important;
  }
  .p-comparison-section .scroll-hint-icon {
    top: 50%;
    transform: translateY(-50%);
  }
  .p-comparison-section .c-data-table {
    min-width: 720px;
  }
}

/* 使い方　セクション */
.p-howto-notice {
  padding: 32px;
  background-color: var(--color-light-red);
  border: 1px solid var(--color-red-1);
  border-radius: 10px;
  position: relative;
  z-index: 1;
}

.p-howto-notice__title {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: var(--ls-p4);
  color: var(--color-red-2);
}

.p-howto-notice .c-list--disc>.c-list__item::before {
  background-color: var(--color-red-2);
}

@media (max-width: 767px) {
  .p-howto-section .u-radius-bl {
    padding-bottom: 56px !important;
  }
  .p-howto-notice {
    padding: 32px 20px;
  }
  .p-howto-notice__title {
    font-size: var(--fs-20);
  }
  .p-howto-notice .c-list--disc>.c-list__item::before {
    top: 10px;
  }
}

.p-apply-flow-step__icon {
  flex: 0 0 168px;
  width: 168px;
  height: 168px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: 50%;
}

.p-apply-flow-step__icon img {
  max-width: 120px;
  height: auto;
}

.p-apply-flow-table .c-data-table__header {
  line-height: var(--lh-md);
}

.p-apply-flow-table .c-data-table__data {
  text-align: center;
  font-weight: var(--fw-bold);
  line-height: var(--lh-lg);
}

.p-apply-flow-table .c-data-table__data span {
  display: inline-block;
  line-height: var(--lh-md);
}

.p-apply-flow-table .c-data-table__data img {
  margin-inline: auto;
}

.p-apply-flow-table .p-apply-flow-table__th {
  width: 33.3%;
}

.p-apply-flow-table .p-apply-flow-table__td--type1 {
  color: #028391;
}

.p-apply-flow-table .p-apply-flow-table__td--type2 {
  color: #D93365;
}

@media (max-width: 767px) {
  .p-apply-flow-step__icon {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 104px;
    height: 104px;
    align-self: center;
    flex: unset;
    order: unset;
  }
  .p-apply-flow-step__icon img {
    width: 80px;
    height: 80px;
  }
}

/* 商品概要　セクション */
.p-overview-section .c-data-table tr:has([rowspan]) [rowspan] {
  border-bottom: none;
  border-radius: 0;
}

.p-overview-section .c-data-table tr:has([rowspan]) [rowspan].is-last-cell {
  border-bottom-left-radius: 10px;
  border-bottom: 1px solid var(--color-border);
}

.p-overview-section .c-data-table tr:last-child .c-data-table__data:first-of-type {
  border-bottom-left-radius: 0;
}

.p-overview-section .c-table-heading {
  font-size: var(--fs-18);
  line-height: var(--lh-lg);
}

.p-overview-section .c-table-heading .c-icon-link {
  color: var(--color-link-default);
  text-decoration: underline;
  text-underline-offset: 6px;
}

.p-overview-section .c-table-heading .c-icon-link:hover {
  text-decoration: none;
}

/* 続きから見る */
.p-more {
  position: relative;
  overflow: hidden;
  display: block;
}

.p-more:not(.is--init) {
  padding-bottom: 36px;
}

.p-more:not(.is--init) *[data-js=more-end]~* {
  display: none;
}

.p-more:not(.is--open)::before {
  content: "";
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(0deg, #ffffff 0%, #ffffff 10%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.p-more .p-more-btn {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

.p-more .p-more-btn .c-btn {
  width: 410px;
  cursor: pointer;
}

.p-more .p-more-btn .c-btn::before {
  right: 29px !important;
  width: 12px;
  height: 8px;
  mask-image: var(--icon-arrow-up);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
  background-color: var(--color-primary);
  transform: translateY(-50%) rotate(180deg) !important;
}

.bg-light-green .p-more::before {
  background: linear-gradient(0deg, #F0F8F8 0%, #F0F8F8 30%, rgba(240, 248, 248, 0) 100%);
}

.p-more.is--init {
  transition: height 0.4s ease;
}

.p-more.is--open {
  /* margin-bottom: 90px; */
  /* overflow: visible; */
  overflow: hidden;
}

.p-more.is--open .p-more-btn {
  /* top: calc(100% + 16px); */
  bottom: 0;
}

.p-more.is--open .p-more-btn .c-btn::before {
  transform: translateY(-50%) rotate(0deg) !important;
}

@media (hover: hover) {
  .p-more .p-more-btn .c-btn:hover::before {
    mask-image: var(--icon-arrow-up);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: cover;
    background-color: var(--color-white);
  }
}

@media (max-width: 767px) {
  .p-overview-section .u-radius-bl {
    padding-bottom: 56px !important;
  }
  .p-overview-section .c-data-table {
    min-width: auto;
    table-layout: auto;
  }
  .p-overview-section .c-data-table__data {
    padding: 20px;
  }
  .p-overview-section .c-data-table:not(.p-table-rate) .c-data-table__header {
    width: calc(100% / 4);
  }
  .p-overview-section .c-data-table.p-table-rate .c-data-table__header {
    width: calc(100% / 3);
  }
  .p-overview-section .p-table-rate .c-data-table__header {
    padding: 18px 20px;
    word-break: break-all;
  }
  .p-overview-section .c-table-heading {
    font-size: var(--fs-16);
  }
  /* 続きから見る */
  .p-more .p-more-btn .c-btn {
    width: 255px;
  }
  .p-more .p-more-btn .c-btn::before {
    right: 27px !important;
  }
  .p-more-end {
    padding-bottom: 48px !important;
  }
}

/* ふくぎんVisaデビットカード規定　セクション */
.p-cardterms-notice {
  padding: 32px;
  border: 1px solid var(--color-gray-4);
  border-radius: 10px;
}

.p-cardterms-notice__title {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-md);
  letter-spacing: var(--ls-p4);
}

@media (max-width: 767px) {
  #visa-debitcard .p-cardterms-section {
    padding-bottom: 0 !important;
  }
  .p-cardterms-notice {
    padding: 32px 20px;
  }
  .p-cardterms-notice__title {
    font-size: var(--fs-20);
  }
  .p-cardterms-notice .c-icon-link__text {
    font-size: var(--fs-12);
  }
}

/* CTA BOX セクション */
@media (max-width: 767px) {
  .p-cvbox-section {
    padding-top: 64px;
  }
}

.c-follow-box__inner {
  gap: 0;
}

@media screen and (max-width: 767px) {
  .c-follow-box__inner {
    gap: 8px;
  }
}

@media screen and (max-width: 768px) {
  .l-main .l-section:last-of-type {
    padding-bottom: 64px !important;
  }
}

/* ------------------------------
  追従バー .c-follow-box
------------------------------ */
@media (max-width: 767px) {
  #visa-debitcard .c-follow-box__links .c-icon-link__text {
    font-size: var(--fs-12);
  }
}