/* ============================================
   養成所での学び 専用CSS
   ============================================ */

/* ============================================
   ページタイトル
   ============================================ */
.page-title--learn {
  width: auto;
  max-width: 260px;
  min-width: 220px;
  height: 75px;
  padding: 0 16px;
}

/* ============================================
   カリキュラム 注釈
   ============================================ */
.learn-curriculum-note {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.7;
  color: #000000;
  margin: 0 0 4px;
  text-align: right;
}

/* ============================================
   カリキュラム タイムライン
   ============================================ */
.learn-curriculum {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.learn-curriculum__item {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* 月インジケーター */
.learn-curriculum__month {
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 8px;
  position: relative;
}

.learn-curriculum__month-num {
  font-family: "din-2014", sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--boat-blue);
}

.learn-curriculum__month-label {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--boat-blue);
}

/* タイムラインコネクター（月カラムの縦線） - 04, 06, 08, 02月のみ */
.learn-curriculum__item--with-line .learn-curriculum__month::after {
  content: '';
  width: 1px;
  flex: 1;
  background-color: var(--boat-blue);
  margin-top: 8px;
}

/* コンテンツ本体 */
.learn-curriculum__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding-bottom: 10px;
}

/* カリキュラムカード */
.learn-curriculum__card {
  background-color: #F1F7FD;
  border: none;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}

/* 三角の吹き出し（左向き） */
.learn-curriculum__card::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 15px;
  width: 0;
  height: 0;
  border-top: 8.5px solid transparent;
  border-bottom: 8.5px solid transparent;
  border-right: 16px solid #F1F7FD;
}

/* シンプルカード（夏休み・冬休み） */
.learn-curriculum__card--simple {
  gap: 0;
}

/* コンテンツグループ（タイトル・テキスト・画像） */
.learn-curriculum__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.learn-curriculum__title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--boat-text);
}

.learn-curriculum__title-sub {
  font-weight: 400;
}

.learn-curriculum__text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.7;
  color: var(--boat-text);
  margin: 0;
}

.learn-curriculum__image {
  width: 100%;
  aspect-ratio: 233 / 80;
  border-radius: 4px;
  overflow: hidden;
}

.learn-curriculum__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* 3月内のセパレーター */
.learn-curriculum__separator {
  width: 100%;
  height: 0.5px;
  background-color: #C2C2C2;
  margin: 0;
}

/* ============================================
   カテゴリーグループ（ピルバッジ）
   ============================================ */
.learn-curriculum__categories {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
}

.learn-curriculum__category {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* カテゴリーバッジ（ピル型） */
.learn-curriculum__badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 66px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.7;
  flex-shrink: 0;
  box-sizing: border-box;
}

.learn-curriculum__badge--skill {
  background-color: var(--boat-darkblue, #0069D5);
  color: #FFFFFF;
}

.learn-curriculum__badge--human {
  background-color: var(--boat-yellow, #FFE434);
  color: var(--boat-darkblue, #0069D5);
}

.learn-curriculum__category-text {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 1.4;
  color: var(--boat-text);
  margin: 0;
}

/* ============================================
   カリキュラム詳細ボタン
   ============================================ */
.learn-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background-color: var(--white);
  border: 2px solid var(--boat-blue);
  border-radius: 30px;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.learn-button:hover {
  opacity: 0.8;
}

.learn-button span {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: var(--boat-text);
}

.learn-button svg {
  width: 8px;
  height: 14px;
  color: var(--boat-blue);
  flex-shrink: 0;
}

/* ============================================
   メッセージセクション青背景（右肩上がり対角線）
   ============================================ */
.content-section--bg-lightblue-message::after {
  content: '';
  position: absolute;
  top: -100px;
  left: -20px;
  right: -20px;
  height: 210px;
  background-color: var(--boat-blue);
  clip-path: polygon(100% 0, 0 105px, 0 100%, 100% calc(100% - 105px));
  z-index: -1;
}

/* メッセージセクション レイアウト */
.content-section--bg-lightblue-message .content-section__content {
  gap: 44px;
}

.content-section--bg-lightblue-message .heading-with-bar {
  margin-bottom: 0;
}

/* メッセージセクション見出し（白文字・白バー） */
.content-section--bg-lightblue-message .heading-with-bar::before {
  background-color: white;
}

.content-section--bg-lightblue-message .heading-with-bar__text {
  color: white;
}

/* ============================================
   メッセージ本文
   ============================================ */
.learn-message {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.learn-message p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--boat-text);
  margin: 0;
}

.learn-message p strong {
  font-weight: 700;
}

/* メッセージセクション画像 */
.learn-message__image {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.learn-message__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ============================================
   ページリンク（learnページ）
   ============================================ */
.page-learn .page-link--left {
  gap: 10px;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: -0.04em;
  box-shadow: 3px 3px 0px #FF5C5C, -2px -2px 0px var(--boat-blue);
}

.page-learn .page-link--right {
  gap: 4px;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.04em;
  box-shadow: 3px 3px 0px #0099FF, -2px -2px 0px var(--boat-blue);
}