@charset "utf-8";

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

* {
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-behavior: smooth;
}

:is(ul, ol)[class] {
  list-style: "";
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.46;
}

button,
input,
label {
  line-height: 1.1;
}

a[class] {
  text-decoration: none;
  will-change: opacity;
}

a:not([class]) {
  display: block;
  color: #3666CB;
  will-change: opacity;
  text-decoration-skip-ink: auto;
}

a.disabled {
  cursor: auto;
  pointer-events: none;
  opacity: 0.5;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  pointer-events: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

button:not(disabled, .disabled) {
  cursor: pointer;
}

p {
  line-height: 2;
}

a,
button {
  color: var(--clr-primary);
  transition: all .3s;
  -webkit-tap-highlight-color: transparent;
  -webkit-tap-highlight-color: transparent;
}

iframe,
iframe:focus {
  outline: none;
}

table {
  border-collapse: collapse;
}

td,
math,
time[datetime*=":"] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Text meant only for screen readers. */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  word-wrap: normal !important;
}

img {
  pointer-events: none;
}

@font-face {
  font-family: 'Noto Sans JP';
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/NotoSansJP-VariableFont_wght.ttf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-weight: 900;
  font-style: normal;
  src: url('../fonts/ZenKakuGothicNew-Black.ttf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Zen Kaku Gothic Antique';
  font-weight: 900;
  font-style: normal;
  src: url('../fonts/ZenKakuGothicAntique-Black.ttf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica Neue LT Pro';
  font-weight: 700;
  font-style: normal;
  src: url('../fonts/HelveticaNeueLTPro-BdCn.otf') format('opentype');
  font-display: swap;
}

:root {
  --clr-neutral-100: #fff;

  --clr-primary: #231815;

  --clr-yellow-400: #FFF462;

  --clr-blue-400: #00A3DF;
  --clr-blue-500: #0000FF;

  --clr-red-400: #E74660;

  --clr-pink-400: #F7C1B6;

  --clr-border-400: #aaa;
  --clr-border-500: #ccc;
  --clr-border-600: #333;

  --font-primary: "Noto Sans JP", "Helvetica", Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "メイリオ", "ＭＳ Ｐゴシック", "Osaka‐等幅", sans-serif;
  --font-secondary: "Zen Kaku Gothic New", -apple-system, system-ui, sans-serif;
  --font-quaternary: "Zen Kaku Gothic Antique", -apple-system, system-ui, sans-serif;
}

body {
  position: relative;
  height: 100%;
  line-height: 1.5;
  color: var(--clr-primary);
  font-family: var(--font-primary);
  font-size: 16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: break-all;
}

.ff-primary {
  font-family: var(--font-primary);
}

.ff-secondary {
  font-family: var(--font-secondary);
}

.ff-quaternary {
  font-family: var(--font-quaternary);
}

/* Color
  --------------------------------------------------------*/
.bg-white {
  background-color: var(--clr-neutral-100);
}

.clr-white {
  color: var(--clr-neutral-100);
}

.clr-primary {
  color: var(--clr-primary);
}

.clr-red-400 {
  color: var(--clr-red-400);
}

.clr-blue-400 {
  color: var(--clr-blue-400);
}

.clr-blue-500 {
  color: var(--clr-blue-500);
}

/* Layout
--------------------------------------------------------*/
.sec-wrap {
  --max-width: 1250px;
  --padding: 80px;
  width: min(var(--max-width), calc(100% - (var(--padding))));
  margin-inline: auto;
}

.inner-wrap {
  position: relative;
  padding-inline: 3.5rem;
  padding-block: 1.5625rem 6.25rem;
}

.text-center {
  text-align: center;
}

.fs20 {
  font-size: 1.25rem;
}

.fw-regular {
  font-weight: 400;
}

.fw-medium {
  font-weight: 500;
}

.fw-bold {
  font-weight: 700;
}

.d-flex {
  display: flex;
}

.d-grid {
  display: grid;
}

.grid-auto-col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--min-col-size, 546px), 100%), 1fr));
}

.grid-2-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-4-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* ===== Flex Utilities ===== */
.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.items-stretch {
  align-items: stretch;
}

.pcnone {
  display: none;
}

[data-anim="fade-up"] {
  transition: transform 500ms cubic-bezier(0, 0, 0.5, 1), opacity 500ms cubic-bezier(0, 0, 0.5, 1), visibility 500ms cubic-bezier(0, 0, 0.5, 1);
}

/* Button styles */
.btn {
  display: inline-flex;
  position: relative;
  width: 47.625rem;
  max-width: 100%;
  height: 7.8125rem;
  padding-left: min(9.151vw, 125px);
  border: 1px solid transparent;
  border-radius: 23px;
  box-shadow: 5.69px 5.69px 5.69px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg, #EE7D90 50%, #E74660 50%);
  color: var(--clr-neutral-100);
  font-family: var(--font-secondary);
  font-size: 3.25rem;
  font-weight: 900;
  justify-content: start;
  align-items: center;
  padding-block: .75rem 1rem;
  transition: transform .3s ease-out;
  cursor: pointer;
  margin-inline: auto;
  letter-spacing: .1812rem;
}

.btn:after {
  position: absolute;
  top: 50%;
  right: 2.5rem;
  width: 4.375rem;
  height: 4.375rem;
  transform: translateY(-50%);
  background: url(../img/btn_icon_traingle.svg) no-repeat center center / cover;
  content: '';
}

.btn:not(.disabled):is(:hover, :focus-visible, :active) {
  transform: scale(1.03);
  background: linear-gradient(180deg, #e17486 50%, #c8334c 50%);
}

/* Sec ttl */
.sec-ttl {
  width: 100%;
  margin-bottom: 1.875rem;
  border-radius: 100vw;
  color: var(--clr-neutral-100);
  font-family: var(--font-secondary);
  font-size: 2.125rem;
  font-weight: 900;
  text-align: center;
  background-color: var(--clr-blue-400);
  letter-spacing: 1.0625rem;
  padding-block: .125rem;
}

.cmn-sec-p,
.cmn-sec-p p {
  line-height: 1.67;
  font-size: 1.25rem;
  letter-spacing: -0.0737rem;
}

.has-bg-blue-card {
  padding: .625rem .6875rem .9375rem .6875rem;
  border-radius: 23px;
  color: var(--clr-neutral-100);
  font-family: var(--font-secondary);
  font-weight: 900;
  background-color: var(--clr-blue-400);
}

.has-bg-yellow-btn {
  border-radius: 100vw;
  color: var(--clr-blue-400);
  font-family: var(--font-secondary);
  font-size: 1.8125rem;
  font-weight: 900;
  text-align: center;
  background-color: var(--clr-yellow-400);
}

.dot {
  position: relative;
  padding-left: 1.25rem;
}

.dot::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '・';
}

main {
  width: 100%;
  background-image: url(../img/bg_image.png);
  background-repeat: no-repeat;
  background-size: cover;
}

/* main-visual */
.banner-logo-wrap {
  column-gap: 1.125rem;
  row-gap: .625rem;
  align-items: flex-end;
}

.sec-esse {
  padding-block: 3.125rem;
}

.sec-esse img,
.sec-pay img,
.eligible-products img,
.apply-img img {
  width: 100%;
  height: 100%;
}

.campaign-period {
  column-gap: 2.8125rem;
  row-gap: .9375rem;
  grid-template-columns: repeat(2, 1fr);
}

.campaign-period p img {
  padding-top: 1.125rem;
  margin-inline: auto;
}

.cta-section {
  position: fixed;
  right: 5rem;
  bottom: 6.875rem;
  width: 12.5rem;
  max-width: 100%;
  height: 12.5rem;
  visibility: hidden;
  transform: translateY(100px);
  aspect-ratio: 1;
  opacity: 0;
  transition: all 0.5s ease;
}

.cta-section.visible {
  visibility: visible;
  transform: translateY(0);
  opacity: 1;
}

.cta-section .click a {
  transition: transform .3s ease-out;
}

.cta-section .click a:hover {
  transform: scale(1.08);
}

.sec-pay {
  padding-top: 1.875rem;
}

.sec-pay img {
  padding-bottom: 3.125rem;
}

/* eligible-products */
.eligible-products {
  padding-block: 6.4375rem 3.125rem;
}

.eligible-products .notice-txt {
  letter-spacing: -0.04rem;
}

.eligible-products .eligible-img {
  margin-top: 2.1875rem;
}

/* how-to-apply */
.how-to-apply {
  padding-block: 3.75rem 6.25rem;
}

.how-to-apply .apply-img {
  padding-block: 1.875rem 3.125rem;
}

.how-to-apply .step-1,
.how-to-apply .step-2,
.how-to-apply .step-3 {
  position: relative;
  padding-left: 1.5625rem;
}

.how-to-apply .step-1::before,
.how-to-apply .step-2::before,
.how-to-apply .step-3::before {
  position: absolute;
  top: 0;
  left: 0;
}

.how-to-apply .step-1::before {
  content: '①';
}

.how-to-apply .step-2::before {
  content: '②';
}

.how-to-apply .step-3::before {
  content: '③';
}

.privacy-policy {
  margin-bottom: 3.125rem;
  padding: .5625rem 1.25rem .9375rem 1.25rem;
  border: 3px solid var(--clr-blue-400);
  border-radius: 10px;
  font-size: 1.25rem;
}

.privacy-policy p {
  line-height: 1.67;
  letter-spacing: -0.025rem;
}

.privacy-policy span {
  display: block;
  padding-left: 1.25rem;
  letter-spacing: -0.0737rem;
}

.how-to-receipt img {
  padding-top: 1.25rem;
}

.bad-photography {
  padding-top: 1.875rem;
}

.bad-photography .sec-ttl {
  margin-bottom: unset;
}

/* precautions */
.precautions {
  padding-top: 3.125rem;
}

.campaign-inquiries {
  padding-block: 1.875rem 6.25rem;
}

.campaign-inquiries p {
  letter-spacing: -0.025rem;
}

/* footer */
footer {
  color: var(--clr-neutral-100);
  text-align: center;
  background-color: var(--clr-blue-400);
  padding-block: 1.75rem;
  letter-spacing: -0.025rem;
}

footer p {
  line-height: 1.63;
  letter-spacing: -0.025rem;
}

@media (min-width: 64em) and (max-width: 80em) {
  :root {
    --page-scale: 0.72;
  }

  .sec-wrap {
    transform: scale(var(--page-scale));
    transform-origin: top center;
  }

  .inner-wrap {
    padding-inline: 1.875rem;
    padding-block: .9375rem 5rem;
  }

  .campaign-period {
    column-gap: 1.875rem;
  }

  .sec-pay {
    padding-top: unset;
  }

  .sec-esse {
    padding-block: 1.25rem;
  }

  .sec-pay img {
    padding-bottom: 1.875rem;
  }

  .eligible-products {
    padding-block: 3.125rem 1.875rem;
  }

  .sec-ttl {
    margin-bottom: .9375rem;
  }

  .eligible-products .eligible-img {
    margin-top: .9375rem;
  }

  .how-to-apply {
    padding-block: 1.875rem 3.125rem;
  }

  .how-to-receipt img {
    padding-top: unset;
  }

  .campaign-inquiries {
    padding-block: .9375rem 3.125rem;
  }

  .banner-logo-wrap {
    column-gap: .625rem;
    flex-wrap: wrap;
  }

  .has-bg-yellow-btn {
    font-size: 1.5625rem;
  }

  .cta-section {
    right: 15%;
  }

  .cta-section.visible {
    transform: translateY(0) scale(0.8);
  }
}

@media (max-width: 64em) {
  .inner-wrap {
    padding-inline: 1.875rem;
  }

  .banner-logo-wrap {
    flex-wrap: wrap;
    column-gap: .625rem;
  }

  .has-bg-yellow-btn {
    font-size: 2.441vw;
  }

  .campaign-period {
    column-gap: 1.875rem;
  }

  .btn {
    width: 74.414vw;
    padding-left: min(12.207vw, 125px);
    font-size: 5.078vw;
    letter-spacing: 0.283vw;
  }

  .btn:after {
    right: 3.906vw;
    width: 6.836vw;
    height: 6.836vw;
  }

  .cta-section {
    right: 7.813vw;
    bottom: 10.742vw;
    width: 19.531vw;
    height: 19.531vw;
  }
}

@media (max-width: 48em) {
  .sec-wrap {
    --padding: 40px;
  }

  .pcnone {
    display: block;
  }

  .sm-fs-18 {
    font-size: 1.125rem;
  }

  .sm-fs-16 {
    font-size: 1rem;
  }

  .sm-fs-12 {
    font-size: .75rem;
  }

  .inner-wrap {
    padding-inline: 1.25rem;
    padding-block: .875rem 3.125rem;
  }

  .cmn-sec-p,
  .cmn-sec-p p {
    line-height: 1.5;
    font-size: 1rem;
    letter-spacing: -0.04rem;
  }

  .btn {
    width: 100%;
    height: 3.75rem;
    padding-left: min(7.692vw, 30px);
    border-radius: 10px;
    font-size: 1.5rem;
    letter-spacing: .0838rem;
  }

  .btn:after {
    top: 50%;
    right: .75rem;
    width: 2rem;
    height: 2rem;
  }

  .has-bg-yellow-btn {
    font-size: 1rem;
  }

  .sec-esse {
    padding-block: 1.75rem 1.375rem;
  }

  .banner-logo-wrap {
    column-gap: 2.308vw;
    justify-content: center;
  }

  .campaign-period {
    grid-template-columns: 1fr;
  }

  .logo-01 {
    width: 9.231vw;
    height: 4.103vw;
  }

  .logo-02 {
    width: 6.667vw;
    height: 2.821vw;
  }

  .logo-03 {
    width: 12.564vw;
    height: 2.821vw;
  }

  .logo-04 {
    width: 10.256vw;
    height: 2.821vw;
  }

  .logo-05 {
    width: 10.513vw;
    height: 2.821vw;
  }

  .logo-06 {
    width: 18.462vw;
    height: 2.821vw;
  }

  .logo-07 {
    width: 8.462vw;
    height: 3.077vw;
  }

  .logo-08 {
    width: 16.667vw;
    height: 2.308vw;
  }

  .logo-09 {
    width: 9.231vw;
    height: 2.564vw;
  }

  .logo-10 {
    width: 10.769vw;
    height: 3.077vw;
  }

  .logo-11 {
    width: 11.795vw;
    height: 3.333vw;
  }

  .cta-section {
    right: 7.692vw;
    bottom: 17.949vw;
    width: 26.154vw;
    height: 26.154vw;
  }

  .campaign-period p {
    font-size: .8125rem;
  }

  .campaign-period p span {
    font-size: 1.625rem;
  }

  .sec-pay img {
    padding-bottom: 2.1875rem;
  }

  .eligible-products {
    padding-block: 3.75rem 1.875rem;
  }

  .eligible-products .eligible-img {
    margin-top: 1.875rem;
  }

  .eligible-products .eligible-img img {
    min-height: 131.625rem;
  }


  .sec-ttl {
    height: 2.125rem;
    margin-bottom: 1.5rem;
    font-size: 1.25rem;
    letter-spacing: .25rem;
  }

  .how-to-apply {
    padding-block: 1.875rem 3.125rem;
  }

  .precautions {
    padding-top: 1.875rem;
  }

  .precautions .sec-ttl {
    margin-bottom: 1.25rem;
  }

  .campaign-inquiries {
    padding-block: 3.125rem;
  }

  .apply-img img {
    width: 68.974vw;
    height: 161.282vw;
    margin-inline: auto;
  }

  .privacy-policy {
    padding: .125rem .5rem 1.25rem .625rem;
    border: 2px solid var(--clr-blue-400);
    margin-inline: 1.25rem;
  }

  .privacy-policy p {
    font-size: 1rem;
    letter-spacing: -0.02rem;
  }

  .privacy-policy span {
    line-height: 1.5;
    padding-top: .5rem;
    padding-left: .5rem;
    letter-spacing: -0.0625rem;
  }

  .eligible-products .notice-txt {
    line-height: 1.5;
    padding-top: .25rem;
    letter-spacing: -0.0612rem;
  }

  .has-bg-blue-card {
    padding: .25rem .375rem .625rem .375rem;
    border-radius: 13px;
  }

  .campaign-period p img {
    padding-top: .625rem;
  }

  .how-to-apply .step-1,
  .how-to-apply .step-2,
  .how-to-apply .step-3 {
    padding-left: 1.375rem;
  }

  .campaign-period .img-period {
    width: 16.9375rem;
  }

  .campaign-period .img-deadline {
    width: 11.6875rem;
  }

  .how-to-apply .apply-img {
    padding-block: 3.125rem 1.875rem;
  }

  .eligible-products .sec-ttl {
    letter-spacing: .695rem;
  }

  .winner-announcement {
    padding-top: 2.5rem;
  }

  .how-to-receipt img {
    padding-top: .625rem;
  }

  .sec-pay {
    padding-top: 2.1875rem;
  }

  footer {
    padding-block: 1.125rem 1.0625rem;
  }
}

@media (max-width: 24.375rem) {
  .banner-logo-wrap {
    column-gap: .3125rem;
  }
}

@media (max-width: 23.125em) {
  .btn {
    height: 16.216vw;
    padding-left: min(5.405vw, 5.405vw);
    font-size: 4.865vw;
    letter-spacing: 0.362vw;
  }

  .btn:after {
    right: 2.703vw;
    width: 7.568vw;
    height: 7.568vw;
  }
}