@charset "UTF-8";

/* ==========================================================================
   Project: My campus life
   File:    day.css
   対象:    /campuslife/day/
   依存:    common.css（デザイントークン）
   ========================================================================== */

.p-campus-life .c-card__media {
  line-height: 0;
}

.p-campus-life .c-card__body > *:first-child {
  margin-top: 0;
}

@media (min-width: 769px) {
  .p-campus-life .c-grid--2col {
    grid-template-columns: 250px 1fr;
    gap: 48px; 
  }

  .p-campus-life .c-card__media img {
    width: 100%;
    max-width: 250px;
    border-radius: 5px; 
  }
}

/* --------------------------------------------------
   吹き出し（.c-balloon）ライン表現
   -------------------------------------------------- */

/* 共通ベース */
.c-balloon {
  --balloon-color: var(--color-hygiene);
  position: relative;
  display: block;
  background-color: #ffffff;                 /* 塗りつぶしなし */
  color: var(--color-text);                  /* 文字色：黒 */
  border: 4px solid var(--balloon-color);    /* ライン */
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
  text-align: center;
  padding: 60px;
  border-radius: 50%;
}

.c-balloon--nursing {
  --balloon-color: var(--color-nursing);
}

/* PC（769px以上）：尻尾は左・中抜き表現 */
@media (min-width: 769px) {
  .c-balloon {
    max-width: 400px;
    margin-left: 24px;
    margin-right: auto;
  }

  /* 外側の三角形（ボーダー色） */
  .c-balloon::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -30px;
    width: 0;
    height: 0;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 30px solid var(--balloon-color);
    z-index: 1;
  }

  /* 内側の三角形（白塗り：中抜き効果） */
  .c-balloon::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -22px;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 25px solid #ffffff;
    z-index: 2;
  }
}

/* SP（768px以下）：尻尾は上・中抜き表現 */
@media (max-width: 768px) {
  .c-balloon {
    margin-top: 22px;
  }

  /* 外側の三角形（ボーダー色） */
  .c-balloon::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 22px solid var(--balloon-color);
    z-index: 1;
  }

  /* 内側の三角形（白塗り：中抜き効果） */
  .c-balloon::after {
    content: "";
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 18px solid #ffffff;
    z-index: 2;
  }
}


/* ==========================================================================
   日課タイムライン（.c-day-schedule）
   day.css に追記
   ========================================================================== */

.c-day-schedule {
  --day-color: var(--color-hygiene);
  --day-color-light: #EEF6FD;
  margin-top: 20px;
  border: 3px solid var(--day-color);
  font-size: 18px;
}

.c-day-schedule--nursing {
  --day-color: var(--color-nursing);
  --day-color-light: #FDE8F3;
}

/* ヘッダー「平日」 */
.c-day-schedule__header {
  background-color: var(--day-color);
  color: #ffffff;
  font-weight: var(--fw-bold);
  padding: 6px 12px;
}

/* テーブル全体 */
.c-day-schedule__table {
  width: 100%;
  border-collapse: collapse;
}

/* 通常行 */
.c-day-schedule__row td {
  padding: 6px 10px;
  background-color: #ffffff;
  border-bottom: 1px solid var(--day-color-light);
  vertical-align: middle;
}

/* 時刻列 */
.c-day-schedule__time {
  width: 25%;
  font-weight: var(--fw-bold);
  color: var(--day-color);
  white-space: nowrap;
  border-right: 1px solid var(--day-color-light);
  text-align: center;
}

/* 余白行（時間の空白を表現） */
.c-day-schedule__gap td {
  height: 28px;
  background-color: var(--day-color-light);
  padding: 0;
  border-bottom: 1px solid var(--day-color);
}

/* 注釈テキスト */
.c-day-schedule__note {
  padding: 10px 12px;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  border-top: 1px solid var(--day-color-light);
  background-color: #ffffff;
  margin: 0;
}


/* ==========================================================================
   月間収支表（.c-day-budget）
   day.css に追記
   ========================================================================== */

.c-day-budget {
  --day-color: var(--color-hygiene);
  display: flex;
  border: 3px solid var(--day-color);
  font-size: 16px;
  margin-top: 12px;
  background-color: #ffffff;
}

.c-day-budget--nursing {
  --day-color: var(--color-nursing);
}

/* 収入・支出 各半分 */
.c-day-budget__half {
  display: flex;
  flex: 1;
  min-width: 0;
}

.c-day-budget__half + .c-day-budget__half {
  border-left: 1px solid #dddddd;
}

/* 「収入」「支出」縦書きラベル */
.c-day-budget__label {
  background-color: var(--day-color);
  color: #ffffff;
  font-weight: var(--fw-bold);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 6px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
    font-size: 16px;
}

/* 内側テーブル */
.c-day-budget__table {
  flex: 1;
  border-collapse: collapse;
  min-width: 0;
}

.c-day-budget__table td {
  padding: 4px 8px;
  vertical-align: middle;
  line-height: var(--lh-tight);
}

/* 金額列：右揃え */
.c-day-budget__amount {
  text-align: right;
  white-space: nowrap;
}

/* 合計行 */
.c-day-budget__total td {
  border-top: 1px solid #dddddd;
  font-weight: var(--fw-bold);
  padding-top: 5px;
  padding-bottom: 5px;
}

/* ==========================================================================
   コンテンツエリア背景色（H2下のみ）
   ========================================================================== */

.c-accordion-item--bg-hygiene .c-accordion-content {
  background-color: #EEF6FD;
  border-radius: 5px;
}

.c-accordion-item--bg-nursing .c-accordion-content {
  background-color: #FDE8F3;
  border-radius: 5px;
}

/* PC：パディングを付与（常に展開状態のため問題なし） */
@media (min-width: 769px) {
  .c-accordion-item--bg-hygiene .c-accordion-content,
  .c-accordion-item--bg-nursing .c-accordion-content {
    padding: 30px;
  }
}

/* SP：パディングをゼロに明示（max-height:0 との干渉を防ぐ） */
@media (max-width: 768px) {
  .c-accordion-item--bg-hygiene .c-accordion-content,
  .c-accordion-item--bg-nursing .c-accordion-content {
    padding: 0;
  }
}