@charset "UTF-8";
html, body {
  height: auto;
  overflow-x: hidden;
}

/* ウィンドウのスクロールバーは非表示（見た目維持）。スクロール自体はページ全体で行う */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  margin: 0;
  font-family: "Noto Sans" ,"sans-serif";
  font-size: 16px;
  line-height: 130%;
  color: #0B041D;
  font-weight: normal;
}

img {
  max-width: 100%;
}

button {
  background: none;
  border: none;
  display: block;
  width: 100%;
  text-align: center;
}

a {
  scroll-behavior: smooth;
}

a:hover {
  opacity: 0.6;
}

/* ボタンはホバーで色反転のみ。不透明度は下げない */
.Btn a:hover {
  opacity: 1;
}

.mainArea {
  position: relative;
  background: #FFF;
  display: flex;
  flex-direction: row;
  justify-content: center;
  min-height: 100vh;
}

.mainArea::before {
  content: "";
  display: block;
  width: 100vw;
  height: 100vh;
  background-image: url(/materials/docs/images/promotion/PC_bg.svg);
  background-size: cover;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
}

.mainArea .beans-illu {
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  overflow: hidden;
  pointer-events: none;
}

.mainArea .beans-illu img {
  position: absolute;
}

.mainArea .beans-illu img:nth-child(1) {
  top: -30px;
  left: -30px;
}

.mainArea .beans-illu img:nth-child(2) {
  top: 20%;
  left: 15%;
}

.mainArea .beans-illu img:nth-child(3) {
  bottom: 20%;
  left: 8%;
}

.mainArea .beans-illu img:nth-child(4) {
  top: 10%;
  right: 28%;
}

.mainArea .beans-illu img:nth-child(5) {
  top: 40%;
  right: 8%;
}

.mainArea .beans-illu img:nth-child(6) {
  bottom: -30px;
  right: 25%;
}

.mainArea .fuwafuwa01 {
  animation: fuwafuwa01 6s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

.mainArea .fuwafuwa02 {
  animation: fuwafuwa02 2.5s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

.mainArea .fuwafuwa03 {
  animation: fuwafuwa02 4s ease-in-out infinite alternate;
  transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa01 {
  0% {
    transform: translate(0, 0) rotate(-20deg);
  }
  50% {
    transform: translate(0, -20px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(20deg);
  }
}

@keyframes fuwafuwa02 {
  0% {
    transform: translate(0, 0) rotate(44deg);
  }
  50% {
    transform: translate(0, -25px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(-44deg);
  }
}

@keyframes fuwafuwa03 {
  0% {
    transform: translate(0, 0) rotate(-8deg);
  }
  50% {
    transform: translate(0, -40px) rotate(0deg);
  }
  100% {
    transform: translate(0, 0) rotate(8deg);
  }
}

.spArea {
  position: relative;
  z-index: 99;
  background: #fff;
  width: 390px;
  overflow: visible;
  padding-bottom: 84px; /* 追従CTAボタンぶんの余白 */
}

/* ===== 追従CTAボタン（スマホ画面下部に固定・背景は横いっぱい） ===== */
.fixBtn {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 390px;
  max-width: 100%;
  z-index: 999;
  background: rgba(255, 255, 255, 0.7);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}

.fixBtn .Btn a {
  box-shadow: 0 4px 4px rgba(123, 54, 13, 0.2);
}

.spArea .mainwrap {
  background-color: #fff;
}

.Btn {
  width: 100%;
  display: flex;
  padding: 0 var(--spacing-2xl, 24px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-self: stretch;
}

.Btn a {
  display: flex;
  height: 52px;
  padding: var(--spacing-lg, 16px) var(--spacing-4xl, 40px);
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm, 8px);
  align-self: stretch;
  border-radius: 60px;
  border: 2px solid #FC7D33;
  font-weight: bold;
}

/* ボタンの矢印アイコン: 文字色に追従（ホバー反転でも常に見える） */
.Btn a .btn-arrow {
  width: 6px;
  height: 12px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(/materials/docs/images/promotion/arrow_btn.svg) no-repeat center / 6px 12px;
  mask: url(/materials/docs/images/promotion/arrow_btn.svg) no-repeat center / 6px 12px;
}

.mainBtn a {
  background: #FC7D33;
  color: #fff;
}

.mainBtn a:hover {
  background: #FFF;
  color: #FC7D33;
}

.subBtn a {
  background: white;
  color: #FC7D33;
}

.subBtn a:hover {
  background: #FC7D33;
  color: #FFF;
}

.bg {
  background: #F5FAFD;
}

.bg_space {
  display: flex;
  padding: var(--spacing-3xl, 32px) var(--spacing-lg, 16px);
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-3xl, 32px);
}

.title {
  z-index: 99;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin-top: -110px;
}

.title p {
  color: #FDD001;
  font-weight: bold;
}

.title h2 {
  font-size: 18px;
  line-height: 180%;
}

.title h2 span {
  font-size: 32px;
  background-image: linear-gradient(0deg, transparent 0.15em, #ffe56c 0.15em, #ffe56c 0.45em, transparent 0.45em);
  margin: 0 4px;
}

.title h2 span.num {
  font-size: 56px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold;
  letter-spacing: 0.08em;
  background-image: none;
  margin: 0;
}

.title small {
  color: #2F71B9;
}

#fap .title h2, #cp .title h2 {
  font-size: 32px;
  line-height: 100%;
}

h3 {
  font-size: 18px;
  line-height: 160%;
}

h3 span {
  font-size: 32px;
}

header {
  background: transparent;
}

header .logo {
  padding: 8px;
  width: 123px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}

/* ロゴ（ヘッダー / PC左 / フッター）をトップページリンクに */
header .logo a,
.leftArea a,
footer .footer-logo a {
  display: inline-flex;
  line-height: 0;
}

/* ===== FV ===== */
.FV {
  background: #F5FAFD url(/materials/docs/images/promotion/fv-bg.png) top center / 100% auto no-repeat;
}

.FV .fv-inner {
  background: none;
  padding: 0 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.FV .kv {
  width: 262px;
  margin: 19px auto 0;
}

.FV .kv img {
  width: 100%;
  display: block;
}

.FV .fv-catch {
  margin: 26px 0 0;
  padding: 0 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.FV .fv-catch img {
  width: 279px;
  max-width: 90%;
  margin: 0 auto;
}

.FV .badge-area {
  margin-top: 32px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.FV .badge-lead {
  color: #00388B;
  font-weight: bold;
  font-size: 20px;
  line-height: 140%;
  letter-spacing: -0.05em;
}

.FV .badges {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
}

.FV .badge {
  width: 90px;
  height: 90px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.FV .badge img {
  display: block;
}

.FV .badge span {
  font-size: 13px;
  font-weight: bold;
  line-height: 130%;
}

.FV .badge--game {
  background: rgba(230, 46, 139, 0.05);
}

.FV .badge--game span {
  color: #E62E8B;
}

.FV .badge--game img {
  width: 52px;
}

.FV .badge--video {
  background: rgba(107, 22, 133, 0.05);
}

.FV .badge--video span {
  color: #6B1685;
}

.FV .badge--video img {
  width: 39px;
}

.FV .badge--ebook {
  background: rgba(69, 176, 53, 0.05);
}

.FV .badge--ebook span {
  color: #45B035;
}

.FV .badge--ebook img {
  width: 47px;
}

.FV .merit {
  margin-top: 32px;
  width: 77.44%; /* 302 / 390：デザイン基準幅に対する比率（画面幅が広くても比率を維持） */
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 8px 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* 中身（各項目）を中央寄せ */
}

.FV .merit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  width: 250px; /* 中身はデザイン基準幅のまま、パネル内で中央寄せ */
  max-width: 100%;
  margin: 0 auto;
}

.FV .merit-item:not(:last-child) {
  border-bottom: 1px solid #E9EEF2;
}

.FV .merit-item img {
  width: 40px;
  flex-shrink: 0;
}

.FV .merit-item p {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0;
  color: #122942;
}

.FV .merit-item b {
  color: #00388B;
  font-size: 24px;
  line-height: 1.4;
}

.FV .merit-item:first-child b {
  font-size: 28px;
}

/* ===== Campaign (JS 差し込みバナー) ===== */
.cp_section .cp_list {
  text-align: center;
}

.cp_section .cp_list img {
  display: inline-block;
  width: 90%;
  border-radius: 8px;
}

/* ===== Service ===== */
.service_section .logo-wrap {
  display: flex;
  padding: 0;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}

.service_section .logo-wrap ul li {
  width: 100%;
}

.service_section .logo-wrap ul li:not(:last-child) {
  border-bottom: solid 1px #F5FAFD;
}

.service_section .logo-wrap ul li img {
  width: 100%;
  display: block;
}

/* ===== Steps ===== */
.steps_section .title h2 {
  line-height: 1.35;
  letter-spacing: 0.08em;
}

.steps_section .title h2 span.num {
  line-height: 1;
}

/* 黄色の下線（Figma Line 4）: 「3ステップ」全幅に渡す＝数字3も含める */
.steps_section .title h2 .ss-l2 {
  position: relative;
  display: inline-block;
}

.steps_section .title h2 .ss-l2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  height: 11px;
  background: #ffe56c;
  z-index: -1;
}

.steps_section .title h2 span {
  background-image: none;
}

.steps_section .steplist {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.steps_section .step {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.steps_section .step-num {
  font-size: 30px;
  font-weight: bold;
  color: #000;
  line-height: 100%;
  margin-bottom: 8px;
}

.steps_section .step-card {
  width: 100%;
  border-radius: 8px;
  background: #EDF4FA;
  text-align: center;
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.steps_section .step-card h3 {
  font-size: 20px;
  font-weight: bold;
  color: #2F71B9;
  line-height: 130%;
}

.steps_section .step-card img {
  height: auto;
  display: block;
}

.steps_section .step.s1 .step-card img {
  width: 175px;
}

.steps_section .step.s2 .step-card img {
  width: 175px;
}

.steps_section .step.s3 .step-card img {
  width: 204px;
}

.steps_section .step-card p {
  font-size: 14px;
  line-height: 150%;
  color: #122942;
}

.steps_section .step-arrow {
  margin: 12px auto;
}

.steps_section .step-arrow img {
  display: block;
}

/* ===== Purchase ===== */
.purchase_section ul {
  display: flex;
  gap: 4px;
}

.purchase_section ul:nth-child(1) {
  margin-bottom: 4px;
}

/* ===== FAQ ===== */
.faqlist {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.faqlist .accord {
  text-align: left;
  width: 100%;
}

.faqlist .accord span {
  font-size: 18px;
  color: #2F71B9;
  line-height: 100%;
  font-weight: bold;
}

.faqlist .accord dt {
  border-radius: var(--border-border-sm, 8px);
  background: #CDE9FF;
  display: flex;
  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  font-weight: bold;
  cursor: pointer;
}

.faqlist .accord dt p {
  display: flex;
  gap: 4px;
}

.faqlist .accord dt.active {
  background: #F5FAFD;
  border-radius: var(--border-border-sm, 8px) var(--border-border-sm, 8px) 0 0;
}

.faqlist .accord dt.active img {
  transform: rotate(180deg);
}

.faqlist .accord dd {
  display: flex;
  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
  align-items: flex-start;
  align-self: stretch;
  background: #F5FAFD;
  display: flex;
  gap: 6px;
  color: #122942;
  font-size: 14px;
  border-radius: 0 0 var(--border-border-sm, 8px) var(--border-border-sm, 8px);
}

.faqlist .accord dd a {
  text-decoration: underline;
}

.faq_section .bg_space {
  margin-bottom: 0;
  padding: 32px 16px;
}

/* ===== Footer ===== */
footer {
  background: #303945;
  color: #fff;
  text-align: left;
}

footer .sns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 24px 16px;
}

footer .sns p {
  font-weight: bold;
  color: #ACB6BF;
  font-size: 14px;
  margin: 0;
}

footer .sns_logo {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

footer .sns_logo img {
  width: 55px;
  height: 55px;
  display: block;
}

footer .footer-links {
  padding: 12px 16px;
}

footer .footer-links ul {
  padding: 0;
  margin: 0;
}

footer .footer-links ul a {
  color: #fff;
  text-decoration: none;
  display: block;
  font-size: 14px;
  line-height: 2;
}

footer .footer-logo {
  margin-top: 16px;
}

footer .footer-logo img {
  width: 123px;
  display: block;
}

footer address {
  font-size: 12px;
  font-style: normal;
  color: #ACB6BF;
  margin-top: 4px;
  padding: 8px 0;
}


.rightArea {
  z-index: 10;
  width: calc((100% - 390px) / 2);
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
}

.rightArea .globalNav {
  z-index: 99;
  position: absolute;
  left: 4vw;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 16px;
}

.rightArea .globalNav ul {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  flex-direction: column;
}

.rightArea .globalNav ul li a {
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  text-align: left;
  line-height: 100%;
  gap: 8px;
  border-bottom: solid 1px;
  padding-bottom: 4px;
}

.leftArea {
  z-index: 3;
  width: calc((100% - 390px) / 2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
}

@media screen and (max-width: 768px) {
  .leftArea, .rightArea {
    display: none;
  }
  .spArea {
    width: 100%;
  }
  .fixBtn {
    width: 100%;
  }
}