:root{
  --green:#06c755;
  --deep:#101828;
  --text:#263238;
  --muted:#667085;
  --cream:#fff7df;
  --orange:#ef7a2d;
  --pink:#ff5c8a;
  --mint:#e8f8e8;
  --shadow:0 20px 60px rgba(16,24,40,.12);
  --radius:28px;
}

@font-face {
	font-family:'genjyuugothic';
	src: url('./GenJyuuGothic-P-Bold.ttf') format('truetype');
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'genjyuugothic','M PLUS Rounded 1c', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fffdf5 0%,#f0fff0 45%,#fff8ef 100%);
  line-height:1.7;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1120px,calc(100% - 40px));margin-inline:auto}
.site-header{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(6,199,85,.12);
}
.header-inner{height:74px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:900;color:var(--deep)}
.brand-mark{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#ff628e,#ffb443);color:white;display:grid;place-items:center;font-weight:900;box-shadow:0 10px 24px rgba(255,98,142,.25)}
.brand-name{font-size:22px;letter-spacing:.04em}
.nav{display:flex;gap:22px;margin-left:auto;color:#475467;font-weight:700;font-size:14px}
.header-cta{background:var(--green);color:white;border-radius:999px;padding:10px 18px;font-weight:900;box-shadow:0 5px 5px rgba(6,199,85,.2)}
.hero{background-color: floralwhite; padding:20px 0 0px;overflow:hidden;position:relative}
.hero:before,
.hero:after{
 content: "\266A";
 position:absolute;
 font-size:80px;
 color:rgba(255,92,138,.18);
 font-weight:900;transform:rotate(-18deg)
}
.hero:before{left:5%;top:110px}.hero:after{right:7%;bottom:50px;color:rgba(239,122,45,.18)}
.hero-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:0px;align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-weight:900;letter-spacing:.08em;margin:0 0 14px}
/*.eyebrow:before{
  content:"\25CF";
  color:var(--green);
  font-size:12px
}*/
h1{font-size:clamp(42px,6vw,72px);line-height:1.08;margin:0 0 22px;color:var(--deep);letter-spacing:.02em}
.lead{font-size:18px;color:#475467;margin:10px 30px 28px;font-weight:600}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 24px;font-weight:900;transition:.2s ease;box-shadow:0 12px 26px rgba(16,24,40,.08)}
.btn.primary{background:var(--green);color:white}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(6,199,85,.25)}
.btn.secondary{background:white;color:var(--green);border:2px solid rgba(6,199,85,.18)}
.btn.large{font-size:18px;padding:17px 34px}.note,.small-note{font-size:13px;color:#667085;margin:0}
.hero-visual{background:white;border-radius:36px;padding:12px;box-shadow:var(--shadow);transform:rotate(3deg)}
.hero-visual img{border-radius:28px}
.section{padding:62px 0}.section-title{text-align:center;margin-bottom:38px}
.section-title h2,.value h2,.line-copy h2,.campaign h2{font-size:clamp(30px,4vw,46px);line-height:1.25;margin:0 0 14px;color:var(--deep)}
.section-title p:last-child{margin:0;color:#667085;font-weight:600}
.cards.two{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{background:white;border-radius:var(--radius);padding:32px;border:1px solid rgba(6,199,85,.08);box-shadow:0 2px 2px rgba(16,24,40,.07)}
.icon{width:64px;height:64px;border-radius:22px;display:grid;place-items:center;font-size:32px;margin-bottom:20px}
.icon.pink{background:#fff0f4}.icon.green{background:#e7fff0}.feature-card h3{font-size:24px;margin:0 0 12px;color:var(--deep)}
.feature-card p{margin:0;color:#667085;font-weight:600}
.value{background:linear-gradient(135deg,#ecfff1,#fff8e7)}
.value-grid{display:grid;grid-template-columns:.90fr 1.0fr;gap:50px;align-items:center}
.value-grid p{color:#667085;font-weight:600}.value-list{display:grid;gap:16px}
.value-item{background:white;border-radius:22px;padding:22px 24px;font-weight:900;box-shadow:0 14px 38px rgba(6,199,85,.10);display:flex;gap:18px;align-items:center}.value-item span{background:var(--cream);color:var(--orange);border-radius:999px;padding:5px 12px;font-size:14px}
.how-grid{display:grid;gap:34px}
.how-card{display:grid;grid-template-columns:.72fr 1.28fr;gap:32px;align-items:center;background:white;border-radius:34px;padding:30px;box-shadow:var(--shadow);overflow:hidden}
.how-card.reverse{grid-template-columns:.72fr 1.28fr}
.how-card img{border-radius:24px;box-shadow:0 12px 32px rgba(16,24,40,.12)}
.pill{display:inline-flex;background:#fff1df;color:var(--orange);padding:6px 14px;border-radius:999px;font-weight:900;margin-bottom:14px}
.green-pill{background:#e7fff0;color:var(--green)}.how-copy h3{font-size:28px;line-height:1.35;margin:0 0 16px}
.how-copy ol{padding-left:1.25em;margin:0;color:#475467;font-weight:700}.how-copy li+li{margin-top:8px}
.line-section{background:#f7fff8}
.line-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:52px;align-items:center}
.line-image{background:white;border-radius:34px;padding:20px;box-shadow:var(--shadow)}
.line-image img{border-radius:24px;max-height:620px;margin:auto}
.line-copy p{color:#667085;font-weight:600}.check-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}
.check-list li{background:white;border-radius:16px;padding:14px 18px;font-weight:800;box-shadow:0 10px 24px rgba(16,24,40,.07)}
.check-list li:before{
  content:"\2713";
  color:var(--green);
  font-weight:900;
  margin-right:10px
}
.campaign{padding-top:90px}
.campaign-box{text-align:center;background:linear-gradient(135deg,#fff7df,#f0fff4);border-radius:42px;padding:52px 34px;border:1px solid rgba(239,122,45,.12)}
.campaign-box p{max-width:720px;margin:0 auto 28px;color:#667085;font-weight:700}
.campaign-points{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px auto;max-width:860px}
.campaign-points div{background:white;border-radius:22px;padding:20px;display:grid;gap:6px}
.campaign-points strong{color:var(--orange)}
.campaign-points span{font-weight:800;color:#475467}
.faq-list{max-width:860px;margin:auto;display:grid;gap:14px}details{background:white;border-radius:20px;padding:20px 24px; box-shadow:0 3px 3px rgba(16,24,40,.07)}summary{cursor:pointer;font-weight:900;font-size:18px;color:var(--deep)}details p{margin:12px 0 0;color:#667085;font-weight:600}
.footer{padding:20px 0;background:#101828;color:white}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}.footer p{margin:8px 0 0;color:#cbd5e1}.footer-links{display:flex;gap:18px;flex-wrap:wrap;color:#e2e8f0;font-weight:700}
.footer-brand .brand-name{color:white}
@media (max-width:900px){.nav{display:none}.hero-grid,.cards.two,.value-grid,.line-grid{grid-template-columns:1fr}
.hero{padding-top:42px}.hero-visual{transform:none}.how-card,.how-card.reverse{grid-template-columns:1fr}.campaign-points{grid-template-columns:1fr}
.footer-inner{align-items:flex-start;flex-direction:column}h1{font-size:44px}
.section{padding:58px 0}}
@media (max-width:520px){
.container{width:min(100% - 24px,1120px)}
.header-inner{height:66px}
.header-cta{padding:8px 12px}
.brand-name{font-size:18px}
.hero-actions 
.btn{width:100%}
.card,.how-card,
.campaign-box{padding:22px;border-radius:24px}
.how-copy h3{font-size:22px}
.section-title h2,.value h2,.line-copy h2,
.campaign h2{font-size:28px}
}


/* 追加セクション */
.top-visual{width:100%;height:auto}
.target-section{background:#fffdf8}
.persona-card{position:relative;overflow:hidden}
.persona-card:after{
  content: "\266A";
  position:absolute;
  right:26px;
  top:18px;
  font-size:74px;
  font-weight:900;
  opacity:.08;
  color:
  var(--green)
}
.listener-card:after{color:var(--pink)}
.simple-list{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:11px;color:#475467;font-weight:700}
.simple-list li{display:flex;gap:10px;align-items:flex-start}
.simple-list li:before{
  content:"\2713";
  display:inline-grid;
  place-items:center;
  flex:0 0 22px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#e7fff0;
  color:var(--green);
  font-weight:900;
  font-size:13px;
  margin-top:2px
}
.scene-section{background:linear-gradient(180deg,#f8fff9 0%,#fffdf5 100%)}
.scene-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.scene-card{background:white;border-radius:24px;padding:26px 22px;box-shadow:0 12px 32px rgba(16,24,40,.08);border:1px solid rgba(6,199,85,.08)}
.scene-icon{width:58px;height:58px;border-radius:20px;background:#fff7df;display:grid;place-items:center;font-size:30px;margin-bottom:16px}
.scene-card:nth-child(2) .scene-icon{background:#fff0f4}.scene-card:nth-child(3) .scene-icon{background:#e7fff0}.scene-card:nth-child(4) .scene-icon{background:#eef6ff}
.scene-card h3{margin:0 0 8px;color:var(--deep);font-size:21px}.scene-card p{margin:0;color:#667085;font-weight:600}
.exchange-section{background:linear-gradient(135deg,#fff7df,#f0fff4)}
.exchange-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center}
.exchange-copy h2{font-size:clamp(30px,4vw,46px);line-height:1.28;margin:0 0 18px;color:var(--deep)}
.exchange-copy p{color:#667085;font-weight:700;margin:0 0 20px}.exchange-image{background:white;border-radius:34px;padding:20px;box-shadow:var(--shadow)}.exchange-image img{border-radius:24px}
.check-list.compact{margin-top:18px}.check-list.compact li{padding:12px 16px}
@media (max-width:900px){.scene-grid{grid-template-columns:repeat(2,1fr)}.exchange-grid{grid-template-columns:1fr}.exchange-image{order:-1}}
@media (max-width:520px){.scene-grid{grid-template-columns:1fr}.top-visual{min-height:150px;object-fit:cover}.persona-card:after{font-size:52px}.exchange-image{padding:12px;border-radius:24px}}

/* =========================================================
   個別調整
   ========================================================= */

/* ヒーロー見出し横のCTA */
.hero-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.hero-title-row h1 {
  margin-bottom: 22px;
}

.hero-title-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* 指定したカード・画像・ボタンの影を削除 */
.card,
.how-card,
.how-card img,
.line-image,
.scene-card,
.exchange-image,
.btn,
.header-cta,
.brand-mark {
  box-shadow: none !important;
}

/* 影を残すボックス */
.value-item {
  box-shadow: 0 14px 38px rgba(6, 199, 85, 0.10);
}

.check-list li {
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.07);
}

.faq-list details {
  box-shadow: 0 3px 3px rgba(16, 24, 40, 0.07);
}

/* 動画投稿カード */
.how-card.reverse {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 32px;
  align-items: start;
}

.creator-image {
  width: 100%;
  height: auto;
  border-radius: 24px;
}

.remix-wrapper {
  grid-column: 1 / -1;
  width: 100%;
}

.remix-wrapper img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 24px;
}

/* 2カラムフッター */
.footer {
  padding: 48px 0;
  background: #101828;
  color: #fff;
}

.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 80px;
}

.footer-left {
  flex: 1;
  min-width: 0;
}

.footer-right {
  width: 360px;
  flex: 0 0 360px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.footer-logo {
  height: 42px;
  width: auto;
}

.footer-joysound {
  height: 22px;
  width: auto;
}

.footer-brand span {
  color: #fff;
  font-weight: 700;
}

.footer-copy {
  margin: 0 0 24px;
  color: #cbd5e1;
  line-height: 1.8;
}

.footer-right h4 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 18px;
}

.footer-right p {
  margin: 0 0 18px;
  color: #cbd5e1;
  line-height: 1.7;
}

.footer-right span {
  color: #94a3b8;
}

.footer-right a {
  color: #fff;
  text-decoration: none;
}

.footer-right a:hover {
  text-decoration: underline;
}

.footer-links {
  display: flex;
  gap: 24px;
  margin-top: 24px;
  flex-wrap: wrap;
  color: #e2e8f0;
  font-weight: 700;
}

.copyright {
  margin-top: 32px;
  color: #94a3b8;
  font-size: 12px;
}

/* タブレット */
@media (max-width: 900px) {
  .hero-title-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .how-card.reverse {
    grid-template-columns: 1fr;
  }

  .remix-wrapper {
    grid-column: 1 / -1;
  }
}

/* スマートフォン */
@media (max-width: 768px) {
  .footer-inner {
    flex-direction: column;
    gap: 40px;
  }

  .footer-right {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 520px) {
  .hero-title-cta {
    width: 100%;
  }

  .footer-brand {
    gap: 8px;
  }
}


/* PC・スマホ表示切り替え */
.hero-pc {
  display: block;
}

.hero-sp {
  display: none;
}

.hero-lead {
  margin-top: 32px;
}

/* スマホ */
@media (max-width: 900px) {
  .hero-pc {
    display: none;
  }

  .hero-sp {
    display: block;
  }

  .hero-sp {
    padding-top: 0;
  }

  .hero-sp .top-visual {
    width: 100%;
    height: auto;
    margin-bottom: 28px;
  }

  .hero-sp .hero-copy {
    padding: 0;
  }

  .hero-sp .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .hero-sp .hero-actions .btn {
    width: 100%;
  }

  .hero-sp .lead {
    margin-top: 24px;
  }
}

.faq-note {
  max-width: 860px;
  margin: 36px auto 0;
  padding: 0 8px;

  color: #667085;
  font-size: 13px;
  line-height: 1.8;
}