@charset "UTF-8";
/*==================================================================
  Charme Yellow Happy Project フェス1 — LP
  Design tokens: Figma 由来 / コーディング作法: サンコー印刷ルール準拠
  ・SCSS を正とし、コンパイル済み style.css を同居させる
  ・ブレイクポイントは変数 + mixin で管理
  ・html font-size 62.5% を基準に px / rem 併記
==================================================================*/
:root {
  --y-primary: #FFEB57;
  --y-golden: #FFE103;
  --y-deep: #FDD000;
  --amber: #FFAE00;
  --ink: #231815;
  --text: #333333;
  --gray: #595757;
  --pink: #F64E8A;
  --pink-2: #F56498;
  --pink-deep: #E95383;
  --pink-soft: #F7C8CE;
  --blue: #0088FF;
  --coral: #FF9172; }

/*---------- breakpoints ----------*/
/* このLPはモバイル基準（中央カラム）で組み、PCで左右の羽根を出す */
/*---------- colors ----------*/
/*---------- layout ----------*/
/*---------- typography ----------*/
/*---------- effects ----------*/
/* インライン SVG（アイコン）*/
.text-center {
  text-align: center; }

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

.font-13 {
  font-size: 13px; }

.mb-0 {
  margin-bottom: 0; }

.arch::before, .arch::after {
  position: absolute;
  top: 18px;
  width: 100px;
  height: 75px;
  background: url("../assets/bunting-mixed2.png") no-repeat top center;
  background-size: contain;
  z-index: 1;
  pointer-events: none; }
.arch::before {
  left: 2px; }
.arch::after {
  right: 2px;
  transform: scaleX(-1); }
.arch__flag {
  margin: 0 auto 2rem;
  width: 50px; }

/*==================================================================
  hero
==================================================================*/
.hero__scene::after {
  content: "";
  position: absolute;
  width: 460px;
  height: 65px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: url("../../assets/hero-scene-after-d.png") no-repeat center/contain;
  z-index: 1;
  pointer-events: none; }

/*==================================================================
  for dancer
==================================================================*/
.fordancer {
  background: #fff6b0;
  position: relative; }
  .fordancer .arch {
    padding: 20px 24px 36px; }
    .fordancer .arch::before, .fordancer .arch::after {
      display: none; }
  .fordancer .arch-top {
    position: absolute;
    top: 0; }
  .fordancer__body {
    padding-bottom: 10px; }
  .fordancer__lead {
    font-size: 14px;
    color: #595757;
    margin: 0 0 30px; }
  .fordancer__subhead {
    text-align: center;
    font-size: 19px;
    font-weight: 700;
    color: #333333;
    margin: 34px 0 16px; }

/* 募集対象カード */
.targets {
  list-style: none;
  background: #fff;
  border-radius: 8px;
  padding: 22px 24px;
  margin: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); }
  .targets li {
    position: relative;
    padding-left: 30px;
    font-size: 14.5px;
    margin: 4px 0; }
    .targets li:not(.targets__etc)::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      width: 18px;
      height: 18px;
      border-radius: 4px;
      background: #ffae00 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 13l4 4L19 7' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
  .targets__etc {
    padding-left: 0;
    color: #595757; }

/* 出店までの流れ */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px; }

.step {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); }
  .step__badge {
    flex: 0 0 54px;
    height: 54px;
    background: #ffe103;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #333333;
    line-height: 1; }
  .step__label {
    font-size: 9px;
    font-weight: 700; }
  .step__num {
    font-family: "Montserrat", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-weight: 800;
    font-size: 22px; }
  .step__text h4 {
    margin: 2px 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #333333; }
  .step__text p {
    margin: 0;
    font-size: 13.5px;
    color: #595757;
    line-height: 1.8; }

/* 注意事項 */
.notes {
  list-style: none;
  background: #fff;
  border-radius: 8px;
  padding: 22px 24px;
  margin: 0;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); }
  .notes li {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    margin: 8px 0;
    line-height: 1.7; }
    .notes li::before {
      content: "・";
      position: absolute;
      left: 0; }
    .notes li a {
      font-weight: 600;
      color: #333; }
      .notes li a:hover {
        color: #f64e8a; }

/* guidelines */
.guidelines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 30px;
  padding: 26px 24px;
  background: linear-gradient(120deg, #ff9172, #f56498);
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(240, 100, 150, 0.3); }
  .guidelines__en {
    font-family: "Bebas Neue", sans-serif;
    color: #fff;
    font-size: 48px;
    letter-spacing: 0.05em;
    line-height: 1; }
  .guidelines__pill {
    background: #fff;
    color: #f64e8a;
    font-weight: 700;
    font-size: 15px;
    padding: 8px 40px;
    border-radius: 999px;
    width: 100%;
    text-align: center; }
  .guidelines__sub {
    color: #fff;
    font-size: 14px;
    font-weight: 700; }