@charset "utf-8";
/* ==================================================
   下層ページ：ヘッダー背景
================================================== */
.site-header[data-front-page="false"] {
  background-image:
    url("../img/common_head_bg.png"), var(--site-bg-image);
  background-position:
    center top, center;
  background-size: auto 100%, auto;
  background-repeat:
    repeat-x, repeat;
}
/* ==================================================
   下層共通：ページタイトル・紹介文
================================================== */
.sub_title__intro {
  padding-bottom: 60px;
  text-align: center;
}
/* タブレット：導入文の余白と左揃え */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #beans .sub_title__intro,
  #beginners .sub_title__intro {
    padding-inline: 64px;
  }
  #beans .sub_title__intro,
  #beginners .sub_title__intro,
    #beginners .beginners-recommend__intro,
  #beginners .beginners-brew__intro  {
    text-align: left;
  }
	  /* 下層ページ共通：本文の左右余白 */
  :is(#beans, #beginners, #about, #order, #default_page, #notfound) > section,
  .wrap #blog > .container,
  .wrap #blog_post .sub_contents > .container,
  .site-header[data-front-page="false"] ~ .wrap > .container {
    padding-inline: 50px;
  }
}
/* 強調するメッセージ */
.sub_title__intro .sub_title__message {
  margin-top: 24px;
  font-size: 1.25rem;
  font-weight: 700;
}
/* タイトル上の余白 */
.sub_title > .container {
  padding-top: 80px;
}
/* 下層ページのタイトル */
.sub_title .heading-unit .jp {
  font-size: 2.5rem;
}
.sub_title .heading-unit .en {
  letter-spacing: 0.1em;
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  /* タイトル上と左右の余白 */
  .sub_title > .container {
    padding: 64px 24px 0;
  }
  /* タイトルと説明文の間隔 */
  .sub_title .heading-unit {
    margin-bottom: 32px;
  }
  /* 日本語タイトル */
  .sub_title .heading-unit .jp {
    font-size: 1.75rem;
  }
  /* 英語タイトル */
  .sub_title .heading-unit .en {
    letter-spacing: 0.1em;
  }
  /* 説明文 */
  .sub_title__intro {
    text-align: left;
  }
  .sub_title__intro p {
    overflow-wrap: anywhere;
  }
  /* 太字メッセージ：TOPの紹介見出しと同じサイズ */
  .sub_title__intro .sub_title__message {
    margin-top: 32px;
    font-size: 1.125rem;
    line-height: 1.8;
  }
}
/* ==================================================
   下層共通：パララックス写真
================================================== */
@media screen and (min-width: 1025px) {
  body:not(.home) section h2.heading-unit .jp {
    font-size: 2.125rem; /* 34px */
  }
}
.sub_visual__photo {
  position: relative;
  isolation: isolate;
  height: clamp(300px, 32vw, 600px);
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}
/* 写真は背景で表示 */
.sub_visual__photo img {
  display: none;
}
/* スマホ・タブレット：背景を通常スクロールにする */
@media screen and (max-width: 1024px) {
  .sub_visual__photo {
    background-attachment: scroll;
  }
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  .sub_visual__photo {
    height: 260px;
  }
}

/* タブレット */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sub_visual__photo {
    height: 400px;
  }
}
/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {
  .sub_visual__photo {
    background-attachment: scroll;
  }
}
/* ==================================================
   下層共通：もや
   白色はcommon.cssの .mist-white を使用
================================================== */
/* 茶色いもや */
.mist-brown {
  height: 170px;
  background: url("../img/wave_b.png") center bottom / auto repeat-x;
}
/* 直前の写真・セクションに重ねる */
.mist-white.mist-overlap, .mist-brown.mist-overlap {
  position: relative;
  z-index: 1;
  margin-top: -40px;
  pointer-events: none;
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  .mist-brown {
    height: auto;
    aspect-ratio: 828 / 484;
    background: url("../img/wave_b_sp.png") center top / 100% auto no-repeat;
  }
  #beans_steps_section + .mist-white {
    margin-top: calc(-100vw * 60 / 750);
  }
  .mist-brown.mist-overlap {
    margin-top: calc(-100vw * 128 / 828);
  }
  /* このclassがある場合だけ左右反転 */
  .mist-white.mist-flip-sp, .mist-brown.mist-flip-sp {
    transform: scaleX(-1);
  }
}
/* ==================================================
   汎用固定ページ
================================================== */
#default_page_content {
  padding: 40px 24px 120px;
}

#default_page_content > .container {
  max-width: 1000px;
  padding: 0;
}

#default_page_content img {
  max-width: 100%;
  height: auto;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  #default_page_content {
    padding: 0 24px 80px;
  }

  #default_page_content > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }
}
/* ==================================================
   コーヒーについて：個別指定
================================================== */
/* メイン写真 */
#beans_visual_section .sub_visual__photo {
  background-image: url("../img/beans/beans_main.png");
}
/* ==================================================
   コーヒーが店頭に並ぶまで
================================================== */
/* 工程・淹れ方ガイドで共通の背景と余白 */
#beans_steps_section, #beans_guide_section {
  padding: 40px 24px 140px;
  background: url("../img/bg_brown.png") center top repeat;
}
#beans_steps_section > .container, #beans_guide_section > .container {
  max-width: 1200px;
  padding: 0;
}
/* 工程カード：PCは4列 */
.beans-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 白い角丸カード */
.beans-steps__item {
  min-width: 0;
  margin: 0;
  padding: 32px 24px;
  border-radius: 24px;
  background-color: #fff;
  list-style: none;
}
/* STEP番号と左右の線 */
.beans-steps__number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 16px;
  color: #003B3A;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
/* 線はカード幅に合わせて伸縮 */
.beans-steps__number::before, .beans-steps__number::after {
  content: "";
  flex: 1 1 0;
  min-width: 0;
  max-width: 32px;
  height: 1px;
  background-color: currentColor;
}
/* 写真：元画像の比率を維持 */
.beans-steps__image {
  aspect-ratio: 480 / 394;
  overflow: hidden;
}
.beans-steps__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 工程名 */
.beans-steps__title {
  margin: 16px 0 12px;
  text-align: center;
}
/* 説明文 */
.beans-steps__text {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.8;
}
/* タブレット・スマホ：2列 */
@media screen and (max-width: 1024px) {
  .beans-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  #beans_steps_section {
    padding: 0 32px 96px;
  }
  #beans_steps_section > .container {
    position: relative;
    z-index: 2;
    margin-top: calc(-100vw * 220 / 828);
  }
  /* 下層共通：セクション見出し */
  section .heading-unit {
    margin-bottom: 32px;
  }
  section .heading-unit .jp {
    font-size: 1.375rem; /* 22px */
    letter-spacing: 0.04em;
  }
  .beans-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .beans-steps__image {
    aspect-ratio: 3 / 2;
  }
  .beans-steps__number {
    margin-bottom: 12px;
  }
  .beans-steps__title {
    margin-top: 16px;
  }
  .beans-steps__text {
    font-size: 0.875rem; /* 14px */
  }
}
/* ==================================================
   取り扱い豆について
================================================== */
#beans_lineup_section {
  padding: 40px 24px 80px;
}
#beans_lineup_section > .container {
  max-width: 1200px;
  padding: 0;
}
/* PC：左に説明文、右に写真 */
.beans-lineup {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}

.beans-lineup__link {
  width: 100%;
  max-width: 480px;
  margin-top: 32px;
}
.beans-lineup__link .btn-round {
  display: block;
  width: 100%;
  text-align: center;
}
/* ボタン下の案内文 */
.beans-lineup__link .beans-lineup__note {
  font-size: 0.75rem;
}
.beans-lineup__image img {
  width: 100%;
  height: auto;
  margin-top: -50px;
}
/* スマートフォン：見出し・写真・説明文・ボタンの順 */
@media screen and (max-width: 767px) {
  #beans_lineup_section {
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding: 0 24px 64px;
  }
  .beans-lineup {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .beans-lineup__link {
    margin-top: 24px;
  }
  .beans-lineup__image {
    order: -1;
  }
 .beans-lineup__image img {
  margin-top: 0;
}
　
}
/* ==================================================
   コーヒーの焙煎
================================================== */
#beans_roasting_section {
  padding: 0 24px 80px;
}
#beans_roasting_section > .container {
  max-width: 1200px;
  padding: 0;
}
/* PC：左に本文、右に大小2枚の写真 */
.beans-roasting {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}
.beans-body p + p {
  margin-top: 24px;
}
.beans-roasting__images {
  display: grid;
  gap: 24px;
　
}
.beans-roasting__images img {
  display: block;
  height: auto;
  margin-top: -80px;
}
/* 大きい写真：右寄せ */
.beans-roasting__image-main {
  width: 85%;
  justify-self: end;
}
/* 小さい写真：左寄せ */
.beans-roasting__image-sub {
  width: 52%;
}
/* スマートフォン：見出し → 写真 → 本文 */
@media screen and (max-width: 767px) {
  #beans_roasting_section {
    padding-bottom: 64px;
  }
  .beans-roasting {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .beans-roasting__images {
    order: -1;
  }
 .beans-roasting__images img {
  display: block;
  height: auto;
  margin-top:0px;
}
}
/* ==================================================
   焙煎度合いについて
================================================== */
/* 1. 全体を囲む白い枠 */
.beans-roast-levels {
  margin-top: 48px;
  padding: 40px;
  background-color: #fff;
}
/* 2. 「焙煎度合いについて」の見出し */
/* 文字サイズはcommon.cssのh3を使用 */
.beans-roast-levels__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
  text-align: center;
}
/* 見出しの左右の点線 */
.beans-roast-levels__heading::before, .beans-roast-levels__heading::after {
  content: "";
  flex: 1;
  min-width: 0;
  border-top: 1px dotted #b8aaa3;
}
/* 3. 表全体の外枠 */
.roast_level {
  border: 1px solid #B6AEA5;
  border-radius: 8px;
  overflow: hidden;
}
/* 分類名と、その分類に属する項目を横並びにする */
.roast_level .roast_group {
  display: flex;
}
/* 分類と分類の間の線 */
.roast_level .roast_group + .roast_group {
  border-top: 1px solid #B6AEA5;
}
/* 4. 左側の分類名：浅煎り・中煎り・中深煎り・深煎り */
.roast_level .roast_category {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 120px;
  padding: 12px;
  border-right: 1px solid #B6AEA5;
  background-color: #432516;
  text-align: center;
  color: #fff;
}
/* 右側の一覧 */
.roast_level .roast_items {
  flex: 1;
  min-width: 0;
}
/* 5. 各焙煎度の1行分 */
.roast_level .roast_item {
  padding: 14px 20px;
}
/* 行と行の間の線 */
.roast_level .roast_item + .roast_item {
  border-top: 1px solid rgb(0 0 0 / 8%);
}
/* 番号と名称を横並びにする */
.roast_level .roast_header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
/* 6. 番号の丸 */
.roast_level .roast_num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
}
/* 説明文の左端を、上の名称に揃える */
/* 文字サイズ・行間・文字間隔はcommon.cssのpを使用 */
.roast_level .roast_desc {
  padding-left: 36px;
}
/* 注文焙煎を表す星印 */
.roast_level .star, .beans-roast-levels__note .star {
  color: #D9822B;
  font-size: 0.875rem;
}
/* ==================================================
   7. 焙煎度ごとの色
   background-color：背景色
   color：文字色
================================================== */
/* 1：ライトロースト */
.roast_level .level-1 {
  background-color: #FAF4ED;
}
.roast_level .level-1 .roast_num {
  background-color: #E0CEBB;
}
/* 2：シナモンロースト */
.roast_level .level-2 {
  background-color: #F3E6D7;
}
.roast_level .level-2 .roast_num {
  background-color: #D8BD9F;
}
/* 3：ミディアムロースト */
.roast_level .level-3 {
  background-color: #E6CFB8;
}
.roast_level .level-3 .roast_num {
  background-color: #C2A180;
}
/* 4：ハイロースト */
.roast_level .level-4 {
  background-color: #B58B67;
  color: #fff;
}
.roast_level .level-4 .roast_num {
  background-color: #8F6643;
}
/* 5：シティロースト */
.roast_level .level-5 {
  background-color: #8C5E3C;
  color: #fff;
}
.roast_level .level-5 .roast_num {
  background-color: #6B4224;
}
/* 6：フルシティロースト */
.roast_level .level-6 {
  background-color: #633B1F;
  color: #fff;
}
.roast_level .level-6 .roast_num {
  background-color: #472611;
}
/* 7：フレンチロースト */
.roast_level .level-7 {
  background-color: #42220E;
  color: #fff;
}
.roast_level .level-7 .roast_num {
  background-color: #2A1206;
}
/* 8：イタリアンロースト */
.roast_level .level-8 {
  background-color: #240F05;
  color: #fff;
}
.roast_level .level-8 .roast_num {
  background-color: #120501;
}
/* 8. 表の下の注記 */
.beans-roast-levels__note {
  margin-top: 16px;
}
/* 焙煎度の図：縦横比を維持して表示 */
.beans-roast-levels > img {
  width: 100%;
  height: auto;
}
/* ==================================================
   タブレット・スマホ：1024px以下
================================================== */
@media screen and (max-width: 1024px) {
  /* 分類名を各グループの上に配置 */
  .roast_level .roast_group {
    flex-direction: column;
  }
  .roast_level .roast_category {
    flex-basis: auto;
    padding: 8px 12px;
    border-right: none;
    border-bottom: 1px solid #B6AEA5;
  }
  /* 各行の内側の余白 */
  .roast_level .roast_item {
    padding: 12px 16px;
  }
  /* 説明文は左端から表示 */
  .roast_level .roast_desc {
    padding-left: 0;
  }
}
/* ==================================================
   スマホ：767px以下
================================================== */
@media screen and (max-width: 767px) {
  /* 白い枠の外側・内側の余白 */
  .beans-roast-levels {
    margin-top: 32px;
    padding: 24px 16px;
  }
  /* 見出しと点線の間隔 */
  .beans-roast-levels__heading {
    gap: 12px;
    margin-bottom: 24px;
  }
}
/* ==================================================
   焙煎度合いによる液色の違い
================================================== */
/* 比較欄の外枠 */
.beans-roast-color {
  margin-top: 40px;
  padding: 32px 80px;
  border: 1px solid #290B0A;
}
.beans-roast-color__heading {
  width: 100%;
  max-width: 400px;
  margin: 0 auto 28px;
  padding-bottom: 12px;
  border-bottom: 1px solid #290B0A;
  text-align: center;
}
/* PC・タブレット：3列 */
.beans-roast-color__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 50px;
}
.beans-roast-color__item {
  min-width: 0;
  text-align: center;
}
/* 写真の縦横比を維持 */
.beans-roast-color__item img {
  display: block;
  width: 100%;
  height: auto;
}
/* 写真下のキャプション */
.beans-roast-color__item figcaption {
  margin-top: 12px;
}
/* 名称：20px・太字・中央寄せ */
.beans-roast-color__name {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}
/* 説明文：左寄せ・行間1.5 */
.beans-roast-color__item figcaption p {
  margin-top: 4px;
  line-height: 1.5;
  text-align: left;
}
/* スマホ：1列 */
@media screen and (max-width: 767px) {
  .beans-roast-color {
    padding: 24px 16px;
  }
  .beans-roast-color__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}
/* ==================================================
   コーヒー豆の挽き具合
================================================== */
/* セクション全体の余白 */
#beans_grinding_section {
  padding: 0 24px 80px;
}
#beans_grinding_section > .container {
  max-width: 1200px;
  padding: 0;
}
/* この段の見出しだけ文字間隔を0にする */
#beans_grinding_section .heading-dot {
  letter-spacing: 0;
}
/* PC：同じ幅で4列 */
.beans-grinding {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}
/* カード内の文字は中央寄せ */
.beans-grinding__item {
  min-width: 0;
  text-align: center;
}
.beans-grinding__title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 3em;
  margin-bottom: 8px;
  font-weight: 700;
  letter-spacing: -0.1em;
}
/* 写真：縦横比を維持して角丸にする */
.beans-grinding__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 34px;
}
/* 写真下の説明文 */
.beans-grinding__item p {
  margin-top: 12px;
}
/* タブレット：同じ幅で2列 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .beans-grinding {
    grid-template-columns: 1fr 1fr;
  }
}
/* スマホ：1列 */
@media screen and (max-width: 767px) {
   #beans_grinding_section {
    padding-bottom: 120px;
  }
  /* 導入文・写真下の説明文を左寄せ */
  #beans_grinding_section p {
    text-align: left;
  }
  /* 見出しと導入文の間を広げる */
  #beans_grinding_section > .container > p {
    margin-top: 16px;
  }
  /* スマホでは写真下の説明文の改行を解除 */
  .beans-grinding__item p br {
    display: none;
  }
  .beans-grinding {
    grid-template-columns: 1fr;
  }
  .beans-grinding__title {
    min-height: 0;
  }
  /* 写真を横長にする */
  .beans-grinding__item img {
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }
}
/* ==================================================
   コーヒーの淹れ方ガイド
================================================== */
/* 導入文 */
.beans-guide__intro {
  text-align: center;
}
/* PC：3列 */
.beans-guide {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 32px;
  margin-top: 32px;
}
/* 白い角丸カード */
.beans-guide__item {
  min-width: 0;
  padding: 32px 24px;
  border-radius: 24px;
  background-color: #fff;
  text-align: center;
}
/* イラスト：表示枠の高さを揃え、全体を収める */
.beans-guide__item img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
}
/* タイトル：Commonのh3の20pxを使用 */
.beans-guide__title {
  margin-top: 24px;
  font-weight: 700;
}
/* 淹れ方ガイド：カード全体をPDFリンクにする */
.beans-guide > a {
  display: grid;
  min-width: 0;
  color: #290B0A;
  text-decoration: none;
}

.beans-guide > a:is(:hover, :focus-visible, :active) .beans-guide__item {
  background-color: #f2f2f2;
}
/* スマホ：2列 */
@media screen and (max-width: 767px) {
  #beans_guide_section {
    padding: 0 24px 64px;
  }
  #beans_guide_section > .container {
    position: relative;
    z-index: 2;
    margin-top: calc(-100vw * 220 / 828);
  }
  .beans-guide__intro {
    text-align: left;
  }
  .beans-guide {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  /* カードの内側の余白 */
  .beans-guide__item {
    display: flex;
    flex-direction: column;
    padding: 20px 10px;
    border-radius: 16px;
  }
  .beans-guide__item img {
    height: 120px;
  }
  /* タイトル：16px */
  .beans-guide__title {
    flex: 1;
    margin-top: 16px;
    font-size: 0.875rem;
    letter-spacing: -0.1em;
    line-height: 1.5;
  }
  /* ボタン：14px */
  .beans-guide__item .btn-round {
    display: block;
    margin-top: 16px;
    padding: 10px 6px;
    font-size: 0.875rem;
  }
  /* スマホではボタンの矢印を非表示 */
  .beans-guide__item .btn-round::after {
    display: none;
  }
}
/* ==================================================
   はじめての方へ：個別指定
================================================== */
/* メイン写真 */
#beginners_visual_section .sub_visual__photo {
  background-image: url("../img/beginners/beginners_main.png");
}
/* おすすめ4選 */
#beginners_recommend_section {
  --scroll-fade-distance: 300px;
  padding: 40px 24px 120px;
}
#beginners_recommend_section > .container {
  max-width: 1200px;
  padding: 0;
}
#beginners_recommend_section .heading-unit .jp {
  line-height: 1.5;
}

.beginners-recommend__lead {
  font-size: 0.85em;
  letter-spacing: 0.02em;
}
.beginners-recommend__intro {
  text-align: center;
}
.beginners-recommend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 96px 80px;
  margin-top: 80px;
}
/* 各商品：左に本文、右に写真 */
.beginners-recommend__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  align-items: start;
  gap: 32px;
}
.beginners-recommend__body {
  min-width: 0;
}
.beginners-recommend__body h3 {
  margin-bottom: 8px;
}
.beginners-recommend__body .beginners-recommend__origin {
  margin-bottom: 24px;
}
.beginners-recommend__image img {
  display: block;
  width: 100%;
  height: auto;
}
/* コーヒーの木：白い角丸の枠 */
.beginners-tree {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 600px) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  margin-top: 96px;
  padding: 48px 32px 48px 200px;
  border-radius: 24px;
  background-color: #fff;
}
/* 左上に重ねる実のイラスト */
.beginners-tree::before {
  content: "";
  position: absolute;
  top: -32px;
  left: -16px;
  width: 240px;
  aspect-ratio: 390 / 270;
  background: url("../img/beginners/coffee_cherry_ill.png") center / contain no-repeat;
  pointer-events: none;
}
.beginners-tree__body {
  min-width: 0;
}
.beginners-tree__body h3 {
  margin-bottom: 16px;
}
.beginners-tree__image img {
  display: block;
  width: 100%;
  height: auto;
}
.beginners-tree__body p {
  letter-spacing: 0;
  font-size: 0.875rem;
  line-height: 2em;
}
/* タブレット：商品を1列にする */
@media screen and (max-width: 1024px) {
  .beginners-recommend {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
  .beginners-recommend__item {
    grid-template-columns: minmax(0, 1fr) 200px;
  }
  .beginners-tree {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr);
    margin-top: 64px;
    padding: 40px 32px 40px 160px;
  }
  .beginners-tree::before {
    top: -24px;
    left: -12px;
    width: 160px;
  }
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  #beginners_recommend_section {
    padding: 0 24px 64px;
  }
  /* 既存のスマホ用ミストの余白に本文を重ねる */
  #beginners_recommend_section > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }
  .beginners-recommend__intro {
    text-align: left;
  }
  .beginners-recommend {
    margin-top: 40px;
  }
  /* 各商品を縦並びにする */
  .beginners-recommend__item {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  /* 写真を本文より上に配置 */
  .beginners-recommend__image {
    order: -1;
    width: 70%;
    max-width: 180px;
    justify-self: center;
  }
  .beginners-recommend__body .beginners-recommend__origin {
    margin-bottom: 16px;
  }
  .beginners-tree {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 64px;
    padding: 88px 24px 24px;
    border-radius: 16px;
  }
  .beginners-tree::before {
    top: -28px;
    left: -12px;
    width: 160px;
  }
  .beginners-tree__image {
    width: 100%;
    max-width: 320px;
    justify-self: center;
  }
}
/* ==================================================
   はじめての方へ：美味しいコーヒーの淹れ方
================================================== */
#beginners_brew_section {
  padding: 40px 24px 120px;
}
#beginners_brew_section > .container {
  max-width: 1200px;
  padding: 0;
}
.beginners-brew__intro {
  text-align: center;
}
.beginners-brew__tools {
  margin-top: 64px;
}
/* PC：器具を横6個に配置 */
.beginners-brew__tools-image {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
  max-width: 1000px;
  margin: 32px auto 0;
}
.beginners-tools__item {
  min-width: 0;
  margin: 0;
  text-align: center;
}
.beginners-tools__item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.beginners-tools__item figcaption {
  margin-top: 12px;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
 font-weight: bold;
}
.beginners-tools__note {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
}
/* タブレット・スマホ：3個ずつ2段 */
@media screen and (max-width: 1024px) {
  .beginners-brew__tools-image {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 16px;
  }
}
@media screen and (max-width: 767px) {
  #beginners_brew_section {
    padding: 0 24px 64px;
  }
  /* 白いミストの余白に見出しを重ねる */
  #beginners_brew_section > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }
  .beginners-brew__intro {
    text-align: left;
  }
  .beginners-brew__tools {
    margin-top: 40px;
  }
  .beginners-brew__tools-image {
    margin-top: 24px;
  }
}
/* 動画・美味しさのポイント */
.beginners-brew__movie, .beginners-brew__point {
  margin-top: 64px;
}
/* 動画：中央配置 */
.beginners-brew__video {
  max-width: 800px;
  margin: 0 auto;
}
.beginners-brew__video video {
  display: block;
  width: 100%;
  height: auto;
  background-color: #000;
}
/* ポイント：左に写真、右に説明文 */
.beginners-brew__point-content {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: start;
  gap: 40px;
}
.beginners-brew__point-image img {
  display: block;
  width: 100%;
  height: auto;
}
.beginners-brew__point-body {
  min-width: 0;
}
/* ボタンの色・形はcommon.cssを使用 */
.beginners-brew__point-body .btn-round {
  margin-top: 24px;
}
.beginners-brew__point-body .btn-round[aria-disabled="true"] {
  cursor: default;
}
/* スマートフォン：写真、説明文の順に縦並び */
@media screen and (max-width: 767px) {
  .beginners-brew__movie, .beginners-brew__point {
    margin-top: 40px;
  }
  .beginners-brew__point-content {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
/* ==================================================
   はじめての方へ：コーヒー豆の保存方法
================================================== */
#beginners_storage_section {
  padding: 40px 24px 120px;
}

#beginners_storage_section > .container {
  max-width: 1200px;
  padding: 0;
}

/* PC：2列 */
.beginners-storage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
}

.beginners-storage__item {
  min-width: 0;
}

/* 見出しの右側に挿絵用の余白 */
.beginners-storage__item .heading-dot {
  padding-right: 152px;
}

/* 挿絵の下では説明文が全幅に広がる */
.beginners-storage__body {
  display: flow-root;
}

/* 挿絵を右上へ重ねる */
.beginners-storage__body img {
  float: right;
  position: relative;
  width: 140px;
  height: auto;
  margin: -60px 0 16px 24px;
}

.beginners-storage__text p + p {
  margin-top: 16px;
}

.beginners-storage__note {
  font-size: 0.857rem;
}

/* タブレット：1列 */
@media screen and (max-width: 1024px) {
  .beginners-storage {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  #beginners_storage_section {
    padding: 0 24px 64px;
  }

  #beginners_storage_section > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }

  .beginners-storage__item .heading-dot {
    padding-right: 100px;
  }

  .beginners-storage__body img {
    width: 90px;
    margin: -80px 0 12px 16px;
  }
}
/* ==================================================
   はじめての方へ：よくいただくご質問
================================================== */
#beginners_faq_section {
  padding: 40px 24px 120px;
}
#beginners_faq_section > .container {
  max-width: 960px;
  padding: 0;
}
.beginners-faq {
  margin: 64px 0 0;
}
.beginners-faq__question {
  position: relative;
  margin: 0;
  padding-left: 48px;
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1.8;
}
.beginners-faq__question::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 28px;
  height: 1px;
  background-color: #b8aaa3;
}
/* 回答：質問の文字位置に揃える */
.beginners-faq__answer {
  margin: 20px 0 0;
  padding-left: 48px;
  min-width: 0;
}
.beginners-faq__answer p {
  margin: 0;
}
.beginners-faq__answer .btn-round {
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 24px;
}
/* 次の質問との間隔 */
.beginners-faq__answer + .beginners-faq__question {
  margin-top: 56px;
}
/* 比較画像：中央に広めの余白 */
.beginners-faq__image {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
  max-width: 1000px;
  margin: 40px auto 0;
}
.beginners-faq__comparison {
  min-width: 0;
  margin: 0;
}
.beginners-faq__comparison img {
  display: block;
  width: 100%;
  height: auto;
}
.beginners-faq__comparison figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 0.875rem;
  line-height: 1.8;
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  #beginners_faq_section {
    padding: 0 24px 80px;
  }
  #beginners_faq_section > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }
  .beginners-faq {
    margin-top: 40px;
  }
  .beginners-faq__question {
    padding-left: 32px;
    font-size: 1.125rem; /* 18px */
  }
  .beginners-faq__question::before {
    width: 18px;
  }
  .beginners-faq__answer {
    margin-top: 16px;
    padding-left: 32px;
  }
  .beginners-faq__answer + .beginners-faq__question {
    margin-top: 40px;
  }
  /* 比較する2枚のペアを保って縦に並べる */
  .beginners-faq__image {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    max-width: 480px;
    margin-top: 32px;
  }
}
/* ==================================================
   わたしたちについて：個別指定
================================================== */
/* メイン写真 */
#about_visual_section .sub_visual__photo {
  background-image: url("../img/about/about_main.png");
}
/* 珈琲工房 楽の歩み */
#about_journey_section {
  padding: 40px 24px 120px;
}

#about_journey_section > .container {
  max-width: 1200px;
  padding: 0;
}
.about-journey__reading {
  font-size: 0.75em;
}
.about-journey {
  display: grid;
  gap: 96px;
  margin-top: 80px;
}

/* 各項目の見出し */
.about-journey__title {
  position: relative;
  margin: 0 0 32px;
  padding-left: 48px;
  font-weight: 700;
  line-height: 1.8;
}

.about-journey__title::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 28px;
  height: 1px;
  background-color: #b8aaa3;
}

/* 左に本文、右に画像 */
.about-journey__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  align-items: start;
  gap: 40px;
  padding-left: 48px;
}

.about-journey__body {
  min-width: 0;
}

.about-journey__body p + p {
  margin-top: 32px;
}

.about-journey__image img {
  display: block;
  width: 100%;
  height: auto;
}
/* PC：各項目を左右にずらして配置 */
@media screen and (min-width: 1025px) {
   .about-journey__title {
    font-size: 1.875rem; /* 30px */
  }

  /* 1つ目のイラストは上へ移動 */
  .about-journey__item:first-child .about-journey__image {
    transform: translateY(-60px);
  }
}
/* 2項目目は写真を左にする */
.about-journey__item:nth-child(2) .about-journey__content {
  grid-template-columns: 460px minmax(0, 1fr);
}
.about-journey__item:nth-child(2) .about-journey__image {
  grid-column: 1;
  grid-row: 1;
}

.about-journey__item:nth-child(2) .about-journey__body {
  grid-column: 2;
  grid-row: 1;
}

/* タブレット */
@media screen and (max-width: 1024px) {
  .about-journey__content {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 40px;
  }

  .about-journey__item:nth-child(2) .about-journey__content {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  #about_journey_section {
    padding: 0 24px 64px;
  }

  /* 白いミストに見出しを重ねる */
  #about_journey_section > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }

  .about-journey {
    gap: 64px;
    margin-top: 48px;
  }

  .about-journey__title {
    margin-bottom: 24px;
    padding-left: 32px;
  }

  .about-journey__title::before {
    width: 18px;
  }

  .about-journey__content,
  .about-journey__item:nth-child(2) .about-journey__content {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding-left: 0;
  }

  .about-journey__image,
  .about-journey__item:nth-child(2) .about-journey__image {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: 320px;
    justify-self: center;
  }

  .about-journey__body,
  .about-journey__item:nth-child(2) .about-journey__body {
    grid-column: 1;
    grid-row: 2;
  }

  .about-journey__body p + p {
    margin-top: 24px;
  }
}
/* オーナーメッセージ */
.about-message {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: center;
  gap: 48px;
  margin-top: 96px;
  padding: 48px;
  border-radius: 32px;
  background-color: #fff;
}

/* 写真が決まるまでの仮枠 */
.about-message__image {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 50%;
  background-color: #eee9e3;
}

.about-message__body {
  min-width: 0;
}

.about-message__body .about-message__signature {
  margin-top: 32px;
  font-size: 0.875rem;
  font-weight: 700;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  .about-message {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    margin-top: 64px;
    padding: 32px 24px;
    border-radius: 24px;
  }

  .about-message__image {
    max-width: 180px;
    justify-self: center;
  }

  .about-message__body .about-message__signature {
    margin-top: 24px;
  }
}
/* ==================================================
   わたしたちについて：お店情報
================================================== */
#about_shop_section {
  padding: 40px 24px 120px;
}

#about_shop_section > .container {
  max-width: 1200px;
  padding: 0;
}

.about-shop {
  max-width: 1000px;
  margin: 64px auto 0;
}

.shop-table {
  margin: 0;
  border-top: 1px solid #000;
  font-size: 1rem;
  line-height: 2;
  letter-spacing: 0.05em;
}

.shop-table__row {
  display: grid;
  grid-template-columns: minmax(180px, 30%) minmax(0, 1fr);
  border-bottom: 1px solid #290B0A;
}

.shop-table dt {
  margin: 0;
  padding: 20px 24px;
  font-weight: 700;
}

.shop-table dd {
  margin: 0;
  padding: 20px 24px;
  overflow-wrap: anywhere;
}

.shop-table .shop-map {
  margin-top: 12px;
  padding: 8px 32px 8px 16px;
  border: 1px solid #b8aaa3;
  border-radius: 20px;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.6;
  font-weight: bold;
  background: #fff;
  letter-spacing: 0.05em;
}

/* 地図ボタンの矢印 */
.shop-table .shop-map::after {
  right: 12px;
  border-top-width: 1px;
  border-right-width: 1px;
}

/* 右へ3pxだけ動かす */
.shop-table .shop-map:hover::after {
  right: 9px;
}

/* スマートフォン */
@media screen and (max-width: 767px) {
  #about_shop_section {
    padding: 0 24px 80px;
  }

  #about_shop_section > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }

  .about-shop {
    margin-top: 40px;
  }

  .shop-table__row {
    display: block;
  }

  .shop-table dt {
    padding: 12px 16px 4px;
  }

  .shop-table dd {
    padding: 4px 16px 12px;
  }
  .shop-table dd > strong {
    display: inline-block;
    padding-bottom: 8px;
    text-decoration: underline dotted #b8aaa3;
    text-underline-offset: 0.45em;
  }
}
/* ==================================================
   ご注文について
================================================== */
#order_guide_section {
  padding: 40px 24px 120px;
}

#order_legal_section {
  padding: 40px 24px 120px;
}

#order_guide_section > .container,
#order_legal_section > .container {
  max-width: 1000px;
  padding: 0;
}

.order-heading {
  margin: 0 0 24px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.8;
}
/* ご注文の注記 */
.order-note {
  font-size: 0.875rem; /* 14px */
  line-height: 2em;
  display: inline-block;
}
/* スマートフォン */
@media screen and (max-width: 767px) {
  #order_guide_section {
    padding: 0 24px 64px;
  }

  #order_legal_section {
    padding: 0 24px 80px;
  }

  /* 白いミストの余白に見出しを重ねる */
  #order_guide_section > .container,
  #order_legal_section > .container {
    position: relative;
    z-index: 2;
    margin-top: 0;
  }
}
/* ==================================================
   ブログ一覧
================================================== */
/* 左：カテゴリー／右：記事一覧 */
#blog > .container {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  max-width: 1200px;
  min-height: 600px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 80px 24px 120px;
}

#blog .main-column {
  grid-column: 2;
  grid-row: 1;
}

#blog .side-column {
  grid-column: 1;
  grid-row: 1;
}

#blog .main-column,
#blog .side-column {
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  float: none;
}


#blog .blog_waku {
  padding: 28px 0;
  border-bottom: 1px solid #d8cec5;
}

/* 日付とタイトル */
#blog .post-info {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
}

#blog .blog-date,
#blog .blog-ttl {
  margin: 0;
  font-weight:bold;
}

#blog .blog-ttl {
  font-size: 1rem;
  line-height: 2;
  font-weight: 700;
  overflow-wrap: anywhere;
}

#blog .blog-ttl a {
  color: inherit;
  text-decoration: none;
}

#blog .blog-ttl a:hover {
  text-decoration: underline;
}

/* サイドバー：ブログ一覧・記事詳細で共通 */
:is(#blog, #blog_post) .side-column .widget-title {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #b8aaa3;
  font-weight: 700;
}

:is(#blog, #blog_post) .side-column ul {
  margin: 0;
  padding-left: 1.25em;
}

:is(#blog, #blog_post) .side-column li {
  margin-bottom: 12px;
  line-height: 1.8;
}

:is(#blog, #blog_post) .side-column a {
  color: inherit;
}

/* ページ番号 */
#blog .wp-pagenavi {
  margin-top: 40px;
}

/* スマートフォン */
@media screen and (max-width: 1024px) {
  #blog > .container {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
    margin-top: 0;
    padding: 0 24px 80px;
  }

  #blog .side-column {
    grid-column: 1;
    grid-row: 1;
  }

  #blog .main-column {
    grid-column: 1;
    grid-row: 2;
  }

  #blog .post-info {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  #blog .blog_waku {
    padding: 24px 0;
  }
}
:is(#blog, #blog_post) .side-column li.cat-item::marker {
  color: #A98558;
}
@media screen and (max-width: 767px) {
  #blog .main-column {
    grid-row: 1;
  }

  #blog .side-column {
    grid-row: 2;
  }
}
/* ==================================================
   ブログ記事詳細
================================================== */
#blog_post .sub_contents > .container {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  align-items: start;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 120px;
  min-height: 600px;
  box-sizing: border-box;
}

#blog_post .main-column,
#blog_post .side-column {
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  float: none;
}

#blog_post .main-column {
  grid-column: 2;
  grid-row: 1;
}

#blog_post .side-column {
  grid-column: 1;
  grid-row: 1;
}

#blog_post .blog-date {
  margin: 0 0 24px;
}

#blog_post .blog-ttl {
  margin: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #b8aaa3;
  font-weight: 700;
  overflow-wrap: anywhere;
  font-size: 1.875rem; /* 30px */
}

/* 記事のカテゴリー */
#blog_post .blog-category {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#blog_post .blog-category a {
  display: inline-block;
  padding: 4px 20px;
  border-radius: 20px;
  background-color: #ad9d8b;
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.6;
  text-decoration: none;
}

/* 本文の文字設定はcommon.cssを使用 */
#blog_post .post-txt {
  margin-top: 40px;
  overflow-wrap: anywhere;
}

#blog_post .post-txt > :not(:first-child) {
  margin-top: 24px;
}

#blog_post .post-txt h2,
#blog_post .post-txt h3 {
  margin-top: 56px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #b8aaa3;
}
#blog_post .post-txt h2 {
  font-size: 1.5rem; /* 24px */
}

#blog_post .post-txt h3 {
  font-size: 1.25rem; /* 20px */
}
#blog_post .post-txt img {
  max-width: 100%;
  height: auto;
}

#blog_post .post-txt figure {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* 前後の記事・一覧へ戻る */
#blog_post .pager {
  margin-top: 80px;
}

.blog-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 16px;
  border-top: 1px dashed #b8aaa3;
}

.blog-post-nav > div {
  min-width: 0;
}

.blog-post-nav a {
  color: inherit;
}

.blog-post-back {
  margin-top: 32px;
  text-align: center;
}

/* タブレット・スマートフォン：ブログ記事詳細の余白 */
@media screen and (max-width: 1024px) {
  #blog_post .sub_contents > .container {
    position: relative;
    z-index: 2;
    gap: 40px;
    margin-top: 0;
    padding: 0 24px 80px;
  }

  #blog_post .post-txt {
    margin-top: 32px;
  }

  #blog_post .pager {
    margin-top: 56px;
  }
}

/* スマートフォン：ブログ記事詳細の配置と見出し */
@media screen and (max-width: 767px) {
  #blog_post .sub_contents > .container {
    grid-template-columns: minmax(0, 1fr);
  }

  #blog_post .main-column {
    grid-column: 1;
    grid-row: 1;
  }

  #blog_post .side-column {
    grid-column: 1;
    grid-row: 2;
  }

  #blog_post .blog-ttl {
    font-size: 1.5rem; /* 24px */
  }

  #blog_post .post-txt h2 {
    font-size: 1.25rem; /* 20px */
  }

  #blog_post .post-txt h3 {
    font-size: 1.125rem; /* 18px */
  }
}
/* カテゴリー・タグ・年月別一覧の見出し */
#blog .blog-archive-title {
  margin: 0 0 32px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

#blog .blog-archive-empty {
  margin: 0;
  padding: 32px 0;
}

/* ブログ一覧のページャー */
#blog .pagination {
  margin-top: 40px;
}

#blog .pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#blog .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

#blog .pagination .page-numbers:not(.dots) {
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #fff;
  color: #290B0A;
  font-size: 0.875rem;
  line-height: 1;
  text-decoration: none;
}

#blog .pagination .page-numbers.current {
  border-color: #290B0A;
  background-color: #290B0A;
  color: #fff;
  font-weight: 700;
}

#blog .pagination a.page-numbers:hover {
  border-color: #290B0A;
}

#blog .pagination .page-numbers:is(.prev, .next) {
  background-color: transparent;
}

#blog .pagination :is(.prev, .next) > [aria-hidden="true"] {
  margin: 0;
  padding: 0;
  background-color: transparent;
  color: inherit;
  font-size: 1.25rem;
}
#blog .pagination .page-numbers.dots {
  background-color: transparent;
  color: #290B0A;
}
/* 404ページ */
#notfound_content {
  padding: 0 24px 120px;
  text-align: center;
}

#notfound_content > .container {
  padding: 0;
}
/* PC：コーヒーミルの注記を1行で表示 */
@media screen and (min-width: 1025px) {
  .beginners-tools__note {
    white-space: nowrap;
  }
}