@charset "UTF-8";

:root {
    /* デフォルト */
    --vw: 390;
    --content-padding: calc(20 / var(--vw) * 100vw);
    --clr-ym: #FF0033;
    --clr-pay: #DA3635;
    --clr-lyp: #225CFF;
    --clr-disc: #E8B500;
    --clr-ent: #474747;
    --clr-link: #157ED8;
    --clr-note: #818181;
    --clr-emp: #FF0133;
    --clr-black: #000;
    --clr-black2: #323232;
    --clr-white: #FFF;
    --clr-light_blue: #DEF1FF;
    --clr-steal-gray: #575757;
    --clr-pale-pink: #FFDDDD;
    --icon-arrow:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.19447%201.17643C2.93518%201.41192%202.93518%201.79339%203.19447%202.02887L8.6725%207.00015L3.19459%2011.9712C2.9353%2012.2067%202.9353%2012.5881%203.19459%2012.8234C3.45389%2013.0589%203.87436%2013.0589%204.13366%2012.8234L10.0811%207.42613C10.1135%207.39669%2010.1419%207.3651%2010.1662%207.3316C10.336%207.09803%2010.3082%206.78118%2010.0827%206.57537C10.0822%206.57489%2010.0816%206.57441%2010.0811%206.57393L10.0738%206.56723L4.13354%201.17643C3.87425%200.941188%203.45377%200.941188%203.19447%201.17643Z%22%20fill%3D%22%230C0C0C%22%2F%3E%3C%2Fsvg%3E");
    --icon-arrow_bold:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2013%2013%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M4.73636%201.29791C4.33915%200.900696%203.69513%200.900696%203.29791%201.29791C2.9007%201.69513%202.9007%202.33915%203.29791%202.73636L6.60642%206.04487L3.29811%209.35319C2.90089%209.7504%202.90089%2010.3944%203.29811%2010.7916C3.69533%2011.1889%204.33934%2011.1889%204.73656%2010.7916L8.76422%206.76398C9.16144%206.36676%209.16144%205.72274%208.76422%205.32553C8.75976%205.32106%208.75526%205.31665%208.75074%205.31229L4.73636%201.29791Z%22%20fill%3D%22%230C0C0C%22%2F%3E%3C%2Fsvg%3E");
    --icon-circle_arrow:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2018%2018%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%2018C13.9706%2018%2018%2013.9706%2018%209C18%204.02944%2013.9706%200%209%200C4.02944%200%200%204.02944%200%209C0%2013.9706%204.02944%2018%209%2018ZM12.2182%208.28073C12.6154%208.67794%2012.6154%209.32196%2012.2182%209.71918L8.19057%2013.7468C7.79335%2014.1441%207.14934%2014.1441%206.75212%2013.7468C6.3549%2013.3496%206.3549%2012.7056%206.75212%2012.3084L10.0605%209.00001L6.75204%205.69156C6.35483%205.29435%206.35483%204.65033%206.75204%204.25311C7.14926%203.8559%207.79328%203.8559%208.19049%204.25311L12.2087%208.27135L12.2182%208.28073Z%22%20fill%3D%22%230C0C0C%22%2F%3E%3C%2Fsvg%3E");
    --icon-plus:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2034%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M16%2024C16%2024.5523%2016.4477%2025%2017%2025C17.5523%2025%2018%2024.5523%2018%2024V17H25C25.5523%2017%2026%2016.5523%2026%2016C26%2015.4477%2025.5523%2015%2025%2015H18V8C18%207.44772%2017.5523%207%2017%207C16.4477%207%2016%207.44772%2016%208L16%2015H9C8.44772%2015%208%2015.4477%208%2016C8%2016.5523%208.44772%2017%209%2017H16L16%2024Z%22%20fill%3D%22%23505050%22%2F%3E%3C%2Fsvg%3E");
    --icon-minus:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2034%2032%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M8%2016C8%2015.4477%208.44772%2015%209%2015H25C25.5523%2015%2026%2015.4477%2026%2016C26%2016.5523%2025.5523%2017%2025%2017H9C8.44772%2017%208%2016.5523%208%2016Z%22%20fill%3D%22%23505050%22%2F%3E%3C%2Fsvg%3E");
    --icon-radio:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1311%200.530029C15.497%200.530029%2019.8872%204.92027%2019.8872%2010.2861C19.8872%2015.652%2015.497%2020.0422%2010.1311%2020.0422C4.76524%2020.0422%200.375%2015.652%200.375%2010.2861C0.375%204.92027%204.76524%200.530029%2010.1311%200.530029Z%22%20fill%3D%22%23D2D2D2%22%2F%3E%3Cpath%20d%3D%22M10.131%206.38379C12.2773%206.38379%2014.0334%208.13989%2014.0334%2010.2862C14.0334%2012.4326%2012.2773%2014.1887%2010.131%2014.1887C7.98461%2014.1887%206.22852%2012.4326%206.22852%2010.2862C6.22852%208.13989%207.98461%206.38379%2010.131%206.38379Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
    --icon-radio_on:url("data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2020%2021%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10.1311%200.530029C15.497%200.530029%2019.8872%204.92027%2019.8872%2010.2861C19.8872%2015.652%2015.497%2020.0422%2010.1311%2020.0422C4.76524%2020.0422%200.375%2015.652%200.375%2010.2861C0.375%204.92027%204.76524%200.530029%2010.1311%200.530029Z%22%20fill%3D%22%23FFC800%22%2F%3E%3Cpath%20d%3D%22M10.131%206.38379C12.2773%206.38379%2014.0334%208.13989%2014.0334%2010.2862C14.0334%2012.4326%2012.2773%2014.1887%2010.131%2014.1887C7.98461%2014.1887%206.22852%2012.4326%206.22852%2010.2862C6.22852%208.13989%207.98461%206.38379%2010.131%206.38379Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E");
  }
  .p-section__inner > .p-content:not(:last-of-type) {
    margin-bottom: var(--sec-gap);
  }
  .p-image {
    text-align: center;
  }
  .p-accordion {
    background-color: var(--clr-white);
    border-radius: calc(20 / var(--vw) * 100vw);
  }
  .p-accordion__title {
    padding: calc(10 / var(--vw) * 100vw) var(--content-padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
  }
  .p-accordion__title-image {
    margin-inline: auto;
  }
  .p-accordion__title-image {
    width: calc(198 / var(--vw) * 100vw);
  }
  .p-accordion__icon {
    flex: 0 0 auto;
    width: calc(34 / var(--vw) * 100vw);
    height:  calc(32 / var(--vw) * 100vw);
    border-radius: calc(4 / var(--vw) * 100vw);
    box-shadow: 0px 0px 5px 1px #CFCFCF;
  }
  .p-accordion__icon::after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #505050;
    mask-image: var(--icon-plus);
  }
  .is-open .p-accordion__icon::after {
    mask-image: var(--icon-minus);
  }
  .p-accordion__panel {
    display: none;
    padding: 0 var(--content-padding) calc(10 / var(--vw) * 100vw);
  }
  
  .p-box__inner .p-accordion {
    border-radius: unset;
  }
  .p-box__inner .p-accordion .p-accordion__title,
  .p-box__inner .p-accordion .p-accordion__panel {
    padding-inline: 0;
  }
  .p-coupon {
    position: relative;
    margin-inline: calc(-1 * var(--content-padding));
    padding: calc(38 / var(--vw) * 100vw) var(--content-padding) calc(35 / var(--vw) * 100vw);
  }
  .p-content:not(:has(.p-content__inner)) .p-heading {
    margin-bottom: calc(15 / var(--vw) * 100vw);
  }
  .p-heading__image {
    display: block;
    margin-inline: auto;
    text-align: center;
  }
  .p-heading__image > img {
    width: var(--head-wh);
  }
  .p-heading__image.-paypay_tit_pp-lyp_coupon {
    --head-wh: calc(309.5 / var(--vw) * 100vw);
  }
  .p-coupon > * {
    position: relative;
  }
  .p-coupon > *:not(:last-child) {
    margin-bottom: calc(30 / var(--vw)* 100vw);
  }
  .p-coupon::before {
    content: '';
    display: block;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ddffed;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='28' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='5' height='5' fill='%23505050' fill-opacity='0.03'/%3E%3Crect x='7' y='14' width='5' height='5' fill='%23505050' fill-opacity='0.03'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: calc(14 / var(--vw) * 100vw) calc(28 / var(--vw) * 100vw);
  }
  .p-coupon__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 0;
    margin-inline: calc(-1 * (4 / var(--vw) * 100vw));
  }
  .p-coupon__item {
    width: calc(179 / var(--vw) * 100vw);
    height: calc(164 / var(--vw) * 100vw);
    background-image: url('/sp/ymobile-otoku/images/paypay/coupon/bg_coupon_frame.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
  }
  .p-coupon__link {
    display: block;
    position: relative;
    padding: calc(32 / var(--vw) * 100vw) calc(15 / var(--vw) * 100vw);
  }
  .p-coupon__label {
    width: calc(169 / var(--vw) * 100vw);
    margin: 0;
    padding-block: calc(2 / var(--vw) * 100vw) calc(3 / var(--vw) * 100vw);
    font-size: calc(9 / var(--vw) * 100vw);
    position: absolute;
    top: calc(3 / var(--vw) * 100vw);
    left: 50%;
    transform: translateX(-50%);
    background-color: #f2f2f2;
    border-top-left-radius: calc(5 / var(--vw) * 100vw);
    border-top-right-radius: calc(5 / var(--vw) * 100vw);
  }
  .p-coupon__card-image {
    display: flex;
    padding-inline: calc(5 / var(--vw) * 100vw);
    justify-content: space-between;
  }
  .p-coupon__card-image img {
    width: auto;
    height: calc(60 / var(--vw) * 100vw) !important;
  }
  .p-coupon__card-description {
    margin: calc(8 / var(--vw) * 100vw) calc(-1 * (10 / var(--vw) * 100vw)) 0;
    font-size: 10px;
    transform: scale(.9);
    text-align: center;
    white-space: nowrap;
    letter-spacing: -.02em;
    line-height: 1.7;
  }
  @media (min-width: 391px) {
    .p-coupon__card-description {
      font-size: calc(10 / var(--vw) * 100vw);
    }
  }
  @media (min-width: 769px) {
    .p-content {
      max-width: 800px;
      margin-inline: auto;
    }
    .p-accordion {
      border-radius: 20px;
    }
    .p-accordion__title {
      padding: 20px ;
    }
    .p-accordion__title-image {
      width: 288px;
    }
    .p-accordion__icon {
      width: 34px;
      height: 32px;
      border-radius: 4px;
    }
    .p-accordion__panel {
      padding: 0 20px 20px;
    }
    .p-accordion__panel .p-image img {
      width: 390px;
    }
    .p-content:not(:has(.p-content__inner)) .p-heading {
      margin-bottom: 30px;
    }
    .p-heading__image.-paypay_tit_pp-lyp_coupon {
      --head-wh: 391px;
    }
    .p-coupon {
      margin-inline: 0;
      padding: 60px 0;
    }
    .p-coupon::before {
      background-size: 14px 28px;
    }
  }
  @media (min-width: 880px) {
    .p-coupon > *:not(:last-child) {
      margin-bottom: 30px;
    }
    .p-coupon__list {
      grid-template-columns: repeat(auto-fit, 188px);
      gap: 15px;
      justify-content: space-between;
      margin-inline: 0;
    }
    .p-coupon__item {
      width: 188px;
      height: 149px;
      background-image: url('/sp/ymobile-otoku/images/paypay/coupon/bg_coupon_frame-pc.png');
    }
    .p-coupon__link {
      pointer-events: none;
      padding: 35px 24px 0;
    }
    .p-coupon__label {
      width: 100%;
      font-size: 9px;
      top: 0;
      padding-block: 2px 3px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
    }
    .p-coupon__card-image {
      padding-inline: 5px;
    }
    .p-coupon__card-image img {
      height: 60px !important;
    }
    .p-coupon__card-description {
      margin: 12px -20px 0;
      font-size: 10px;
      transform: scale(.9);
    }
  }