@charset "utf-8";

/* --------------------------------------------------
initial settings
-------------------------------------------------- */
:root {
  --color-main: #4f36ce;
  --color-main-light-01: #b5a7fd;
  --color-main-light-02: #cec4ff;
  --color-main-light-03: #dcd8ff;
  --color-main-light-04: #e5e4ff;
  --color-main-light-05: #f1eefe;
  --color-sub: #145ae5;
  --color-sub-light-01: #8cb1fb;
  --color-sub-light-02: #a7c4fd;
  --color-sub-light-03: #bbd1fc;
  --color-sub-light-04: #d1e0fd;
  --color-sub-light-05: #e1eafc;
  
  --color-black: #1e1d26;
  --color-gray: #e3e3e3;
  --color-gray-light: #f1f1f1;
  --color-gray-dark: #767676;

  --color-main-01: rgba(79, 54, 206, 0.1);
  --color-black-03: rgba(30, 29, 38, 0.3);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  overflow-x: hidden;
}

body {
  font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
  color: var(--color-black);
  overflow-x: hidden;
}

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

ol, ul {
  list-style: none;
}

ol.need-list-style, ul.need-list-style {
  list-style-type: disc;
  padding-inline-start: 16px;
}

p {
  font-size: 16px;
  line-height: 1.6;
}

a {
  text-decoration: none;
  color: var(--color-black);
  transition: all 0.3s;
}

a:hover {
  color: var(--color-pink);
}

img {
  display: block;
  width: 100%;
}

button {
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 16px;
}

input, textarea {
  font-size: 16px;
  font-family: inherit;
}

small {
  font-size: 12px;
}

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

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

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

@media screen and (min-width: 768px) {
  .md_text-left {
    text-align: left;
  }

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

  .md_text-right {
    text-align: right;
  }
}

@media screen and (min-width: 1024px) {
  html {
    scroll-padding-top: 96px;
  }

  p {
    font-size: 18px;
  }

  small {
    font-size: 14px;
  }

  .lg_text-left {
    text-align: left;
  }

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

  .lg_text-right {
    text-align: right;
  }
}


/* --------------------------------------------------
display hidden or block
-------------------------------------------------- */
.hidden {
  display: none !important;
}

@media screen and (min-width: 768px) {
  .md_hidden {
    display: none !important;
  }

  .md_block {
    display: block !important;
  }

  .md_flex {
    display: flex !important;
  }
}

@media screen and (min-width: 1024px) {
  .lg_hidden {
    display: none !important;
  }

  .lg_block {
    display: block !important;
  }

  .lg_flex {
    display: flex !important;
  }
}

@media screen and (min-width: 1280px) {
  .xl_hidden {
    display: none !important;
  }

  .xl_block {
    display: block !important;
  }

  .xl_flex {
    display: flex !important;
  }
}


/* --------------------------------------------------
button setting
-------------------------------------------------- */
.btn {
  display: block;
  border-radius: 16px;
  transition: all 0.3s;
  font-weight: bold;
  text-align: center;
  font-size: 15px;

  position: relative;

  &::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent;
    border-radius: inherit;
    transition: transform 0.25s ease;
    z-index: 0;
  }

   & > * {
    position: relative;
    z-index: 1;
  }

  &:hover::before {
    transform: scale(1.05);
  }
}

.btn-thick {
  padding: 20px 24px;
  min-height: 88px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.btn-thick > i:nth-of-type(1) {
  font-size: 32px;
  width: 40px;
}

.btn-thick > span {
  text-align: left;
}

.btn-thick > i:nth-of-type(2) {
  font-size: 20px;
  margin-left: auto;
}

.btn.btn-main {
  color: white;

  &::before {
    content: "";
    background: var(--color-main);
  }
}

.btn.btn-main-with-border {
  color: white;

  &::before {
    content: "";
    background: var(--color-main);
    border: 2px solid white;
  }
}

.btn.btn-white {
  color: var(--color-main);

  &::before {
    content: "";
    background: white;
  }
}

@media screen and (min-width: 1024px) {
  .btn {
    font-size: 16px;
  }
}


/* --------------------------------------------------
common
-------------------------------------------------- */
.text-accent-main {
  color: var(--color-main);
}

.text-accent-sub {
  color: var(--color-sub);
}

.marker {
  --marker-thickness: 0.9em;
  padding-bottom: 4px;
  background-image: linear-gradient(var(--color-main-light-03), var(--color-main-light-03));
  background-repeat: no-repeat;
  background-size: 0% var(--marker-thickness);
  background-position: 0 100%;
  transition: background-size 3s ease;

  &.is-active {
    background-size: 100% var(--marker-thickness);
  }
}

.bg-black {
  background-color: var(--color-black);
  color: white;
}

.bg-gradation {
  background: linear-gradient( 135deg, var(--color-main-light-02) 0%, var(--color-main-light-04) 30%, var(--color-sub-light-04) 70%, var(--color-sub-light-02) 100%);
}

.md_container {
  max-width: calc(768px - 48px);
  margin: 0 auto;
}

.lg_container {
  max-width: calc(1024px - 48px);
  margin: 0 auto;
}

.xl_container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-padding-y {
  padding-top: 48px;
  padding-bottom: 48px;
}

.section-heading {
  margin-bottom: 32px;
}

.section-heading-title-en {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  font-family: "Stack Sans Headline", sans-serif;
  line-height: 1;
  margin-bottom: 8px;
  color: var(--color-main);
}

.section-heading-title-ja {
  text-align: center;
  font-size: 20px;
  width: fit-content;
  margin: 0 auto;
  line-height: 1.5;
  
  &::after {
    content: "";
    display: flex;
    height: 4px;
    background-color: var(--color-main-light-01);
    margin-top: 6px;
  }
}

.section-heading-desc {
  margin-top: 16px;
}

.box-padding-t {
  padding-top: 48px;
}

.box-heading-title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
  .section-heading-title-ja {
    line-height: 1;
  }

  .section-heading-desc {
    text-align: center;
  }
}

@media screen and (min-width: 1024px) {
  .section-padding-y {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .section-heading {
    margin-bottom: 48px;
  }

  .section-heading-title-en {
    font-size: 24px;
  }

  .section-heading-title-ja {
    font-size: 28px;
  }

  .section-heading-desc {
    margin-top: 24px;
  }

  .box-padding-t {
    padding-top: 80px;
  }

  .box-heading-title {
    font-size: 24px;
    margin-bottom: 32px;
  }
}

@media screen and (min-width: 1280px) {
  .section-heading-title-en {
    margin-bottom: 16px;
  }

  .section-heading-title-ja {
    font-size: 32px;
  }
}


/* --------------------------------------------------
pie-graph setting
-------------------------------------------------- */
@property --p {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

.pie-graph-pie {
  --p: 0;
  transition: --p 0.7s ease-out;
}


/* --------------------------------------------------
header
-------------------------------------------------- */
.header {
  position: fixed;
  z-index: 1000;
  width: 100%;
}

.header-outer {
  position: relative;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  transition: height 1s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.5s, box-shadow 0.5s;
}

.header-inner {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  position: relative;
}

.header-logo a {
  display: flex;
  align-items: center;
}

.header-logo a img {
  width: auto;
  height: 32px;
}

.header-logo-normal {
  display: none;
  opacity: 0;
  transition: opacity 0.5s;
}

.header-logo-white {
  display: block;
  opacity: 1;
  transition: opacity 0.5s;
}

.header-btn a {
  border-radius: 8px;
  padding: 12px 16px;
  background-color: var(--color-main);
  color: white;
  font-size: 14px;
  line-height: 1;
}

@media screen and (min-width: 1024px) {
  .header-inner {
    height: 96px;
  }

  .header-btn a {
    padding: 16px 24px;
    font-size: 16px;
  }
}


/* --------------------------------------------------
header - is-scroll
-------------------------------------------------- */
#header.is-scroll .header-bg {
  background-color: white;
  box-shadow: 0 0 4px var(--color-gray-03);
}

#header.is-scroll .header-logo-normal {
  display: block;
  opacity: 1;
}

#header.is-scroll .header-logo-white {
  display: none;
  opacity: 0;
}


/* --------------------------------------------------
hero
-------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: calc(80px + 24px);
  padding-bottom: 48px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.hero-bg picture, .hero-bg img {
  width: 100%;
  height: 100%;
}

.hero-bg img {
  object-fit: cover;
  object-position: center;
}

.hero-bg-blur {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--color-main-01);
  backdrop-filter: blur(3px);
}

.hero-wrapper {
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  color: white;
}

.hero-content-sp-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.hero-title {
  line-height: 1;
  letter-spacing: 0.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  & > span:nth-of-type(1) {
    font-size: 22px;
  }

  & > span:nth-of-type(2) {
    font-size: 32px;
    margin-top: 16px;
  }

  & > span:nth-of-type(3) {
    font-size: 32px;
    margin-top: 18px;
  }

  .text-accent-main {
    font-size: 44px;
    text-shadow: 0 0 12px rgba(255, 255, 255, 1), 0 0 12px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 1), 0 0 8px rgba(255, 255, 255, 1);
    margin-right: 2px;
  }

  .hero-title-small {
    font-size: 22px;
  }
}

.hero-sub-title {
  background-color: var(--color-main);;
  color: white;
  border: 2px solid white;
  width: fit-content;
  text-align: center;
  font-weight: bold;
  border-radius: 50px;
  line-height: 1;
  font-size: 18px;
  padding: 8px 20px;
}

.hero-desc .hero-desc-items {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05rem;
}

.hero-img {
  width: 80%;
  margin: 16px auto;
  max-width: 400px;
}

.hero-img img {
  filter: drop-shadow(0 16px 40px rgba(255,255,255,0.1));
  height: auto;
}

.hero-btns {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.for-advertiser.hero-btns-item i {
  background: linear-gradient(30deg, var(--color-main), var(--color-main-light-02));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.for-publisher.hero-btns-item i {
  background: linear-gradient(30deg, var(--color-sub), var(--color-sub-light-02));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-btns-item span {
  font-size: 14px;
}

.for-advertiser.hero-btns-item span {
  color: var(--color-main);
}

.for-publisher.hero-btns-item span {
  color: var(--color-sub);
}

@media screen and (min-width: 768px) {
  .hero-content {
    flex-direction: row;
    gap: 48px;
  }

  .hero-content-sp-left, .hero-content-right {
    width: 50%;
    align-items: flex-start;
  }

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

  .hero-desc .hero-desc-items {
    align-items: flex-start;
    font-size: 14px;
  }

  .hero-img {
    width: 100%;
    margin: 0 auto;
    max-width: 640px;
    padding-right: 16px;
  }

  .hero-btns {
    flex-direction: row;
    max-width: 800px;
    margin: 0 auto;
    gap: 24px;
  }

  .hero-btns-item span {
    font-size: 15px;
  }
}

@media screen and (min-width:  1024px) {
  .hero {
    padding-top: calc(96px + 40px);
    padding-bottom: 80px;
  }

  .hero-title {
    & > span:nth-of-type(1) {
      font-size: 28px;
    }

    & > span:nth-of-type(2) {
      font-size: 44px;
      margin-top: 20px;
    }

    & > span:nth-of-type(3) {
      font-size: 44px;
      margin-top: 20px;
    }

    .text-accent-main {
      font-size: 56px;
    }

    .hero-title-small {
      font-size: 28px;
    }
  }

  .hero-sub-title {
    font-size: 20px;
  }

  .hero-desc .hero-desc-items {
    font-size: 20px;
  }

  .hero-btns-item span {
    font-size: 16px;
  }
}

@media screen and (min-width: 1280px) {
  .hero-content-sp-left {
    gap: 28px;
  }

  .hero-title {
    & > span:nth-of-type(1) {
      font-size: 32px;
    }

    & > span:nth-of-type(2) {
      font-size: 56px;
    }

    & > span:nth-of-type(3) {
      font-size: 56px;
      margin-top: 24px;
    }

    .text-accent-main {
      font-size: 80px;
    }

    .hero-title-small {
      font-size: 30px;
    }
  }

  .hero-desc .hero-desc-items {
    font-size: 22px;
  }
}

/* --------------------------------------------------
cta
-------------------------------------------------- */
.cta {
  position: relative;
}

.cta-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.cta-bg picture, .cta-bg img {
  width: 100%;
  height: 100%;
}

.cta-bg img {
  object-fit: cover;
  object-position: center;
}

.download-bg-blur {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--color-black-03);
  backdrop-filter: blur(4px);
}

.cta .section-heading-title-ja {
  color: white;
}

.cta-wrapper {
  position: relative;
  z-index: 10;
}

.cta-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.cta-text {
  color: white;
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
}

.cta-btns {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.cta-btn-item {
  border-radius: 16px;
}

.cta-btn-item .btn.btn-white {
  padding: 32px 24px;
  color: var(--color-black);
}

.cta-btn-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.cta-btn-text i {
  font-size: 64px;
}

.for-advertiser .cta-btn-text i {
  background: linear-gradient(30deg, var(--color-main), var(--color-main-light-02));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.for-publisher .cta-btn-text i {
  background: linear-gradient(30deg, var(--color-sub), var(--color-sub-light-02));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cta-btn-text h3 {
  font-size: 18px;
  line-height: 1;
}

.for-advertiser .cta-btn-text h3 {
  color: var(--color-main);
}

.for-publisher .cta-btn-text h3 {
  color: var(--color-sub);
}

.cta-btn-text p {
  font-size: 14px;
  line-height: 1;
  margin-top: -4px;
}

.cta-btn-icon {
  position: absolute;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
}

.for-advertiser .cta-btn-icon {
  color: var(--color-main);
}

.for-publisher .cta-btn-icon {
  color: var(--color-sub);
}

.cta-btn-icon i {
  font-size: 24px;
}

@media screen and (min-width: 768px) {
  .cta-btns {
    flex-direction: row;
  }

  .cta-text {
    font-size: 18px;
  }

  .cta-btn-item {
    width: calc(50% - 12px);
  }
}

@media screen and (min-width: 1024px) {
  .cta-text {
    font-size: 20px;
  }
}

@media screen and (min-width: 1280px) {
  .cta-text {
    font-size: 24px;
  }

  .cta-btn-text h3 {
    font-size: 20px;
  }

  .cta-btn-text p {
    font-size: 16px;
  }
}


/* --------------------------------------------------
download
-------------------------------------------------- */
.download {
  position: relative;
}

.download-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.download-bg picture, .download-bg img {
  width: 100%;
  height: 100%;
}

.download-bg img {
  object-fit: cover;
  object-position: center;
}

.download-bg-blur {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-color: var(--color-black-03);
  backdrop-filter: blur(4px);
}

.download .section-heading-title-ja {
  color: white;
}

.download02 .section-heading-title-ja {
  &::after {
    background-color: var(--color-gray);
  }
}

.download-wrapper {
  position: relative;
  z-index: 10;
}

.dl-desc {
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  padding: 8px 0;
}

.dl-desc-inner {
  font-weight: bold;
  background-color: white;
  color: var(--color-dark-gray);
  border-radius: 8px;
  padding: 24px;
  outline: 4px solid white;
  outline-offset: 4px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dl-text ul {
  list-style: none;
  margin: 8px 0 8px -16px;
  line-height: 1.7;
}

.dl-text ul i {
  margin-right: 8px;
}

.dl-img {
  width: 80%;
  margin: 0 auto;
  max-width: 400px;
  transition: transform 0.5s ease;
}

.dl-img img {
  height: auto;
}

.dl-img:hover {
  transform: scale(1.02);
}

.dl-img img {
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));
}

.dl-btn {
  margin: 32px auto 0;
}

.download01 .dl-btn a {
  color: var(--color-main);
}

.download01 .dl-btn a i {
  background: linear-gradient(30deg, var(--color-main), var(--color-main-light-02));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.download02 .dl-btn a {
  color: var(--color-sub);
}

.download02 .dl-btn a i {
  background: linear-gradient(30deg, var(--color-sub), var(--color-sub-light-02));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media screen and (min-width: 768px) {
  .dl-desc-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 32px;
    gap: 32px;
  }

  .dl-text {
    width: calc(60% - 16px);
  }

  .dl-img {
    width: calc(40% - 16px);
  }

  .dl-btn {
    width: 400px;
  }
}

@media screen and (min-width: 1024px) {
  .dl-desc-inner {
    padding: 48px;
  }

  .dl-text ul {
    font-size: 18px;
    line-height: 2;
  }

  .dl-btn {
    margin: 48px auto 0;
  }
}

@media screen and (min-width: 1280px) {
  .dl-text p, .dl-text ul {
    font-size: 20px;
  }
}


/* --------------------------------------------------
about
-------------------------------------------------- */
.about-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.about-desc {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about-img {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.about-img img {
  height: auto;
}

@media screen and (min-width: 1024px) {
  .about-grid {
    flex-direction: row;
    gap: 48px;
    width: 100%;
  }

  .about-desc, .about-img {
    width: 50%;
  }
}

@media screen and (min-width: 1280px) {
  .about-grid {
    gap: 64px;
  }
}


/* --------------------------------------------------
advantages
-------------------------------------------------- */
.advantages-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.advantages-item {
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.advantages-text {
  font-size: 16px;
  text-align: center;
}

.advantages-evidence-num {
  font-size: 12px;
  margin-left: 4px;
}

.advantages-data {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.advantages-num {
  color: var(--color-main);
  font-size: 100px;
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 2px;
  line-height: 1;

  span {
    font-size: 48px;
    margin-left: 4px;
  }
}

.advantages-pie {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(var(--color-main) calc(var(--p) * 1%), var(--color-gray) 0);
}

.advantages-evidence-links {
  margin-top: 24px;
  width: fit-content;
  margin-left: auto;
  text-align: right;
}

.advantages-evidence-links li {
  &:hover a {
    color: var(--color-main);
  }

  a {
    text-decoration: underline;
  }
}

@media screen and (min-width: 768px) {
  .advantages-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .advantages-item {
    width: calc((100% - 24px) / 2);
  }
}

@media screen and (min-width: 1024px) {
  .advantages-item {
    width: calc((100% - 48px) / 3);
  }
}

@media screen and (min-width: 1280px) {
  .advantages-item {
    gap: 24px;
  }

  .advantages-text {
    font-size: 18px;
  }

  .advantages-data {
    .advantages-num {
      font-size: 120px;  

      span {
        font-size: 64px;
      }
    }

    .advantages-pie {
      width: 120px;
      height: 120px;
    }
  }
}


/* --------------------------------------------------
reasons
-------------------------------------------------- */
.reasons-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.reasons-item {
  padding: 32px 24px;
  border-radius: 16px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  background-color: var(--color-main-light-05);
  border: 2px solid var(--color-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.reasons-img {
  background-color: white;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: calc(30% - 8px);
}

.reasons-img img {
  width: 60%;
  height: auto;
}

.reasons-text {
  width: calc(70% - 8px);
}

.reasons-title {
  font-size: 16px;
  margin-bottom: 8px;
}

.reasons-desc {
  font-size: 14px;
}

@media screen and (min-width: 768px) {
  .reasons-list {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .reasons-item {
    width: calc((100% - 24px) / 2);
  }
}

@media screen and (min-width: 1024px) {
  .reasons-item {
    width: calc((100% - 48px) / 3);
  }
}

@media screen and (min-width: 1280px) {
  .reasons-title {
    font-size: 18px;
  }

  .reasons-desc {
    font-size: 16px;
  }
}


/* --------------------------------------------------
scenses
-------------------------------------------------- */
.scenes-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.scenes-block {
  background-color: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  border: 2px solid var(--color-main);
}

.scenes-block h3 {
  font-size: 18px;
  color: var(--color-main);
  border-bottom: 1px solid var(--color-gray);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

.scenes-block h3 i {
  margin-right: 6px;
}

.scenes-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.scenes-item {
  background-color: white;
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
}

.scenes-img {
  width: 100px;
  border-radius: 8px;
}

.scenes-img img {
  height: auto;
  border-radius: 8px;
}

.scenes-text {
  width: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 16px;
}

.game-genre .scenes-list li .scenes-img {
  background-color: var(--color-gray-light);
}

.scenes-text h4 {
  font-size: 16px;
  margin-bottom: 4px;
  line-height: 1.5;
  color: var(--color-main);
}

.scenes-text p {
  font-size: 14px;
}

@media screen and (min-width: 768px) {
  .scenes-blocks {
    flex-direction: row;
    justify-content: space-between;
  }

  .scenes-block {
    width: calc(50% - 12px);
  }
}

@media screen and (min-width: 1280px) {
  .scenes-blocks {
    gap: 32px;
  }

  .scenes-block {
    padding: 32px;
  }

  .scenes-block h3 {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .scenes-list {
    gap: 32px;
  }

  .scenes-img {
    width: 120px;
  }

  .scenes-text {
    width: calc(100% - 120px);
    padding-left: 24px;
  }

  .scenes-text h4 {
    font-size: 18px;
  }

  .scenes-text p {
    font-size: 16px;
  }
}


/* --------------------------------------------------
how-to-use
-------------------------------------------------- */
.howto-blocks {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.howto-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.howto-title {
  display: flex;
  gap: 16px;
}

.howto-title-icon {
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.for-advertiser .howto-title-icon {
  background: linear-gradient(30deg, var(--color-main), var(--color-main-light-02));
}

.for-publisher .howto-title-icon {
  background: linear-gradient(30deg, var(--color-sub), var(--color-sub-light-02));
}

.howto-title-icon i {
  font-size: 24px;
  color: white;
}

.howto-title-text h3 {
  font-size: 18px;
}

.for-advertiser .howto-title-text h3 {
  color: var(--color-main);
}

.for-publisher .howto-title-text h3 {
  color: var(--color-sub);
}

.howto-title-text h4 {
  font-size: 16px;
  margin: 8px 0;
}

.howto-title-text p {
  font-size: 14px;
}

.howto-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.howto-item {
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  border: 2px solid var(--color-main);
}

.for-advertiser .howto-item {
  border: 2px solid var(--color-main);
  background-color: var(--color-main-light-05);
}

.for-publisher .howto-item {
  border: 2px solid var(--color-sub);
  background-color: var(--color-sub-light-05);
}

.howto-item-header {
  display: flex;
  gap: 16px;
}

.howto-item-title {
  width: calc(70% - 8px);
}

.howto-item-img {
  width: calc(30% - 8px);
  max-width: 100px;
  margin-left: auto;
}

.howto-item-img img, .howto-item-right img {
  filter: drop-shadow(0 4px 2px rgba(255, 255, 255, 0.7));
  height: auto;
}

.howto-item-title-num {
  color: white;
  font-weight: bold;
  font-size: 14px;
  width: fit-content;
  border-radius: 4px;
  padding: 4px 12px;
}

.for-advertiser .howto-item-title-num {
  background-color: var(--color-main);
}

.for-publisher .howto-item-title-num {
  background-color: var(--color-sub);
}

.howto-item-title-head {
  font-size: 16px;
  margin: 16px 0 12px;
}

.howto-item-desc {
  font-size: 14px;
}

.howto-item-right {
  display: none;
}

@media screen and (min-width: 768px) {
  .howto-item {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .howto-item-title {
    width: 100%;
  }

  .howto-item-img {
    display: none;
  }

  .howto-item-left {
    width: calc(70% - 12px);
  }

  .howto-item-right {
    display: block;
    width: calc(30% - 12px);
    max-width: 200px;
    margin-left: auto;
  }
}

@media screen and (min-width: 1024px) {
  .howto-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto repeat(3, auto);
    gap: 24px;
    align-items: start;
  }

  .howto-block {
    width: 100%;
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    gap: 0;
  }

  .howto-title {
    align-self: start;
  }

  .howto-list {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: 0;
  }

  .howto-item {
    margin-top: 24px;
  }
}

@media screen and (min-width: 1280px) {
  .howto-blocks {
    gap: 40px;
  }

  .howto-title-icon {
    width: 80px;
    height: 80px;
  }

  .howto-title-icon i {
    font-size: 40px;
  }

  .howto-title-text h3 {
    font-size: 24px;
  }

  .howto-title-text h4 {
    font-size: 18px;
    margin: 12px 0;
  }

  .howto-title-text p {
    font-size: 16px;
  }

  .howto-item-title-head {
    font-size: 20px;
    margin: 20px 0 16px;
  }

  .howto-item-desc {
    font-size: 16px;
  }
}


/* .howto-blocks {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.howto-block {
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.for-advertiser.howto-block {
  background-color: var(--color-main-light-05);
  border: 2px solid var(--color-main);
}

.for-publisher.howto-block {
  background-color: var(--color-sub-light-05);
  border: 2px solid var(--color-sub);
}

.howto-target {
  color: white;
  width: fit-content;
  border-radius: 4px;
  padding: 8px 12px;
  line-height: 1;
  font-size: 14px;
  font-weight: bold;
}

.for-advertiser .howto-target {
  background-color: var(--color-main);
}

.for-publisher .howto-target {
  background-color: var(--color-sub);
}

.howto-title {
  font-size: 18px;
  line-height: 1;
}

.howto-title i {
  margin-right: 6px;
}

.for-advertiser .howto-title i {
  color: var(--color-main);
}

.for-publisher .howto-title i {
  color: var(--color-sub);
}

.howto-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.howto-item h4 {
  font-size: 15px;
  margin-bottom: 4px;
}

.howto-item p {
  font-size: 13px;
}

@media screen and (min-width: 768px) {
  .howto-blocks {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
  }

  .howto-block {
    width: calc(50% - 12px);
  }
}

@media screen and (min-width: 1280px) {
  .howto-blocks {
    gap: 32px;
  }

  .howto-block {
    gap: 32px;
  }

  .howto-target {
    font-size: 16px;
  }

  .howto-title {
    font-size: 22px;
  }

  .howto-item h4 {
    font-size: 17px;
    margin-bottom: 8px;
  }

  .howto-item p {
    font-size: 15px;
  }
} */


/* --------------------------------------------------
faq
-------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item {
  background-color: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.05);
}

.faq-item dt {
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 4px;
}

.faq-item dt .text-accent-sub {
  font-size: 24px;
  margin-right: 6px;
  line-height: 1;
}

.faq-item dd {
  font-size: 14px;
  line-height: 1.8;
}

@media screen and (min-width: 1024px) {
  .faq-list {
    gap: 24px;
  }
}

@media screen and (min-width: 1280px) {
 .faq-item dt {
    font-size: 18px;
  }

  .faq-item dt .text-accent-sub {
    font-size: 28px;
  }

  .faq-item dd {
    font-size: 16px;
  }
}


/* --------------------------------------------------
footer
-------------------------------------------------- */
.footer {
  background-color: var(--color-black);
  border-top: 1px solid var(--color-gray);
  color: white;
}

.footer a {
  color: white;
}

.footer a:hover {
  color: var(--color-main-light-01);
}

.footer-inner {
  padding-top: 32px;
  padding-bottom: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
}

.footer-company {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.footer-logo {
  width: fit-content;
}

.footer-logo a {
  display: flex;
  align-items: center;
}

.footer-logo a img {
  width: auto;
  height: 32px;
}

.footer-links {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-links a + a {
  border-left: 1px solid white;
  padding-left: 16px;
}

.footer-related h2 {
  font-size: 14px;
  margin-bottom: 4px;
}

.footer-related ul {
  font-size: 14px;
  line-height: 2;
}

@media screen and (min-width: 768px) {
  .footer-inner {
    padding-top: 48px;
    padding-bottom: 48px;
    flex-direction: row-reverse;
    align-items: flex-start;
  }

  .footer-related {
    width: calc(50% - 32px);
  }

  .footer-company {
    width: calc(50% - 32px);
  }
}


/* --------------------------------------------------
fade-up setting
-------------------------------------------------- */
.fade-up-item {
  transition: opacity 1s, transform 1s ease;
  transform: translateY(50px);
  opacity: 0;
}

@media screen and (min-width: 768px) {
  .fade-up-item-grid-01 {
    transform: translateY(50px);
  }

  .fade-up-item-grid-02 {
    transform: translateY(150px);
  }

  .fade-up-item-grid-03 {
    transform: translateY(50px);
  }
}

@media screen and (min-width: 1024px) {
  .fade-up-item-grid-01 {
    transform: translateY(50px);
  }

  .fade-up-item-grid-02 {
    transform: translateY(150px);
  }

  .fade-up-item-grid-03 {
    transform: translateY(250px);
  }

  .fade-up-item-howto-01 {
    transform: translateY(50px);
  }

  .fade-up-item-howto-02 {
    transform: translateY(250px);
  }
}

.is-fade-up {
  transform: translateY(0);
  opacity: 1;
}


/* --------------------------------------------------
scale-in setting
-------------------------------------------------- */
.scale-in {
  opacity: 0;
  transform: scale(0.5);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease-out;

  &.is-active {
    opacity: 1;
    transform: scale(1);
  } 
}