@charset "UTF-8";
/* 花RiRoについて（121）の見た目 20261029c（本文も明朝に・文字を大きく）。元ファイル：about-121.html の <style> */
/* ===== 1. このページの値（色・フォント） ===== */
.hr-page.hr-ab {
  --hr-font-display: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --hr-font-en: "Cormorant Garamond", "Times New Roman", serif;
  --hr-ab-dark: #1c1c1c;        /* 一輪の薔薇の帯の背景 */
  --hr-ab-red: #b3202f;         /* 写真の薔薇に合わせた赤（細い線だけに使う） */
}

/* --- 見出し・引用・署名を明朝に --- */
.hr-ab .hr-title,
.hr-ab .hr-heading__ja,
.hr-ab .hr-features__title,
.hr-ab .hr-h4,
.hr-ab .hr-quote,
.hr-ab .hr-sign,
.hr-ab .hr-stats strong,
.hr-ab .hr-ab-mv__sp {
  font-family: var(--hr-font-display);
  font-weight: 500;
}

/* 署名は中央に（共通CSSは右寄せ） */
.hr-ab .hr-sign {
  text-align: center;
}

/* 英字ラベル・番号はセリフ体の斜体で上品に */
.hr-ab .hr-en,
.hr-ab .hr-heading__en,
.hr-ab .hr-features__num {
  font-family: var(--hr-font-en);
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: none;
}

.hr-ab .hr-features__num {
  letter-spacing: 0.04em;       /* 番号が2行に割れないように */
  white-space: nowrap;
}

/* プリザーブドフラワーの3つのタイルは、スマホでも3つ横並び（2列だと1つ余るため） */
.hr-ab .hr-stats {
  grid-template-columns: repeat(3, 1fr);
}

/* 章の見出しは 28px／スマホ24px（10/19 の文字サイズの基準） */
.hr-ab .hr-heading__ja {
  font-size: 28px;
  letter-spacing: 0.12em;
}

/* 見出しの下に赤い細線（写真の薔薇の色） */
.hr-ab .hr-heading__ja::after {
  content: "";
  display: block;
  width: 32px;
  height: 1px;
  margin: 20px auto 0;
  background: var(--hr-ab-red);
}


/* 説明の文章（中央に読みやすい幅で） */
.hr-ab-text {
  max-width: 760px;
  margin: 0 auto 40px;
  text-align: left;             /* ページ名の下（中央揃えの中）でも左揃えに */
}

.hr-ab-text p {
  margin: 0 0 1.2em;
}

.hr-ab-text--after {
  margin-top: 40px;             /* タイル・リード文の下に置くとき */
  margin-bottom: 0;
}

.hr-ab-text p:last-child {
  margin-bottom: 0;
}

/* 文章の中のお客様の言葉（明朝で少し目立たせる） */
.hr-ab-voice {
  font-family: var(--hr-font-display);
  font-size: 15px;
  text-align: center;
}


/* ===== 2. メインビジュアル（画像に文字入り） ===== */
.hr-ab-mv {
  margin: 0 0 56px;
}

.hr-ab-mv img {
  display: block;
  width: 100%;
  height: auto;
}

/* スマホだけ：画像の中の文が小さくなるので、下に文字でも出す */
.hr-ab-mv__sp {
  display: none;
}


/* ===== 3. 一輪の薔薇（黒い帯・写真と文を左右に） ===== */
.hr-ab .hr-ab-rose {
  --hr-band-bg: var(--hr-ab-dark);
  color: #f2f2f2;
}

.hr-ab-rose .hr-heading__en {
  color: #bdbdbd;
}

.hr-ab-rose .hr-heading__ja {
  color: #fff;
}

.hr-ab-rose .hr-lead,
.hr-ab-rose p {
  color: #d6d6d6;
}

.hr-ab-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: center;
  margin: 0 0 56px;
}

.hr-ab-row:last-child {
  margin-bottom: 0;
}

.hr-ab-row img {
  display: block;
  width: 100%;
  height: auto;
}

.hr-ab-row .hr-h4 {
  margin: 0 0 16px;
  color: #fff;
  font-size: 22px;
  letter-spacing: 0.1em;
}

/* 最後の「写真のお花」と商品へのボタン */
.hr-ab-item {
  margin: 56px 0 0;
  text-align: center;
}

.hr-ab-rose .hr-ab-item__cap {
  margin: 0;
  color: #9e9e9e;
  font-size: 13px;
  letter-spacing: 0.08em;
}

.hr-ab-rose .hr-ab-item__note {
  margin: 4px 0 0;
  color: #9e9e9e;
  font-size: 13px;
}

.hr-ab-item .hr-btn {
  margin-top: 16px;
}

/* 黒地のボタン：白枠、ホバーで白く塗る */
.hr-ab-rose .hr-btn {
  border-color: #fff;
  background: transparent;
  color: #fff !important;       /* ショップサーブのリンク色に負けないように */
}

.hr-ab-rose .hr-btn::before {
  background: #fff;
}

.hr-ab-rose .hr-btn:hover {
  border-color: #fff;
  color: var(--hr-ab-dark) !important;
}

.hr-ab-rose a:not(.hr-btn) {
  color: #fff;
}


/* ===== 4. 画面幅ごとの調整 ===== */
@media (min-width: 640px) {
  .hr-ab-row {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
  }

  /* 2段目は写真を右に */
  .hr-ab-row--rev > :first-child {
    order: 2;
  }
}

@media (max-width: 639px) {
  .hr-ab .hr-heading__ja {
    font-size: 24px;
  }

  /* スマホでは手で入れた改行を消して、自然に折り返す */
  .hr-ab .hr-lead br {
    display: none;
  }

  .hr-ab .hr-lead {
    text-align: left;
  }

  .hr-ab .hr-stats {
    gap: 8px;
  }

  .hr-ab .hr-stats > * {
    padding: 16px 6px;
  }

  .hr-ab .hr-stats strong {
    font-size: 17px;
  }

  .hr-ab .hr-stats span {
    font-size: 12px;
  }

  .hr-ab-mv {
    margin: 0 -16px 40px;       /* スマホは画面の端まで */
  }

  .hr-ab-mv__sp {
    display: block;
    margin: 20px 16px 0;
    font-size: 17px;
    line-height: 1.9;
    letter-spacing: 0.06em;
    text-align: center;
  }

  .hr-ab-mv__sp small {
    display: block;
    margin-top: 8px;
    color: var(--hr-sub);
    font-size: 14px;
  }

  .hr-ab-row {
    margin-bottom: 40px;
  }
}
/* 運営会社（企業サイトへのリンク。10/26 高見さん） */
.hr-company {
  margin: 28px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--hr-sub);
  letter-spacing: 0.06em;
}
.hr-company a {
  margin-left: 0.6em;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===== 5. 本文も明朝に（10/29 高見さん「高級感を出したい」） =====
   ・見出しだけでなく、文章・ボタン・電話の案内まで明朝（Shippori Mincho）にそろえる
   ・Eストアの default.css が本文の書体を固定しているので、!important で上書きする
   ・英字のラベル・番号（About HANARIRO、01 など）は今までどおりセリフ体の斜体 */
#main-column #Journal .hr-ab,
#main-column #Journal .hr-ab :where(p, li, a, span, div, small, strong, h1, h2, h3, h4) {
  font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif !important;
  font-feature-settings: "palt";
}
#main-column #Journal .hr-ab p,
#main-column #Journal .hr-ab li {
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.95;
}
#main-column #Journal .hr-ab .hr-en,
#main-column #Journal .hr-ab .hr-heading__en,
#main-column #Journal .hr-ab .hr-features__num {
  font-family: var(--hr-font-en) !important;
}

/* ===== 6. 文字の大きさ（10/29 高見さん「フォント小さくない？」） =====
   ・Eストアの default.css が #Journal の中の p・div・a を 12px に固定していて、本文・リード・ボタンが全部 12px になっていた
   ・明朝は小さく細く見えるので、基準（本文14px）より一段大きく：本文 PC16px／スマホ15px、リード16px、注記14px */
#main-column #Journal .hr-ab p,
#main-column #Journal .hr-ab li,
#main-column #Journal .hr-ab .hr-lead,
#main-column #Journal .hr-ab .hr-contact,
#main-column #Journal .hr-ab .hr-sign { font-size: 16px; }
#main-column #Journal .hr-ab .hr-ab-voice,
#main-column #Journal .hr-ab .hr-quote { font-size: 17px; }
#main-column #Journal .hr-ab .hr-btn,
#main-column #Journal .hr-ab .hr-ab-item__cap,
#main-column #Journal .hr-ab .hr-ab-item__note,
#main-column #Journal .hr-ab .hr-stats span,
#main-column #Journal .hr-ab .hr-company { font-size: 14px; }
#main-column #Journal .hr-ab .hr-stats strong { font-size: 20px; }
#main-column #Journal .hr-ab .hr-contact__tel { font-size: 26px; }
#main-column #Journal .hr-ab .hr-ab-mv__sp { font-size: 17px; }
#main-column #Journal .hr-ab .hr-ab-mv__sp small { font-size: 14px; }
@media (max-width: 639px) {
  #main-column #Journal .hr-ab p,
  #main-column #Journal .hr-ab li,
  #main-column #Journal .hr-ab .hr-lead,
  #main-column #Journal .hr-ab .hr-contact,
  #main-column #Journal .hr-ab .hr-sign { font-size: 15px; }
  #main-column #Journal .hr-ab .hr-ab-voice,
  #main-column #Journal .hr-ab .hr-quote { font-size: 16px; }
  #main-column #Journal .hr-ab .hr-stats strong { font-size: 17px; }
  #main-column #Journal .hr-ab .hr-stats span { font-size: 12px; }
  #main-column #Journal .hr-ab .hr-contact__tel { font-size: 24px; }
}