@charset "UTF-8";

.guide-payment {
  --guide-payment-blue: #003e9a;
  --guide-payment-pale: #f0f7ff;
  --guide-payment-border: #bfbfbf;
  width: 100%;
  color: #222;
  font-family: "Noto Sans JP", Meiryo, sans-serif;
  font-size: 18px;
  line-height: 1.56;
}

.guide-payment *,
.guide-payment *::before,
.guide-payment *::after {
  box-sizing: border-box;
}

.guide-payment h1,
.guide-payment h2,
.guide-payment h3,
.guide-payment p,
.guide-payment ul {
  margin: 0;
  padding: 0;
}
.guide-payment h2 span{
  font-size:0.6em;
  margin-left:1em;
  margin-top:0.5em;
}
.guide-payment img {
  display: block;
  max-width: 100%;
}

.guide-payment__main a {
  color: var(--guide-payment-blue);
  text-decoration: underline;
}

.guide-payment__inner {
  width: min(calc(100% - 64px), 1200px);
  margin: 0 auto;
  padding: 54px 0 100px;
}

.guide-payment__header {
  position: relative;
  margin-bottom: 38px;
  padding-bottom: 28px;
}

.guide-payment__header::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 150vw;
  border-bottom: 1px solid #d0d0d0;
  content: "";
  transform: translateX(-50%);
}

.guide-payment__title {
  color: #333;
  font: 700 36px/1.4 "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}

.guide-payment__layout,
.guide-payment__main {
  min-width: 0;
}

.guide-payment-section + .guide-payment-section {
  margin-top: 100px;
}

.guide-payment-heading {
  display: flex;
  min-height: 85px;
  align-items: center;
  padding: 12px 30px 12px 25px !important;
  border-left: 20px solid var(--guide-payment-blue);
  background: var(--guide-payment-pale);
  color: #333;
  font: 700 30px/1.35 "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  border-bottom:none;
}

.guide-payment-section__body {
  padding: 34px 26px 0;
}

.guide-payment-section__body > p + p{
  margin-top: 28px;
}

.guide-payment-subsection {
  margin-top: 70px;
  margin-bottom:4em;
}

.guide-payment-subsection h3 {
  color: var(--guide-payment-blue);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.56;
  border-bottom:none;
}

.guide-payment-subsection h3 + p {
  margin-top: 20px;
}

.guide-payment-logo-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 40px 0;
  gap:3%;
}

.guide-payment-logo-grid img {
  object-fit: contain;
}

.guide-payment-logo-grid--cards {
  width: 500px;
  grid-template-columns: repeat(5, 100px);
  gap: 0px;
}

.guide-payment-logo-grid--stores {
  grid-template-columns: repeat(4, 1fr);
}

.guide-payment-store-logo {
  display: flex;
  height: 80px;
  align-items: center;
  justify-content: center;
}

.guide-payment-logo-grid--stores .guide-payment-store-logo img {
  width: var(--guide-payment-store-logo-width);
  height: var(--guide-payment-store-logo-height);
  max-width: 100%;
  object-fit: contain;
}



.guide-payment-store-logo--mml {
  color: #333;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.guide-payment-logo-grid--banks {
  width: 564px;
  grid-template-columns: repeat(2, 272px);
  gap:7%;
}

.guide-payment-wallets {
  display: grid;
  grid-template-columns: repeat(5, 214px);
  gap: 20px;
  margin-top: 40px;
  margin-bottom:4em;
}

.guide-payment-wallet {
  display: flex;
  width: 214px;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  border: 1px solid #333;
  border-radius: 5px;
  color: #222;
  text-align: center;
  text-decoration: none;
  justify-content: center;
  padding:1em 0;
}

.guide-payment-wallet__logo {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.guide-payment-wallet__logo img {
  width: var(--guide-payment-wallet-logo-width);
  height: var(--guide-payment-wallet-logo-height);
  max-width: 100%;
  object-fit: contain;
}


.guide-payment-wallet__link {
  display: inline-block;
  font-size: 14px;
  line-height: 28px;
}

.guide-payment-notes,
.guide-payment-bullets {
  list-style: none;
}

.guide-payment-notes li,
.guide-payment-bullets li {
  position: relative;
  padding-left: 1.2em;
}

.guide-payment-notes li::before {
  position: absolute;
  left: 0;
  content: "※";
}

.guide-payment-bullets li::before {
  position: absolute;
  left: .5em;
  content: "-";
}

.guide-payment-ogp {
  display: grid;
  min-height: 190px;
  width: min(825px, 100%);
  margin-top: 20px;
  overflow: hidden;
  grid-template-columns: 190px minmax(0, 1fr);
  border: 1px solid #d8e0e4;
  border-radius: 12px;
  background: #fff;
  color: #333;
  text-decoration: none;
}

.guide-payment .guide-payment-ogp {
  text-decoration: none;
}

.guide-payment-ogp + p {
  margin-top: 2em;
}

.guide-payment-ogp__image {
  display: block;
  min-height: 188px;
  border-right: 1px solid #d8e0e4;
  background: #fff;
}

.guide-payment-ogp__image img {
  display: block;
  width: 100%;
  height: 188px;
  object-fit: cover;
}

.guide-payment-ogp__text {
  display: flex;
  min-width: 0;
  justify-content: center;
  padding: 14px 18px;
  flex-direction: column;
}

.guide-payment-ogp__domain,
.guide-payment-ogp__title,
.guide-payment-ogp__description {
  display: block;
}

.guide-payment-ogp__domain {
  margin-bottom: 2px;
  color: #4b4b4b;
  font-size: 18px;
  line-height: 1.4;
}

.guide-payment-ogp__title {
  display: -webkit-box;
  overflow: hidden;
  color: #222;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guide-payment-ogp__description {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 2px;
  color: #555;
  font-size: 18px;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.guide-payment-ogp:hover .guide-payment-ogp__title {
  text-decoration: underline;
}

.guide-payment-ogp:focus-visible {
  outline: 3px solid var(--guide-payment-blue);
  outline-offset: 4px;
}

@media screen and (min-width: 1536px) {
  .guide-payment__inner {
    width: min(1503px, calc(100% - 32px));
    max-width: none;
  }

  .guide-payment__header {
    width: 1200px;
    margin-left: 303px;
  }

  .guide-payment__header::after {
    left: calc(50% - 151.5px);
  }

  .guide-payment__layout {
    display: grid;
    grid-template-columns: 256px minmax(0, 1200px);
    gap: 47px;
    align-items: start;
  }

  .guide-payment__main {
    width: 1200px;
  }
}

@media screen and (max-width: 768px) {
  .guide-payment {
    font-size: 4.071vw;
    line-height: 7.125vw;
  }

  .guide-payment__inner {
    width: 100%;
    padding: 0 0 25.445vw;
  }

  .guide-payment__header {
    margin-bottom: 0;
    padding: 5.598vw 4.326vw;
  }

  .guide-payment__header::after {
    left: 0;
    width: 100%;
    transform: none;
  }

  .guide-payment__title {
    font-size: 7.125vw;
    line-height: 10.433vw;
  }

  .guide-payment-section + .guide-payment-section {
    margin-top: 12.723vw;
  }

  .guide-payment-heading {
    min-height: 15.267vw;
    padding: 3.817vw 4.58vw !important;
    border-left-width: 3.578vw;
    font-size: 5.367vw;
    line-height: normal;
  }

  .guide-payment-section__body {
    padding: 5.089vw 4.071vw 0;
  }

  .guide-payment-section__body > p + p{
    margin-top: 7.125vw;
  }

  .guide-payment-subsection {
    margin-top: 10.178vw;
  }

  .guide-payment-subsection h3 {
    font-size: 4.58vw;
    line-height: 7.125vw;
  }

  .guide-payment-subsection h3 + p {
    margin-top: 3.053vw;
  }

  .guide-payment-logo-grid {
    column-gap: 6vw;
    margin: 5vw 0 0;
  }

  .guide-payment-logo-grid img {
    height: 13vw;
  }

  .guide-payment-logo-grid--cards {
    width: 100%;
    grid-template-columns: repeat(3, 26.972vw);
    gap: 0vw;
  }

  .guide-payment-logo-grid--stores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-payment-store-logo {
    height: 17.812vw;
  }

  .guide-payment-store-logo--lawson {
    --guide-payment-store-logo-width: 34.351vw;
    --guide-payment-store-logo-height: 7.316vw;
  }

  .guide-payment-store-logo--familymart {
    --guide-payment-store-logo-width: 31.807vw;
    --guide-payment-store-logo-height: 11.132vw;
  }

  .guide-payment-store-logo--seven-eleven {
    --guide-payment-store-logo-width: 9.86vw;
    --guide-payment-store-logo-height: 9.542vw;
  }

  .guide-payment-store-logo--hamanasu {
    --guide-payment-store-logo-width: 36.577vw;
    --guide-payment-store-logo-height: 7.316vw;
  }

  .guide-payment-store-logo--yamazaki-dailystore {
    --guide-payment-store-logo-width: 21.598vw;
    --guide-payment-store-logo-height: 10.178vw;
  }

  .guide-payment-store-logo--daily-yamazaki {
    /*
    --guide-payment-store-logo-width: 23.598vw;
    */
    --guide-payment-store-logo-width: 21.598vw;
    --guide-payment-store-logo-height: 10.178vw;
  }

  .guide-payment-store-logo--ministop {
    --guide-payment-store-logo-width: 17.812vw;
    --guide-payment-store-logo-height: 11.132vw;
  }

  .guide-payment-store-logo--seikatsusaika {
    --guide-payment-store-logo-width: 22.424vw;
    --guide-payment-store-logo-height: 9.542vw;
  }

  .guide-payment-store-logo--sps {
    --guide-payment-store-logo-width: 14.469vw;
    --guide-payment-store-logo-height: 10.019vw;
  }

  .guide-payment-store-logo--seicomart {
    --guide-payment-store-logo-width: 34.987vw;
    --guide-payment-store-logo-height: 8.588vw;
  }

  .guide-payment-store-logo--poplar {
    --guide-payment-store-logo-width: 28.945vw;
    --guide-payment-store-logo-height: 9.542vw;
  }

  .guide-payment-store-logo--mml {
    font-size: 6.361vw;
  }

  .guide-payment-logo-grid--banks {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guide-payment-wallets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5.089vw;
    margin-top: 7.634vw;
  }

  .guide-payment-wallet {
            width: 100%;
        gap: 2.089vw;
        padding-bottom: 3.089vw;
        border-width: 0.254vw;
        border-radius: 1.272vw;
  }

  .guide-payment-wallet__logo {
    height: 9.445vw;
  }

  .guide-payment-wallet--au-pay {
    --guide-payment-wallet-logo-width: 35.733vw;
        --guide-payment-wallet-logo-height: 9.522vw;
  }

  .guide-payment-wallet--famipay {
            --guide-payment-wallet-logo-width: 33.098vw;
        --guide-payment-wallet-logo-height: 9.363vw;
  }

  .guide-payment-wallet--payb {
    --guide-payment-wallet-logo-width: 17.255vw;
        --guide-payment-wallet-logo-height: 13.043v
  }

  .guide-payment-wallet--d-payment {
            --guide-payment-wallet-logo-width: 33.102vw;
        --guide-payment-wallet-logo-height: 10.466vw;
  }

  .guide-payment-wallet--paypay {
    --guide-payment-wallet-logo-width: 34.733vw;
        --guide-payment-wallet-logo-height: 9.363vw;
  }

  .guide-payment-wallet__link {
    font-size: 3.562vw;
    line-height: 7.125vw;
  }

  .guide-payment-notes li,
  .guide-payment-bullets li {
    padding-left: 1.25em;
  }

  .guide-payment-ogp {
    min-height: 31.807vw;
    width: 100%;
    margin-top: 5.089vw;
    grid-template-columns: 31.807vw minmax(0, 1fr);
    border-width: 0.254vw;
    border-radius: 3.053vw;
  }

  .guide-payment-ogp__image {
    min-height: 31.298vw;
    border-right-width: 0.254vw;
  }

  .guide-payment-ogp__image img {
    height: 31.298vw;
  }

  .guide-payment-ogp__text {
    padding: 2.545vw 3.053vw;
  }

  .guide-payment-ogp__domain {
    margin-bottom: 0.509vw;
    font-size: 3.053vw;
    line-height: 1.4;
  }

  .guide-payment-ogp__title {
    font-size: 3.562vw;
    line-height: 1.4;
  }

  .guide-payment-ogp__description {
    margin-top: 0.509vw;
    font-size: 3.053vw;
    line-height: 1.45;
  }

  .guide-payment-ogp:focus-visible {
    outline-width: 0.763vw;
    outline-offset: 1.018vw;
  }
}