@charset "utf-8";

/* ------------------------------ 
body > .mv
------------------------------ */

section.mv {
  position: relative;
  container: mv / inline-size;
}
section.mv .mv-flame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  block-size: 100%;
  clip-path: inset(0);
}
section.mv .mv-inner {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  block-size: 60vh;
  background-image: url(../imgs/service/creditcard_top_mv.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
}
section.mv .mv-inner::before {
  content: '';
  display: block;
  width: 100%;
  block-size: 100%;
  background-color: rgb(0, 0, 0, .5);
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
section.mv .mv-inner .mv-txt {
  text-align: center;
  align-items: center;
  font-size: clamp(30px, 3.17460vw, 40px);
  color: rgb(255, 255, 255);
  position: relative;
  letter-spacing: .1em;
  overflow: hidden; 
  animation-name: mvInner;
  animation-duration: 2s;
  animation-fill-mode: forwards;
  line-height: 1.6;
}
@keyframes mvInner {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

section.mv .mv-inner .mv-txt br {
  display: block;
}
@container mv (inline-size >= 600px) {
  section.mv .mv-inner .mv-txt br {
    display: none;
  }
}

/* ------------------------------ 
section >>> fade
------------------------------ */
.fade {
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
.fade.show {
  opacity: 1;
  transform: none;
}


/* ------------------------------ 
section >>> fade02
------------------------------ */
.fade02 {
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
.fade02.show02 {
  opacity: 1;
  transform: none;
}

/* ------------------------------ 
section >>> fade03
------------------------------ */
.fade03 {
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
.fade03.show03 {
  opacity: 1;
  transform: none;
}

/* ------------------------------ 
section >>> fade04
------------------------------ */
.fade04 {
  opacity: 0;
  transform: translateY(50px);
  transition: 1s;
}
.fade04.show04 {
  opacity: 1;
  transform: none;
}

/* ------------------------------ 
body > .breadcrumbs 
------------------------------ */
.breadcrumbs {
  container: bread / inline-size;
  inline-size: min(94%, 1200px);
  margin-inline: auto;
  text-align: left;
  overflow: hidden;
  animation-name: bread;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes bread {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.breadcrumbs ul {
  display: none;
}
.breadcrumbs ul::after {
  content: '';
  display: block;
  width: 1px;
  block-size: 20px;
  background-color: #6e6e6e;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 65px;
  transform: translate(0, -50%);
}

@container bread (inline-size >= 900px) {
  .breadcrumbs ul {
    display: flex;
    justify-content: space-between;
    margin-block: 30px;
    inline-size: 220px;
    position: relative;
    flex-wrap: wrap;
  }
}


/* ------------------------------ 
main
------------------------------ */
main {
  inline-size: min(94%, 1200px);
  container: main / inline-size;
  margin-inline: auto;
}


/* ------------------------------ 
main > .credit
------------------------------ */
.credit {
  container: credit / inline-size;
}
.credit .credit-top {
  overflow: hidden;
  animation-name: credit;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}
@keyframes credit {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.credit {
  margin-block: 100px;
}
.credit .credit-ttl p {
  margin: 0 20px 20px 20px;
  font-size: 18px;
}
.credit h2 {
  font-size: clamp(28px, 2.85714vw, 36px);
  text-align: center;
  padding: 20px 0 0 0;
  letter-spacing: .1em;
  line-height: 1.6;
}
.credit h2 span {
  display: inline-block;;
}
.credit .ttl-en {
  font-size: 20px;
  margin: 20px 0 50px 0;
  color: #0089c6;
  text-align: center;
  letter-spacing: .13em;
}
.credit .credit-sub {
  margin: 0 auto 30px;
  line-height: 2;
}
.credit .sub-txt-br {
  display: none;
}

@container credit (inline-size >= 700px) {
  .credit h2 {
    padding: 0;
  }
  .credit .credit-sub {
    inline-size: 720px;
    text-align: center;
  }
  .credit .sub-txt-br {
    display: block;
  }

}



/* ------------------------------ 
main > credit-card
------------------------------ */
.creditcard {
  container: creditcard / inline-size;
  margin-inline: calc(50% - 50vw);
  background-color: #f7f7f7;
  padding-inline: calc(50vw - 50%);
  padding-block-start: clamp(50px, 7.93650vw, 100px);
  padding-block-end: clamp(50px, 7.93650vw, 100px);
}
.creditcard h3 {
  font-size: clamp(28px, 3.17460vw, 40px);
  line-height: 1.5;
}
.creditcard h3 span {
  display: inline-block;
}
.creditcard .subttl-en {
  font-size: clamp(16px, 1.58730vw, 20px);
  margin: 15px 0 50px 0;
  color: #0089c6;
  letter-spacing: .13em;
}
.creditcard .kinds {
  border: 1px solid #ddd;
  padding: 40px 20px;
  border-radius: .8em;
  background-color: #fff;
  margin-block-end: clamp(24px, 5vw, 56px);
}
.creditcard h4 {
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.5;
  font-weight: 600;
  padding-block-end: 8px;
  border-bottom: 1px solid #bbb;
}
.creditcard h4 span {
  display: inline-block;
}
.creditcard .credit-wrap {
  align-items: center;
  padding-block-start: 24px;
}
.creditcard .credit-img {
  inline-size: 80%;
  text-align: center;
  margin-inline: auto;
}
.creditcard .credit-img img {
  inline-size: 100%;
}
.creditcard .p-ttl {
  font-size: clamp(18px, 1.66666vw, 20px);
  font-weight: 600;
  line-height: 2;
  text-align: center;
  padding-block-start: 16px;
}
.creditcard .p-ttl span {
  display: inline-block;
}
.creditcard .p-txt {
  padding-block: 16px;
  line-height: 2;
}

/* btn */
.creditcard .btn-area {
  inline-size: 240px;
  margin: 0 0 0 auto;
}
.creditcard .credit-btn {
  display: flex;
  align-items: center;
  inline-size: 240px;
}
.creditcard .arrow-text {
  color: #00446a;
  font-size: 18px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: .1em;
  align-items: center;
}
.creditcard .kinds-arrow {
  display: block;
  width: 55px;
  height: 55px;
  margin: 0 auto;
  padding: 18px;
  border-radius: 50%;
  border: 1px solid #00446a;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  background-image: linear-gradient(
    to right,
    #ffffff 0%,
    #ffffff 50%,
    #00446a 50%,
    #00446a 100%
  );
  transition: background-position ease .6s;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  font-family: serif;
  position: relative;
}
.creditcard .btn-area:hover .kinds-arrow{
  background-position: 0;
  color: #00446a;
  color: #ffffff;
}
.creditcard .btn-area .kinds-arrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image: url(../imgs/icon/arrow-icon-white.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0 , -50%);
}
.creditcard .btn-area:hover .kinds-arrow::before {
  background-image: url(../imgs/icon/arrow-icon-blue.png);
}

@container creditcard (inline-size >= 380px) {
  .creditcard .p-ttl {
    text-align: center;
  }
  .creditcard .credit-img {
    padding: 20px;
    margin-inline: auto;
  }
}
@container creditcard (inline-size >= 700px) {
  .creditcard .p-ttl {
    text-align: left;
  }
  .creditcard .credit-wrap {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 32px;
    padding-block-start: 32px;
  }
  .creditcard .p-ttl {
    padding-block-start: 0px;
  }
  .creditcard .kinds {
    padding: 40px;
  }
  .creditcard .credit-img {
    inline-size: 100%;
    padding: 0px;
  }
}

@container creditcard (inline-size >= 900px) {
  .creditcard .credit-img {
    inline-size: 90%;
    padding: 0px;
  }
}


/* ------------------------------ 
main > .flowchart
------------------------------ */
.flowchart {
  container: flow / inline-size;
  padding-block-end: clamp(60px, 6.66666vw, 80px);
  position: relative;
  z-index: 3;
}
.flowchart .catch-txt {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  background-color: #0072B2;
  padding-block: 40px;
}
.flowchart .catch-txt p {
  text-align: center;
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 600;
  line-height: 2;
  color: white;
}
.flowchart .catch-txt::after {
  content: '';
  position: absolute;
  inline-size: 170px;
  block-size: 60px;
  background-color: #0072B2;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.flowchart .flow-catch {
  text-align: center;
  font-weight: 600;
  font-size: clamp(16px, 1.58730vw, 20px);
}
.flowchart h3 {
  font-size: clamp(28px, 3.17460vw, 40px);
  line-height: 1.6;
  margin-block: calc((1em - 1lh) / 2);
  text-align: left;
  padding-block-start: clamp(200px, 20vw, 240px);
}
.flowchart h3 span {
  display: inline-block;
}
.flowchart .subttl-en {
  font-size: clamp(16px, 1.58730vw, 20px);
  margin: 15px 0 50px 0;
  color: #0089c6;
  letter-spacing: .13em;
}
.flowchart p {
  line-height: 2;
  padding-block-end: 6px;
}
/* 矢印説明 */
.flowchart .flow-check {
  /* display: inline-block; */
  max-inline-size: 310px;
  border-radius: .8em;
  padding: 16px 32px;
  margin-block-start: 56px;
  border: 1px solid #aaa;
  margin-inline: auto;
}
.flowchart .flow-arrow {
  padding-block-start: 2px;
}
.flowchart .yes-txt {
  color: red;
}
.flowchart .no-txt {
  color: blue;
}
.flowchart .arrow-yes {
  display: inline-block;
  inline-size: 140px;
  block-size: 12px;
  background: red;
  clip-path: polygon(0 41.4%, 94% 41.4%, 94% 0, 100% 50%, 94% 100%, 94% 58.6%, 0 58.6%);
}
.flowchart .arrow-no {
  display: inline-block;
  inline-size: 140px;
  block-size: 12px;
  background: blue;
  clip-path: polygon(0 41.4%, 94% 41.4%, 94% 0, 100% 50%, 94% 100%, 94% 58.6%, 0 58.6%);
}
.flowchart .flow-img-wrap {
  background-color: #fff;
  padding-block: 56px;
  border-radius: .8em;
}

/* 下三角矢印 */
.flowchart .under-arrow {
  position: relative;
}
.flowchart .under-arrow::after {
  content: '';
  position: absolute;
  inline-size: 170px;
  block-size: 60px;
  background-color: #fff;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*下矢印  */
.flowchart .under-arrow2 {
  position: relative;
}
.flowchart .under-arrow2::after {
  content: '';
  position: absolute;
  inline-size: 80px;
  block-size: 50px;
  background-color: #cacaca;
  clip-path: polygon(100% 45%, 50% 100%, 0 45%, 0 0, 50% 60%, 100% 0);
  top: 74px;
  left: 50%;
  transform: translate(-50%, -50%);
}
.flowchart .under-arrow3 {
  position: relative;
}
.flowchart .under-arrow3::after {
  content: '';
  position: absolute;
  inline-size: 80px;
  block-size: 50px;
  background-color: #cacaca;
  clip-path: polygon(100% 45%, 50% 100%, 0 45%, 0 0, 50% 60%, 100% 0);
  top: 114px;
  left: 50%;
  transform: translate(-50%, -50%);
}

@container flow (inline-size >= 700px) {
  .flowchart .flow-check {
    margin-inline: 0 auto;
  }
}

/* ------------------------------ 
main > .result
------------------------------ */
.result h3 {
  font-size: clamp(28px, 3.17460vw, 40px);
  line-height: 1.6;
  margin-block: calc((1em - 1lh) / 2);
  text-align: center;
  padding-block-start: clamp(120px, 13.3333vw, 160px);
  padding-block-end: clamp(60px, 6.66666vw, 80px);
}
.result {
  container: result / inline-size;
  margin-inline: calc(50% - 50vw);
  background-color: #f7f7f7;
  background-color: #f3f6fd;
  padding-inline: calc(50vw - 50%);
  padding-block-end: 190px;
  position: relative;
  z-index: 2;
}
.result li {
  border-radius: 16px;
  margin-block-end: 30px;
  background-color: #fff;
}
.result li.li-a {
  border: 1px solid #1e90ce;
}
.result li.li-b {
  border: 1px solid #994cb1;
}
.result li.li-c {
  border: 1px solid #db7093;
}
.result li.li-d {
  border: 1px solid #3bc371;
}
.result li.li-e {
  border: 1px solid #fba545;
}
.result .box-result {
  border-radius: 16px 16px 0 0;
  padding-block: 30px;
  color: #fff;
  padding-block: 14px;
  text-align: center;
  font-size: clamp(20px, 2.33333vw, 28px);
  font-weight: 600;
}
.result .box-result.result-a {
  background-color: #1e90ce;
}
.result .box-result.result-b {
  background-color: #994cb1;
}
.result .box-result.result-c {
  background-color: #db7093;
}
.result .box-result.result-d {
  background-color: #3bc371;
}
.result .box-result.result-e {
  background-color: #fba545;
}
.result .box-ttl {
  font-size: clamp(16px, 1.83333vw, 22px);
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  margin-block: calc((1em - 1lh) / 2);
  padding-block: 24px 32px;
  padding-inline: 16px;
}
.result .box-ttl span {
  display: inline-block;
}
.result .box-txt {
  line-height: 1.6;
  margin-block: calc(1em - 1lh) / 2;
  padding-inline: 20px;
}
.result p {
  line-height: 1.6;
  margin-block: calc((1em - 1lh) / 2);
}
.result .bonus-wrap {
  display: flex;
  align-items: center;
  padding-block-end: 10px;
}
.result .bonus-img img {
  inline-size: 36px;
  padding-inline-end: 10px;
}
.result span.result-span {
  color: red;
  font-weight: 600;
}

/* btn */
.result .result-btn a {
  display: block;
  inline-size: 190px;
  margin-block: 30px;
  margin-inline: auto;
  padding-block: 10px;
  border-radius: 32px;
  border: 1px solid rgb(0, 68, 106);
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  background-image: linear-gradient(
    to right,
    #ffffff 0%,
    #ffffff 50%,
    #00446a 50%,
    #00446a 100%
  );
  transition: background-position ease .6s;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  position: relative;
}
.result .result-btn a:hover {
  background-position: 0;
  color: #222;
}
.result .result-btn a::before {
  content: "";
  block-size: 10px;
  margin: auto;
  position: absolute;
  inset-inline-end: 18px;
  border-right: 2px solid #fff;
  border-top: 2px solid #fff;
  bottom: 0;
  top: 0;
  transform: rotate(45deg);
  inline-size: 10px;
}
.result .result-btn a:hover::before {
  border-right: 2px solid #222;
  border-top: 2px solid #222;
}

/* btn */
.result .result-btn-area {
  inline-size: 240px;
  margin-inline: auto;
  padding-block: 24px;
}
.result .credit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 240px;
}
.result .arrow-text {
  color: #00446a;
  font-size: 18px;
  font-weight: 600;
  line-height: 2;
  letter-spacing: .1em;
  align-items: center;
}
.result .kinds-arrow {
  display: block;
  inline-size: 55px;
  block-size: 55px;
  margin-inline-start: 18px;
  padding: 18px;
  border-radius: 50%;
  border: 1px solid #00446a;
  background-repeat: no-repeat;
  background-position: 100% 0;
  background-size: 200% auto;
  background-image: linear-gradient(
    to right,
    #ffffff 0%,
    #ffffff 50%,
    #00446a 50%,
    #00446a 100%
  );
  transition: background-position ease .6s;
  text-align: center;
  color: #ffffff;
  text-decoration: none;
  font-family: serif;
  position: relative;
}
.result .result-btn-area:hover .kinds-arrow{
  background-position: 0;
  color: #00446a;
  color: #ffffff;
}
.result .result-btn-area .kinds-arrow::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image: url(../imgs/icon/arrow-icon-white.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translate(0 , -50%);
}
.result .result-btn-area:hover .kinds-arrow::before {
  background-image: url(../imgs/icon/arrow-icon-blue.png);
}

.result p.support-txt {
  font-size: clamp(16px, 1.58730vw, 20px);
  margin-block-start: 64px;
  line-height: 2;
  font-weight: 600;
}
.result p.support-txt span {
  border-bottom: 3px dotted #4d9bc1;
}
/* arrow */
.result .contact-arrow1 {
  position: relative;
}
.result .contact-arrow1:after {
  content: '';
  position: absolute;
  inline-size: 80px;
  block-size: 50px;
  background-color: #cacaca;
  clip-path: polygon(100% 45%, 50% 100%, 0 45%, 0 0, 50% 60%, 100% 0);
  inset-block-start: 74px;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}
.result .contact-arrow2 {
  position: relative;
}
.result .contact-arrow2:after {
  content: '';
  position: absolute;
  inline-size: 80px;
  block-size: 50px;
  background-color: #cacaca;
  clip-path: polygon(100% 45%, 50% 100%, 0 45%, 0 0, 50% 60%, 100% 0);
  inset-block-start: 114px;
  inset-inline-start: 50%;
  transform: translate(-50%, -50%);
}

@container result (inline-size >= 600px) {
  .result ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  .result li {
    display: flex;
    flex-direction: column;
    inline-size: 46%;
  }
  .result .box-txt {
    flex-grow: 1;
  }
  .result .result-btn {
    margin-block-start: auto;
  }
  .result p.support-txt {
    text-align: center;
  }
}


@container result (inline-size >= 900px) {
  .result ul {
    justify-content: space-evenly;
  }
  .result li {
    inline-size: 30%;
  }
}