/**
 * ------------------------------
 * top.css
 * ------------------------------
 * @purpose
 * TOPページのcss
 *
 * @pages
 * ・TOPページ
 *
 * @note
 * ・.wm-css：自作cssは区別のため、ラッパーコンテナにwm-cssクラスを付している
 *
 * @version
 * 1.0.0
 */

/**
 * ----------------------------------------
 *  # 基本スタイリング
 * ----------------------------------------
 */
@font-face {
  font-family: "HonokaMaru";
  src: url("/wp-content/themes/swell_child/custom/fonts/Honoka-Shin-Maru-Gothic_R.woff")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

/**
 * ----------------------
 * ファーストビュー
 * ----------------------
 */
/***
 * [アイキャッチ]
 */
.p-mainVisual__slideTitle {
  font-size: clamp(1.9rem, 5vw, 2.3rem) !important;
  line-height: 1.3;
  font-family: "HonokaMaru" !important;
  font-weight: 500 !important;
  text-shadow:
    0.5px 0.5px 0 #fff,
    /* 上の光 */ -0.5px -0.5px 0 #ccc,
    /* 下の影 */ 1px 1px 1px rgba(0, 0, 0, 0.2); /* ぼかし影 */
}
/* 収まるように、余白を減らす */
.page-id-2 #content {
  padding-top: 10px !important;
}

/**
 * ----------------------------------------
 *  # 学習の道しるべ
 * ----------------------------------------
 */
/***
 * [ランクカード枠 :pc ]
 */
.wm-course-step .swell-block-step__item {
  background: #fff; /* 背景を白 */
  border-radius: 12px; /* 角丸 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); /* さりげない影 */
  padding: 1.5rem 1rem !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}
.wm-course-step .swell-block-step__item:hover {
  transform: translateY(-6px) scale(1.02); /* 少し浮かせる＋拡大 */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12); /* 影を濃くする */
  filter: brightness(1.05); /* 薄く光らせる */
  cursor: pointer;
}

/***
 * [ランクバー]
 */
.wm-course-step .swell-block-step__number {
  width: 120px; /* 少し小さめに */
  height: 120px;
  font-size: 24px;
  border-radius: 50%;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin: 0 auto 1rem auto; /* カード内で中央寄せ */
}
/***
 * [タイトル]
 */
.wm-course-step .swell-block-step__title {
  font-family: "HonokaMaru";
  font-size: 34px !important;
}
/***
 * [サブタイトル]
 */
.rank-subtitle {
  font-family: "HonokaMaru";
  font-size: 14px !important;
  color: #adadad;
  margin-bottom: 40px !important;
}
/***
 * [タイトル～サブタイトル間]
 */
/* 余白消去 */
.swell-block-step__body {
  margin-top: 0 !important;
}

/**
 * ----------------------------------------
 *  # しずかな作業箱
 * ----------------------------------------
 */
.toolbox {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.toolbox-card {
  flex: 1 1 250px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 1.5rem;
  text-align: center;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.toolbox-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}
.toolbox-card i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  color: #555;
}

/**
 * ----------------------------------------
 *  # Q&A
 * ----------------------------------------
 */
/***
 * [タイトル]
 */
/* 文頭にFontAwesomeアイコン */
.guarantee-title::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f10d";
  margin-right: 0.5em;
  color: #555;
}
/***
 * [各Q枠]
 */
/* 個別タイトル */
.guarantee-desc .swell-block-accordion__label {
  font-family: "HonokaMaru";
  font-size: 24px;
}
.guarantee-desc .swell-block-accordion__body p {
  font-size: 18px;
}