/* PC: 100px = 1rem. SP: 409px design frame. */
main.kyuyo {
  --kyuyo-blue: #0172b9;
  --kyuyo-pink: #e60044;
  --kyuyo-poppins: "Poppins", sans-serif;
  color: #171717;
  background: #fff;
  font: 400 0.17rem/1.55 "Noto Sans JP", sans-serif;
}
main.kyuyo,
main.kyuyo *,
main.kyuyo *::before,
main.kyuyo *::after { box-sizing: border-box; }
main.kyuyo h1,
main.kyuyo h2,
main.kyuyo h3,
main.kyuyo p,
main.kyuyo ul,
main.kyuyo ol { margin: 0; }
main.kyuyo ul,
main.kyuyo ol { padding: 0; list-style: none; }
main.kyuyo img { display: block; max-width: 100%; height: auto; }
main.kyuyo picture { display: block; }
main.kyuyo a { color: inherit; }
main.kyuyo a:focus-visible,
main.kyuyo summary:focus-visible { outline: 0.02rem solid #132d56; outline-offset: 0.02rem; }
main.kyuyo em { color: var(--kyuyo-pink); font-style: normal; }
main.kyuyo small { 
    display: block;
    font-size: 0.13rem;
    padding: 0;
    background: none;
    color: #333333;
    line-height: 1.5;
    text-align: left;
}
main.kyuyo .wrap { width: min(calc(100% - 0.6rem), 12rem); margin-inline: auto; }
main.kyuyo .mobile { display: none; }

main.kyuyo .hero {
  position: relative;
  aspect-ratio: 1200 / 580;
  margin-bottom: 1rem;
  background: url("/convenience/kyuyo/assets/images/hero-pc.png") center / 100% 100% no-repeat;
  container-type: inline-size;
}
main.kyuyo .hero-main { 
    width: 7.96rem;
    margin: 0 0.5rem 0 auto;
    padding-top: 0.5rem;
}
main.kyuyo .hero h1 {
}
main.kyuyo .hero-benefits {
  margin-top: 0.4rem;
  padding: 0.4rem;
  border-radius: 0.1rem;
  background: white;
}
main.kyuyo .hero-links,
main.kyuyo .merit-nav { 
    display: grid; 
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
}
main.kyuyo .hero-links {
    gap: 1.667cqw; 
    margin-top: 1cqw; 
}

main.kyuyo .hero-links a,
main.kyuyo .merit-nav a{
    transition: 0.3s;
}

main.kyuyo .hero-links a:hover,
main.kyuyo .merit-nav a:hover{
    opacity: 0.7
}

main.kyuyo .hero-links img,
main.kyuyo .merit-nav img { 
    width: 100%; 
}




main.kyuyo .merit { padding: 1rem 0; background: var(--kyuyo-blue); }
main.kyuyo h2 { display: flex; align-items: baseline; gap: 0.24rem; color: #444; font-size: 0.32rem; font-weight: 700; }
main.kyuyo h2 span { color: var(--kyuyo-blue); font: 700 0.7rem/1 var(--kyuyo-poppins); }
main.kyuyo .merit h2 { color: white; }
main.kyuyo .merit h2 span { color: #b0dff4; }
main.kyuyo .merit-nav {
  --merit-nav-gap: 0.35rem;
  gap: var(--merit-nav-gap);
  padding: 0.5rem;
  margin: 0.4rem 0 0.5rem;
  border-radius: 0.1rem;
  background: white;
}

main.kyuyo .merit-nav > a:not(:last-child) {
  position: relative;
}

main.kyuyo .merit-nav > a:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  left: calc(100% + var(--merit-nav-gap) / 2);
  width: 1px;
  height: 100%;
  background: #ddd;
  transform: translateX(-50%);
  pointer-events: none;
}


main.kyuyo .benefit { position: relative; padding: 0.41rem 1rem 1rem; border-radius: 0.1rem; background: white; scroll-margin-top: 0.84rem; }
main.kyuyo .benefit + .benefit { margin-top: 0.8rem; padding-top: 0.6rem; }
main.kyuyo .benefit h3 picture { width: 7.5rem; max-width: 85%; margin: 0 auto 0.1rem; }
main.kyuyo .benefit + .benefit h3 picture { width: 8.6rem; margin-bottom: 0.4rem; }
main.kyuyo .ribbon {
  position: absolute;
  inset: 0 auto auto 0.22rem;
  width: 1.4rem;
  height: 1.69rem;
  padding-top: 0.25rem;
  background: #fde53b;
  color: #e95580;
  text-align: center;
  font-size: 0.2rem;
  font-weight: 900;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%);
}
main.kyuyo .ribbon b { display: block; font: 700 0.7rem/1 var(--kyuyo-poppins); }
main.kyuyo #loan-benefit .ribbon { color: #309add; }
main.kyuyo .bank { 
    display: grid; 
    grid-template-columns: 37% minmax(0, 1fr); 
    align-items: center; 
    gap: 0.2rem; 
}
main.kyuyo .bank:first-child{ 
   padding-bottom: 0.1rem;
}
main.kyuyo .bank + .bank { 
    margin-top: 0.2rem; 
}
main.kyuyo .bank-logo { display: grid; place-items: center; height: 1rem; border-radius: 0.05rem; background: #efefef; }
main.kyuyo .bank-logo img { width: auto; max-width: 85%; max-height: 0.8rem; }
main.kyuyo .bank strong { font-size: 0.36rem; }
main.kyuyo .pill {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 5.8rem);
  min-height: 0.8rem;
  margin: 0.4rem auto 0;
  padding: 0.1rem 0.36rem;
  border-radius: 0.4rem;
  background: var(--kyuyo-pink);
  color: white;
  text-align: center;
  font-size: 0.17rem;
  font-weight: 700;
}
main.kyuyo .pill::after { 
    content: "▶︎"; 
    position: absolute; 
    right: 0.22rem;
    font-size: 0.13rem;
}
main.kyuyo .extra {     
    display: flex;
    align-items: center;
    gap: 0.14rem;
    min-height: 2.35rem;
    padding-right: 0.15rem;
    margin: 0.57rem auto 0;
    border-radius: 0.05rem;
    background: #efefef; 
}
main.kyuyo .extra > img { width: 1.9rem; margin-left: -0.19rem; }
main.kyuyo .extra > div { flex: 1; min-width: 0; }
main.kyuyo .extra p { font-size: 0.21rem; font-weight: 700; }
main.kyuyo .extra p b { color: var(--kyuyo-blue); }
main.kyuyo .extra .pill { 
    margin: 0.2rem 0 0 0.25rem;
}

main.kyuyo .loans,
main.kyuyo .steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
main.kyuyo .loans { gap: 0.2rem; }
main.kyuyo .loans li { 
    position: relative; 
    min-height: 2.56rem; 
    padding: 0.28rem; 
    border: 0.02rem solid #392f2d; 
    border-radius: 0.08rem; 
    text-align: center; 
    font-size: 0.24rem; 
    transition: 0.3s;
}

main.kyuyo .loans li:hover{ 
    border: 0.02rem solid #E60044; 
}

main.kyuyo .loans li a{ 
    width: 100%;
    height: 100%;
     cursor:pointer;
}

main.kyuyo .loans li::after { content: ""; position: absolute; right: 0.12rem; bottom: 0.12rem; border: 0.05rem solid transparent; border-right-color: var(--kyuyo-pink); border-bottom-color: var(--kyuyo-pink); }
main.kyuyo .loans img { width: 0.72rem; height: 0.7rem; margin: 0 auto 0.07rem; object-fit: contain; }
main.kyuyo .loans li div { display: flex; align-items: center; justify-content: center; min-height: 0.8rem; margin-top: 0.14rem; background: #f4f4f4; font-size: 0.18rem; font-weight: 900; }
main.kyuyo .loans em b { font: 600 0.4rem/1 var(--kyuyo-poppins); }

main.kyuyo .how { padding: 1rem 0 1.4rem; }
main.kyuyo .steps { gap: 0.3rem; margin-top: 0.5rem; }
main.kyuyo .step { position: relative; min-height: 4.57rem; padding: 0.94rem 0.3rem 0.3rem; border: 0.03rem solid var(--kyuyo-blue); border-radius: 0.2rem; }
main.kyuyo .step-number { position: absolute; top: 0; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 1.48rem; height: 0.8rem; border-radius: 0 0 0.8rem 0.8rem; color: white; background: var(--kyuyo-blue); font: 600 0.24rem/1 var(--kyuyo-poppins); }
main.kyuyo .step-art { position: relative; height: 2.3rem; overflow: hidden; border-radius: 0.05rem; background: #cae8fa; color: var(--kyuyo-blue); text-align: center; }
main.kyuyo .step-art strong { position: relative; z-index: 1; display: block; padding-top: 0.25rem; font-size: 0.22rem; line-height: 1.4; }
main.kyuyo .step-art picture { position: absolute; inset: auto 0 0; }
main.kyuyo .step-art img { width: auto; height: 1.27rem; margin-inline: auto; object-fit: contain; }
main.kyuyo .step-art-3 picture { inset: 0; }
main.kyuyo .step-art-3 img { width: 100%; height: 100%; object-fit: fill; }
main.kyuyo .step-art-3 strong { padding: 0.4rem 0 0 42%; }
main.kyuyo .step p { margin-top: 0.12rem; font-size: 0.16rem; }

main.kyuyo .faq { padding: 1rem 0; background: #f8f8f8; }
main.kyuyo .faq-items { margin-top: 0.5rem; padding: 0.5rem; border-radius: 0.2rem; background: white; }
main.kyuyo .faq-items details { border-top: 0.01rem solid #cecece; }
main.kyuyo .faq-items details:last-child { border-bottom: 0.01rem solid #cecece; }
main.kyuyo .faq-items summary { position: relative; padding: 0.3rem 0.72rem 0.3rem 0; list-style: none; cursor: pointer; font-weight: 700; }
main.kyuyo .faq-items summary::-webkit-details-marker { display: none; }
main.kyuyo .faq-items summary::before,
main.kyuyo .faq-items summary::after { content: ""; position: absolute; top: 50%; right: 0.28rem; width: 0.16rem; height: 0.02rem; background: var(--kyuyo-blue); transform: translateY(-50%); }
main.kyuyo .faq-items summary::after { transform: translateY(-50%) rotate(90deg); }
main.kyuyo .faq-items details[open] summary::after { transform: translateY(-50%); }
main.kyuyo .faq-items details p { padding: 0 0.72rem 0.3rem 0.4rem; }
@media (prefers-reduced-motion: no-preference) {
  main.kyuyo .faq-items summary::after { transition: transform .22s ease; }
  @supports (interpolate-size: allow-keywords) and selector(details::details-content) {
    main.kyuyo .faq-items details { interpolate-size: allow-keywords; }
    main.kyuyo .faq-items details::details-content { block-size: 0; overflow: hidden; transition: block-size .22s ease, content-visibility .22s allow-discrete; }
    main.kyuyo .faq-items details[open]::details-content { block-size: auto; }
  }
}

main.kyuyo .app { padding-top: 1.13rem; }
main.kyuyo .app-banner { position: relative; min-height: 5.08rem; padding: 0.2rem 0.55rem 0.55rem; border-radius: 0.2rem; background: linear-gradient(110deg, #eb1547, #f7a621); }
main.kyuyo .app-banner h2 img { 
    display: block; 
    margin: 0.09rem 0 0.09rem 0.7rem;
    width: 4.8rem; 
}
main.kyuyo .app-mascot { 
    position: absolute; 
    top: -0.13rem; 
    left: 54.25%; 
    width: 1.55rem; 
}
main.kyuyo .app-card { padding: 0.4rem 27% 0.35rem 0.4rem; border-radius: 0.1rem; background: white; }
main.kyuyo .app-card h3 { display: flex; align-items: center; gap: 0.18rem; color: #740021; font-size: 0.34rem; line-height: 1.2; }
main.kyuyo .app-card h3 img { 
    width: 5.34rem; 
}
main.kyuyo .app-body { 
    display: flex; 
    gap: 0.2rem; 
    justify-content: space-between; 
    margin-top: 0.2rem; 
    width: 7rem;
}
main.kyuyo .app-copy { padding-top: 0.2rem; font-size: 0.2rem; font-weight: 700; }
main.kyuyo .app-copy .pill { width: 2.94rem; min-height: 0.63rem; margin: 0.22rem 0 0; background: linear-gradient(90deg, var(--kyuyo-pink), #ffac23); }
main.kyuyo .app-stores { display: flex; gap: 0.45rem; text-align: center; font: 600 0.16rem/1.2 var(--kyuyo-poppins); }
main.kyuyo .app-stores .qr { width: 1.14rem; margin: 0.12rem auto 0.08rem; }
main.kyuyo .store-badge { width: 1.55rem; }
main.kyuyo .app-phone { position: absolute; bottom: 0; right: 2.416%; width: 27.75%; }

@media (768px < width < 1200px) {
  main.kyuyo .bank strong { font-size: 0.25rem; }
  main.kyuyo .benefit,
  main.kyuyo .benefit + .benefit { padding-inline: 0.45rem; }
  main.kyuyo .step,
  main.kyuyo .loans li { padding-inline: 0.14rem; }
  main.kyuyo .app-banner { padding-inline: 0.25rem; }
  main.kyuyo .app-card { padding-left: 0.25rem; }
  main.kyuyo .app-stores { gap: 0.12rem; }
  main.kyuyo .app-copy .pill { width: 2rem; }
}
@media (max-width: 768px) {

  main.kyuyo { 
      font-size: 3.6675vw;
      width: 100vw;
      overflow: hidden;
      margin: 0 ;
      padding: 0;
    }
  main.kyuyo a:focus-visible,
  main.kyuyo summary:focus-visible { outline-width: 0.489vw; outline-offset: 0.489vw; }
  main.kyuyo small { font-size: 2.445vw; }
  main.kyuyo .wrap { width: auto; margin-inline: 8.5575vw 5.868vw; }
  main.kyuyo .mobile { display: initial; }
  main.kyuyo .hero { 
      width: 90.4645vw;
      margin: 6vw auto 17.1149vw;
      aspect-ratio: 370 / 680; 
      background-image: url("/convenience/kyuyo/assets/images/hero-sp.png"); 
    }
    
  main.kyuyo .hero-main { 
      width: 80.6846vw; 
      margin: 0 0 0 4.89vw; 
      padding-top: 6.1125vw; 
    }
  main.kyuyo .hero h1 { 
      width: 54vw;
      margin-top: 4vw;
      margin-left: auto;
    }
    
  main.kyuyo .hero-benefits { position: absolute; top: 38.3863vw; left: 4.89vw; width: 80.6846vw; margin: 0; padding: 4.6455vw 4.89vw 4.89vw; border-radius: 2.445vw; font-size: 3.912vw; line-height: 1.5; }
  main.kyuyo .hero-benefits strong { display: inline-block; margin-bottom: 0.7335vw; font-size: 7.335vw; line-height: 1.12; }
  main.kyuyo .hero-links,
  main.kyuyo .merit-nav,
  main.kyuyo .loans,
  main.kyuyo .steps { grid-template-columns: 1fr; }
  main.kyuyo .hero-links { 
      gap: 2.6895vw; 
      margin-top: 2.445vw;
    }

  main.kyuyo .merit { padding: 10.2689vw 0 14.6699vw; }
  main.kyuyo .merit .wrap,
  main.kyuyo .faq .wrap { margin-inline: 4.89vw; }
  main.kyuyo h2 { gap: 3.6675vw; font-size: 4.1565vw; }
  main.kyuyo h2 span { font-size: 9.78vw; }
  main.kyuyo .merit-nav { margin: 7.0905vw 0 7.335vw; padding: 4.89vw; gap: 6.1125vw; border-radius: 2.445vw; --merit-nav-gap: 6.1125vw;
    gap: var(--merit-nav-gap);
  }

  main.kyuyo .merit-nav > a:not(:last-child)::after {
    top: calc(100% + var(--merit-nav-gap) / 2);
    left: 0;
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
  }
  main.kyuyo .benefit,
  main.kyuyo .benefit + .benefit { padding: 4.89vw 5.335vw; border-radius: 2.2005vw; scroll-margin-top: 14vw; }
  main.kyuyo .benefit + .benefit { margin-top: 7.335vw; }
  main.kyuyo .benefit h3 picture,
  main.kyuyo .benefit + .benefit h3 picture { 
        width: 63.9462vw;
        max-width: none;
        margin: 0 0 1.7115vw auto;
    }
  main.kyuyo .ribbon { left: 2.445vw; width: 19.5599vw; height: 34.2298vw; padding-top: 6.1125vw; font-size: 3.6675vw; }
  main.kyuyo .ribbon b { font-size: 13.4474vw; }
  main.kyuyo .bank { grid-template-columns: 1fr; gap: 1.7115vw; text-align: center; }
  main.kyuyo .bank + .bank { margin-top: 3.423vw; }
  main.kyuyo .bank-logo { height: 15.8924vw; border-radius: 0.7335vw; }
  main.kyuyo .bank-logo img { max-width: 53.7897vw; max-height: 13.6919vw; }
  main.kyuyo .bank strong { font-size: 4.89vw; }
  main.kyuyo .pill { 
      width: 87%; 
      min-height: 19.5599vw; margin-top: 6.1125vw; padding: 2.445vw 6.1125vw; border-radius: 9.78vw; font-size: 3.6675vw; }
  main.kyuyo .pill::after { right: 3.423vw; }
  main.kyuyo #atm-benefit > .pill { width: 73.3496vw;}
  main.kyuyo .extra { position: relative; display: block; min-height: 55.0122vw; margin: 10.0244vw -2.445vw 0; padding: 7.335vw 3.6675vw 4.89vw; border-radius: 1.2225vw; }
  main.kyuyo .extra > img { position: absolute; top: -6.1125vw; left: -5.379vw; width: 24.9389vw; margin: 0; }
  main.kyuyo .extra p,
  main.kyuyo .extra small { padding-left: 15.8924vw; }
  main.kyuyo .extra p { font-size: 3.423vw; }
  main.kyuyo .extra .pill {         
        position: absolute;
        top: 26vw;
        right: 5.2vw; 
}
  main.kyuyo .loans { gap: 4.89vw; }
  main.kyuyo .loans li { min-height: 47.9218vw; padding: 4.89vw; border-width: 0.489vw; border-radius: 1.956vw; text-align: left; font-size: 5.868vw; }
  main.kyuyo .loans li::after { right: 2.445vw; bottom: 2.445vw; border-width: 0.978vw; }
  main.kyuyo .loans img { display: inline-block; width: 11.9804vw; height: 11.9804vw; margin: 0 2.934vw 0 0; vertical-align: middle; }
  main.kyuyo .loans li div { min-height: 19.5599vw; margin-top: 3.423vw; font-size: 4.401vw; }
  main.kyuyo .loans em b { font-size: 9.5355vw; }
  main.kyuyo .how { padding: 11.0024vw 0 15.1589vw; }
  main.kyuyo .steps { gap: 6.1125vw; margin-top: 8.802vw; }
  main.kyuyo .step { min-height: 0; padding: 18.0929vw 5.379vw 4.89vw; border-width: 0.7335vw; border-radius: 4.89vw; }
  main.kyuyo .step-number { width: 29.3399vw; height: 15.1589vw; border-radius: 0 0 15.1589vw 15.1589vw; font-size: 5.1345vw; }
  main.kyuyo .step-art { height: 53.7897vw; border-radius: 1.2225vw; }
  main.kyuyo .step-art strong { padding-top: 5.868vw; font-size: 5.1345vw; }
  main.kyuyo .step-art img { height: 30.0733vw; }
  main.kyuyo .step-art-3 img { height: 100%; }
  main.kyuyo .step-art-3 strong { padding: 8.802vw 0 0 42%; }
  main.kyuyo .step p { margin-top: 2.934vw; font-size: 3.912vw; }
  main.kyuyo .faq { padding: 11.0024vw 0 12.2249vw; }
  main.kyuyo .faq-items { margin-top: 6.1125vw; padding: 5.868vw 4.89vw; border-radius: 4.89vw; }
  main.kyuyo .faq-items details,
  main.kyuyo .faq-items details:last-child { border-width: 0.2445vw; }
  main.kyuyo .faq-items summary { padding: 3.912vw 7.0905vw 3.912vw 0; }
  main.kyuyo .faq-items summary::before,
  main.kyuyo .faq-items summary::after { right: 0.978vw; width: 3.423vw; height: 0.3667vw; }
  main.kyuyo .faq-items details p { padding: 0 7.0905vw 3.912vw 0; }
  main.kyuyo .app { 
      margin: 0 0 3.6675vw; 
      padding-top: 34.4743vw; 
      background: #f8f8f8; 
    }
  main.kyuyo .app-banner { min-height: 105.1345vw; padding: 7.335vw 4.89vw; border-radius: 0; }
  main.kyuyo .app-banner h2 img { 
        position: absolute;
        top: -33.2518vw;
        left: 10vw;
        margin: 0;
        width: 80vw;
    }
    
  main.kyuyo .app-mascot { 
        top: -21vw;
        left: 50%;
        width: 33.4963vw;
        transform: translateX(-50%);
        z-index: 10;
    }
  main.kyuyo .app-card { padding: 6.846vw 3.6675vw 4.6455vw; border-radius: 2.445vw; }
    main.kyuyo .app-card h3 {
        display: block;
        width: 68vw;
        margin: 0 auto;
        display: block;    
    } 
  main.kyuyo .app-card h3 img { 
      width: 74vw; 
    }
  main.kyuyo .app-body { 
      width: 82vw;
      flex-direction: column-reverse; 
      gap: 3.6675vw; 
      margin-top: 4.1125vw; 
    }
  main.kyuyo .app-copy { padding-top: 3.6675vw; border-top: 0.2445vw solid #ddd; font-size: 3.6675vw; }
  main.kyuyo .app-copy .pill { width: 49.8778vw; min-height: 15.4034vw; margin-top: 3.6675vw; }
  main.kyuyo .app-stores { 
      line-height: 2;
      justify-content: center; 
      gap: 4.89vw; 
      font-size: 3.423vw; 
    }
  main.kyuyo .app-stores .qr { display: none; }
  main.kyuyo .store-badge { width: 36.6748vw; }
  main.kyuyo .app-phone { right: -0.7335vw; width: 34.2298vw; }
}