@charset "UTF-8";
/* メッセージ文例集（130〜143）共通の見た目 20261027a */
/* ===== 0. タイトル・見出しを大きく太く（ご利用ガイド・8つの特典に合わせる） ===== */
#main-column #Journal .hr-page.hr-msgs .hr-title {
  font-size: clamp(28px, 4.2vw, 40px);
  font-weight: 800;
  line-height: 1.35;
}

#main-column #Journal .hr-page.hr-msgs .hr-heading__en {
  font-size: 13px;
}

#main-column #Journal .hr-page.hr-msgs .hr-heading__ja {
  font-size: clamp(22px, 2.8vw, 32px);
  font-weight: 800;
  line-height: 1.4;
}

/* ===== 1. 文例のカード（スマホ1列・640px〜2列・960px〜3列） ===== */
#main-column #Journal .hr-page .hr-msg-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}

#main-column #Journal .hr-page .hr-msg {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 20px 20px 14px;
  border: 1px solid var(--hr-line);
  border-radius: var(--hr-r-card);
  background: #fff;
}

#main-column #Journal .hr-page .hr-msg__text {
  flex: 1;
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  word-break: break-word;
}

#main-column #Journal .hr-page .hr-msg__note {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 8px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--hr-accent-soft);
  color: var(--hr-sub);
  font-size: 12px;
}

#main-column #Journal .hr-page .hr-msg__copy {
  align-self: flex-end;
  margin: 12px 0 0;
  padding: 4px 14px;
  border: 1px solid var(--hr-accent);
  border-radius: 4px;
  background: #fff;
  color: var(--hr-accent);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

#main-column #Journal .hr-page .hr-msg__copy:hover, #main-column #Journal .hr-page .hr-msg__copy.is-done {
  background: var(--hr-accent);
  color: #fff;
}

#main-column #Journal .hr-page .hr-msg-count {
  display: inline-block;
  margin-left: 8px;
  color: var(--hr-sub);
  font-size: 13px;
}

/* 「見たい項目へ移動」は中央に（ボタンを中央に寄せるのに合わせる） */
#main-column #Journal .hr-page.hr-msgs .hr-nav-label {
  margin-top: 40px;
  text-align: center;
}

/* ===== 項目ボタン：幅は5列のときの大きさにそろえ、足りない行は中央に寄せる。中で改行しない ===== */
#main-column #Journal .hr-page.hr-msgs .hr-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  padding: 0;
}

#main-column #Journal .hr-page.hr-msgs .hr-nav > li {
  flex: 0 0 calc((100% - 8px) / 2);
  min-width: 0;
}

#main-column #Journal .hr-page.hr-msgs .hr-nav a {
  gap: 6px;
  padding: 12px 10px;
  font-size: 13px;
  white-space: nowrap;
}

#main-column #Journal .hr-page.hr-msgs .hr-nav a > .hr-ico:first-child {
  display: none;            /* スマホでは左のアイコンを消して文字の場所を空ける */
}

#main-column #Journal .hr-page .hr-msg-n {
  margin-left: auto;
  color: var(--hr-sub);
  font-size: 11px;
  font-weight: 400;
}

/* 一覧のタイル：件数を出すので左のアイコンは出さない。スマホでは件数も隠す */
#main-column #Journal .hr-page.hr-msgs .hr-msg-cats a > .hr-ico:first-child {
  display: none !important;
}

#main-column #Journal .hr-page .hr-msg-n {
  display: none;
}

@media (min-width: 640px) {
  #main-column #Journal .hr-page .hr-msg-n {
    display: inline;
  }

  #main-column #Journal .hr-page .hr-msg-n + .hr-ico.is-arrow {
    margin-left: 0;
  }
}

#main-column #Journal .hr-page.hr-msgs .hr-nav a:hover .hr-msg-n {
  color: #fff;
}

/* ===== ほかの文例集へ移動（プルダウンで選ぶと移動） ===== */
#main-column #Journal .hr-page .hr-msg-jump {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin: 24px 0 0;
}

#main-column #Journal .hr-page .hr-msg-jump label {
  width: 100%;
  color: var(--hr-sub);
  font-size: 13px;
  text-align: center;
}

#main-column #Journal .hr-page .hr-msg-jump select {
  flex: 1 1 auto;
  max-width: 320px;
  min-width: 0;
  height: 44px;
  padding: 0 36px 0 14px;
  border: 1.5px solid var(--hr-accent);
  border-radius: var(--hr-r-btn);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233a3a3a' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--hr-text);
  font: inherit;
  font-size: 15px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* ===== 2. 早見表 ===== */
#main-column #Journal .hr-page .hr-msg-table {
  max-width: 720px;
  margin: 24px auto 0;
}

#main-column #Journal .hr-page .hr-msg-table th, #main-column #Journal .hr-page .hr-msg-table td {
  padding: 10px 8px;
  white-space: nowrap;
}

@media (min-width: 640px) {
  #main-column #Journal .hr-page.hr-msgs .hr-nav > li {
    flex: 0 0 calc((100% - 16px) / 3);
  }

  #main-column #Journal .hr-page.hr-msgs .hr-nav a {
    font-size: 14px;
  }

  #main-column #Journal .hr-page.hr-msgs .hr-nav a > .hr-ico:first-child {
    display: block;
  }

  #main-column #Journal .hr-page .hr-msg-jump label {
    width: auto;
  }

  #main-column #Journal .hr-page .hr-msg-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (min-width: 960px) {
  #main-column #Journal .hr-page.hr-msgs .hr-nav > li {
    flex: 0 0 calc((100% - 32px) / 5);
  }

  #main-column #Journal .hr-page .hr-msg-list {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* ===== タイトル画像の下〜白い背景の終わりまでの右側に、切り抜いたお花を薄く（10/9 高見さん） ===== */
#main-column #Journal .hr-page .hr-msg-top {
  position: relative;
  z-index: 0;
  overflow: hidden;           /* 花がはみ出して横スクロールにならないように */
  padding-bottom: var(--hr-gap-sec);  /* 次のセクション（グレーの帯）の手前まで花を見せる */
}

/* タイトル画像のすぐ下から花を見せる（見出し画像の下の余白40pxを枠の中に入れる） */
#main-column #Journal .hr-page .hr-hero + .hr-msg-top {
  margin-top: -40px;
  padding-top: 40px;
}

#main-column #Journal .hr-page .hr-msg-top + .hr-sec {
  margin-top: 0;              /* 上の余白は padding-bottom で取っている */
}

#main-column #Journal .hr-page .hr-msg-deco {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* タイトルのすぐ下から右側に。上は切らず、下は枠（白い背景の終わり）で切れてもよい（10/9 高見さん） */
#main-column #Journal .hr-page .hr-msg-deco img {
  position: absolute;
  top: 0;
  right: 0;
  width: 92%;
  max-width: 420px;
  height: auto;
  opacity: 0.2;               /* 文字が読みやすいように薄く（10/9 高見さん：20%） */
}

/* 文は花の上でも読みやすく */
#main-column #Journal .hr-page .hr-msg-top .hr-lead {
  text-shadow: 0 0 8px #fff, 0 0 4px #fff, 0 0 2px #fff;
}

@media (min-width: 640px) {
  #main-column #Journal .hr-page .hr-msg-deco img {
    width: 620px;
    max-width: 80%;
  }
}

@media (min-width: 960px) {
  #main-column #Journal .hr-page .hr-msg-deco img {
    width: 840px;
    max-width: 70%;
  }

  /* 各文例集のページの花（10/9 高見さん：出産祝いの大きさにそろえる） */
  #main-column #Journal .hr-page .hr-msg-top--page .hr-msg-deco img {
    width: 760px;
  }
}


/* ===== 文字サイズの統一（2026-10-19 スウィートマミー基準：本文14px・リード15px・注記13px・最小12px。元に戻すときはこの段落を消す） ===== */
#main-column #Journal .hr-page .hr-msg__text {font-size:14px}
#main-column #Journal .hr-page .hr-msg__note {font-size:13px}
#main-column #Journal .hr-page .hr-msg-n {font-size:12px}