.uc-health-block {
    padding: 60px 0;
    background-color: #fff;
    color: #222;
    line-height: 1.8;
}

.uc-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* タイトル：フォントサイズを確実に適用 */
.uc-inner h2.uc-main-title {
    background-color: #5d4037;
    color: #fff;
    text-align: center;
    font-size: 1.6rem !important;
    padding: 20px 10px;
    font-weight: bold;
    margin: 0 0 2em 0;
    border-radius: 4px;
    line-height: 1.4;
}


.uc-main-title .highlight {
    background: linear-gradient(transparent 70%, #ffa726 70%);
    padding: 0 4px;
    font-weight: bold;
}

/* リード文全体のコンテナをFlexboxにする */
.uc-lead-box {
    display: flex;
    justify-content: space-between;
    align-items: center; /* 上下中央揃え（上揃えにしたい場合は flex-start ） */
    gap: 20px; /* テキストと写真の間の余白 */
}

/* 左側：テキスト（8割） */
.uc-lead-text {
    flex: 0 0 78%; /* 隙間を考慮して少し余裕を持たせています */
}

/* 右側：専門家（2割） */
.uc-lead-expert {
    flex: 0 0 20%;
    text-align: center; /* 写真や名前を中央寄せ */
}

/* 写真のスタイル設定 */
.uc-expert-img {
    width: 100%;
    height: auto;
    border-radius: 50%; /* 写真を丸くしたい場合はこれ（四角のままでよければ削除） */
    object-fit: cover;
}

/* 専門家の名前テキスト */
.uc-expert-name {
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: bold;
    color: #333;
}

/* --- スマホ表示（画面幅が狭いとき）の調整 --- */
@media screen and (max-width: 768px) {
    .uc-lead-box {
        flex-direction: column-reverse; /* スマホでは縦並び（テキストが上、写真が下）にする */
        gap: 15px;
    }
    .uc-lead-text,
    .uc-lead-expert {
        flex: 0 0 100%; /* スマホでは横幅いっぱいに広げる */
    }
    .uc-lead-expert {
        width: 120px; /* スマホで写真が巨大化するのを防ぐためのサイズ固定 */
        margin: 0 auto;
    }
}



.uc-marker {
    background: linear-gradient(transparent 60%, #fff176 60%);
    font-weight: bold;
    padding: 0 2px;
}

.uc-blend-highlight {
    background-color: #fef9ed;
    border: 2px solid #e67e22;
    padding: 30px 20px;
    position: relative;
    margin: 45px 0;
    border-radius: 8px;
}

.uc-blend-tag {
    position: absolute;
    top: -15px;
    left: 20px;
    background-color: #e67e22;
    color: #fff;
    padding: 2px 15px;
    font-weight: bold;
    border-radius: 20px;
    line-height: 1.4;
    margin: 0;
}

.uc-blend-text {
    margin: 0;
    font-weight: bold;
    text-align: center;
}

.uc-blend-text span {
    color: #c0392b;
    text-decoration: underline;
}

.uc-sub-lead {
    text-align: center;
    margin-bottom: 0;
}

/* 成分リストセクションの余白設定 */
.uc-component-section {
    margin-top: 60px;
}

.uc-group-label {
    font-weight: bold;
    border-bottom: 3px solid #5d4037;
    display: inline-block;
　margin-top: 1.5em;
    margin-bottom: 1.5em;
    font-size: 1.2rem;
}

.uc-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.uc-card {
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.uc-card-head {
    background-color: #f5f5f5;
    padding: 12px 10px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ccc;
    margin: 0;
    min-height: 3em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.uc-card-body {
    padding: 15px;
    font-size: 0.95em;
}

@media (max-width: 768px) {
    .uc-inner h2.uc-main-title {
        font-size: 1.3rem !important;
    }
    .uc-blend-text {
        text-align: left;
    }
    .pc-only {
        display: none;
    }
    .uc-card-grid {
        grid-template-columns: 1fr;
    }
}

/* 全体のベースカラー（セクションの背景を薄いベージュに） */
.voice-section-coffee {
  background-color: #f9f7f2; /* ミルク多めのカフェオレ色 */
  padding: 20px 20px;
  border-radius: 10px;
}

/* タイトルの装飾：深みのあるコーヒーブラウン */
.custom-coffee-tit {
  color: #3e2723 !important; /* 焙煎豆のような濃い茶色 */
  text-align: center;
  margin-bottom: 40px !important;
}

.custom-coffee-tit .cmn_tit01_underline {
  border-bottom: 3px solid #a1887f !important; /* モカブラウンのアンダーライン */
  padding-bottom: 10px;
}

.custom-coffee-tit .sub-tit {
  display: block;
  font-size: 0.5em;
  color: #8d6e63;
  letter-spacing: 0.1em;
  margin-top: 10px;
  font-family: 'Georgia', serif;
  font-style: italic;
}

/* カードのリッチ化 */
.coffee-style .goods_detail_voice_list_box {
  background: #ffffff;
  border: 1px solid #d7ccc8;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(62, 39, 35, 0.05);
  position: relative;
  overflow: hidden;
}

/* 「”」引用符をアクセントに追加 */
.coffee-style .goods_detail_voice_list_box::before {
  content: "“";
  position: absolute;
  top: -10px;
  left: 10px;
  color: #efebe9;
  font-size: 80px;
  font-family: serif;
  z-index: 0;
}

/* テキストの調整 */
.coffee-style .goods_detail_voice_list_txt {
  position: relative;
  z-index: 1;
  color: #4e342e; /* 落ち着いたダークブラウン */
  font-weight: bold;
  line-height: 1.6;
}

/* 性別・年代ラベル */
.coffee-style .goods_detail_voice_list_info {
  margin-top: 15px;
  border-top: 1px dashed #d7ccc8;
  padding-top: 10px;
}

.coffee-style .goods_detail_voice_list_info span {
  font-size: 0.85rem;
  background: #f1ede8;
  padding: 3px 10px;
  border-radius: 4px;
  color: #5d4037;
}

.cmn_tit05 {
    /* 既存のサイズ感を維持しつつ微調整 */
    color: #3e2723; /* 深いコーヒーブラウン */
    line-height: 1.8; /* 行間を広げて優雅に */
    letter-spacing: 0.05em; /* 文字間を少し開けてモダンに */
    position: relative;
    padding: 30px 0; /* 上下にゆとりを持たせる */
    border-top: 1px solid #d7ccc8;
    border-bottom: 1px solid #d7ccc8;
    text-align: center;
}

#menuItem-6 {
    /* 背景色を追加 */
    background-color: #fcfaf8;

/* フォント：明朝体に変更（デバイスごとの標準明朝体を指定） */
    font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS P明朝", "MS PMincho", serif;
    font-weight: 900; /* 数値でも太さを指定 */
/* 文字の周りに0.3pxの影を4方向に落として「肉厚」にします */
    text-shadow: 
        0.3px 0.3px 0 #2b1a17, 
        -0.3px -0.3px 0 #2b1a17, 
        0.3px -0.3px 0 #2b1a17, 
        -0.3px 0.3px 0 #2b1a17;


    /* 余白と色の調整 */
    padding: 20px 20px; /* 上下にゆとりを持たせ、左右に余白 */
    color: #4e342e;     /* 視認性の良い深めのブラウン */
    text-align: center;
    line-height: 1.8;
    letter-spacing: 0.08em; /* 少し広げて高級感を出す */

    /* 装飾：上下にコーヒー豆やフィルターをイメージしたライン */
    border-top: 1px solid #e0d8c8;
    border-bottom: 1px solid #e0d8c8;
    
    /* 既存のQ数（サイズ）は維持 */
    margin-top: 60px !important;
}

/* スマホ表示での調整（s_mt30に合わせて余白を少し詰める） */
@media screen and (max-width: 767px) {
    #menuItem-6 {
        padding: 40px 15px;
        margin-top: 30px !important;
        line-height: 1.6;
    }

/* --- 追加：cmn_tit05 のスマホ設定 --- */
    .cmn_tit05 {
        font-size: 20px; /* PCより一回り小さく設定（調整してください） */
        padding: 20px 0; /* 上下の余白も30pxから20pxに微調整 */
        line-height: 1.6; /* スマホでは行間を少し詰めると読みやすくなります */
    }

}

/* セクション全体 */
.coffee-process-section {
    padding: 80px 0;
    background-color: #fff; /* 大タイトルとのコントラストをつける */
}

.process-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- こだわり3工程セクション --- */
.process-item {
    display: flex;
    align-items: center;
    margin-bottom: 100px;
    position: relative;
}

.process-item.reverse {
    flex-direction: row-reverse;
}

/* 中タイトル（背景デカ文字：濃いめの恋色） */
.process-step-label {
    writing-mode: horizontal-tb; 
    font-family: "Hiragino Mincho ProN", serif;
    font-size: 80px;
    font-weight: 900;
    color: #002B09; /* 視認性の高い濃いめのベージュ */
    line-height: 1;
    position: absolute;
    top: -50px;
    left: -20px;
    z-index: 0;
    white-space: nowrap;
    letter-spacing: -0.02em;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
}

.process-item.reverse .process-step-label {
    left: auto;
    right: -20px;
}

/* 小タイトル（こだわり挽き...）：本文フォント & 赤みブラウン */
.process-sub-tit {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #c90c28; /* アクセントの赤みブラウン */
    margin-bottom: 10px;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
}

.process-sub-tit::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1.1em;
    background: #c90c28;
    margin-right: 10px;
}

/* メインタイトル（コーン式ミル...） */
.process-main-tit {
    font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", serif;
    font-size: 32px;
    font-weight: 700;
    color: #2b1a17;
    margin-bottom: 40px;
    line-height: 1.3;
    border-left: 4px solid #3e2723;
    padding-left: 15px !important;
}

.process-content {
   flex: 1;
    padding: 0 50px; 
    /* ↓ ここを 15px から 40px 程度に増やすと空間が生まれます */
    padding-top: 40px !important; 
    z-index: 1;
}

.process-img {
    flex: 1;
}

.process-img img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 15px 15px 0px #f9f7f2;
}

/* --- レスポンシブ調整 --- */
@media screen and (max-width: 767px) {
    #menuItem-6 {
        padding: 40px 15px;
        margin-top: 30px !important;
        font-size: 1.4rem;
    }
    .process-item, .process-item.reverse {
        flex-direction: column;
        margin-bottom: 60px;
    }
    .process-step-label {
        font-size: 50px;
        position: relative;
        top: 0;
        left: 0;
        margin-bottom: 10px;
        display: block;
    }
    .process-content {
        padding: 0;
        margin-bottom: 20px;
    }
    .process-main-tit {
        font-size: 24px;
    }
}

/* 導入全体の背景を整える */
.intro-rich-wrapper {
    padding: 60px 40px;
    background-color: #fcfaf8; /* 工程セクションと共通の薄ベージュ */
    border-radius: 8px;
    position: relative;
    margin-bottom: 60px;
}

/* 既存の見出しクラスにデザインの深みをプラス */
.intro-main-copy {
    border: none !important;
    margin-bottom: 50px !important;
    text-align: center;
}

.intro-main-copy .cmn_tit01_underline {
    font-family: "ヒラギノ明朝 ProN W6", "Hiragino Mincho ProN", serif;
    font-size: 32px;
    font-weight: 700;    
    border-bottom: none !important; /* 既存の線を一旦消してリッチに再定義 */
    display: inline-block;
    position: relative;
    padding-bottom: 15px;
    font-family: "Hiragino Mincho ProN", serif; /* 雰囲気作り */
}

/* 文字のQ数は変えず、下に飾り線を入れる */
.intro-main-copy .cmn_tit01_underline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 400px;
    height: 4px;
    background-color: #c90c28; /* 工程セクションの赤とリンク */
}

/* テキストと画像のバランス調整 */
.intro-content-box {
    display: flex;
    align-items: center;
    gap: 40px;
}

.intro-text-side {
    flex: 1;
    line-height: 2; /* 行間を広げて「読み物」感を出す */
    color: #4e342e;
}

.intro-point-badge {
    margin-top: 25px;
    border-top: 1px dashed #dcd4c9;
    padding-top: 20px;
}

/* 画像に「座布団」のような背景を敷いてリッチにする */
.intro-img-side {
    flex: 1;
    position: relative;
}

.intro-img-side img {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.intro-img-side::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 20px;
    width: 100%;
    height: 100%;
    background-color: #dcd4c9; /* もっと恋色 */
    z-index: 0;
}

/* スマホ対応：Q数を維持したままレイアウトを最適化 */
@media screen and (max-width: 767px) {
    .intro-rich-wrapper { padding: 40px 20px; }
    .intro-content-box { flex-direction: column; }
    .intro-img-side::before { display: none; } /* スマホではスッキリ */
    .intro-img-side { order: -1; margin-bottom: 30px; }

/* ここを追加：スマホでのQ数を小さくする */
    .intro-main-copy .cmn_tit01_underline {
        font-size: 24px; /* 32pxから24pxへ変更（お好みで調整してください） */
        padding-bottom: 10px; /* 文字が小さくなるのに合わせて余白も微調整 */
    }

/* 赤い飾り線の幅もスマホに合わせて調整するとバランスが良いです */
    .intro-main-copy .cmn_tit01_underline::after {
        width: 80%; /* 固定値400pxから可変に変更して画面からはみ出さないように */
    }

}



/* --- 独自デザイン：お客様の声 --- */
.voice-section-coffee {
    background-color: #f9f7f2;
    padding: 60px 20px;
    border-radius: 10px;
    margin: 40px 0;
}

.cv-container {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* PCは2列（お好みで3列にも可） */
    gap: 20px;
}

.cv-card {
    background: #ffffff;
    border: 1px solid #d7ccc8;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(62, 39, 35, 0.05);
    position: relative;
    padding: 40px 20px 20px; /* 上を広めに開ける */
}

/* 引用符装飾 */
.cv-card::before {
    content: "“";
    position: absolute;
    top: -5px;
    left: 15px;
    color: #efebe9;
    font-size: 80px;
    font-family: serif;
    line-height: 1;
}

.cv-text {
    font-size: 16px; /* Q数維持 */
    color: #4e342e;
    font-weight: bold;
    line-height: 1.8;
    position: relative;
    z-index: 1;
    margin-bottom: 15px;
}

.cv-info {
    border-top: 1px dashed #d7ccc8;
    padding-top: 10px;
    text-align: right;
}

.cv-info span {
    font-size: 14px;
    background: #f1ede8;
    padding: 3px 12px;
    border-radius: 4px;
    color: #5d4037;
}

/* 注釈 */
.cv-noties {
    max-width: 1000px;
    margin: 30px auto 0;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}

/* --- スマホ表示 (SP) --- */
@media screen and (max-width: 767px) {
    .cv-container {
        grid-template-columns: 1fr; /* 縦1列に強制 */
    }
    
    .voice-section-coffee {
        padding: 40px 15px;
    }

    .cv-text {
        font-size: 15px; /* スマホで読みやすいサイズ */
    }

    .cv-card::before {
        font-size: 60px;
        top: 0;
    }
}

/* オリジナルブレンド付き*/
.custom-info-box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
    margin: 40px 0;
    padding: 30px;           /* 余白を少し広めに */
    background-color: #baedf2; /* 指定のブルー */
    border-radius: 12px;      /* 角丸に */
}

/* 文字エリア */
.custom-info-text {
    flex: 1; 
}

.custom-info-text h3 {
    margin: 0 0 15px;
    font-size: 1.5rem;
    border-bottom: 2px solid #fff; /* 下線もネイビー系に */
    padding-bottom: 10px;
}

.custom-info-text p {
    margin: 0;
    line-height: 1.8;
    font-size: 1.1rem;
    color: #333;
    text-align: justify;
}

/* 画像エリア：幅200px固定 */
.custom-info-image {
    flex: 0 0 400px; 
}

.custom-info-image img {
    width: auto;
    height: auto;
    display: block;
    border: 2px solid #fff;   /* 画像に白枠をつけて浮き立たせる */
    border-radius: 6px;
}

/* スマホ表示 */
@media screen and (max-width: 768px) {
    .custom-info-box {
        display: block;
        padding: 20px;
    }
    .custom-info-image {
        width: 180px;
        margin: 20px auto 0;
    }

.custom-info-text h3 {
    font-size: 1.2rem;
}

}

/* 電話リンク部分の調整 */
.goods_detail_description_img01 a {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.goods_detail_description_img01 a:hover {
    opacity: 0.7; /* ホバー時に少し薄くする */
}

/* --- 経済的ブロック：特別タイトルデザイン --- */
.economy-title-wrap {
    text-align: center;
    position: relative;
    margin-bottom: 20px;
}

/* 上部の英字ラベル：アクセントカラー */
.economy-label {
    display: inline-block;
    background-color: #c90c28; /* 工程セクションの赤とリンク */
    color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
    padding: 2px 15px;
    border-radius: 20px;
    letter-spacing: 0.1em;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.economy-main-title {
    color: #3e2723;
    line-height: 1.4;
    margin: 0;
    font-size: 1.8rem;
}

/* 「実は経済的！」を少し小さくしてリズムを出す */
.economy-main-title small {
    color: #8d6e63;
    display: block;
    margin-bottom: 5px;
}

/* --- コンテンツエリアのブラッシュアップ --- */
.economy-graph {
    background: #fdfcfb; /* グラフの背景をわずかに色づけ */
    padding: 30px;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 30px;
}

/* スマホ表示 */
@media screen and (max-width: 767px) {
    .economy-main-title {
        font-size: 1.6rem !important; /* 共通Q数を維持 */
    }
    .economy-graph {
        padding: 15px;
    }
}

.wrapper .red_tit {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.4;
    padding: 0 0;
    border-bottom: none;
    color: #c90c28;
}

/* スマホ表示での調整 */
@media screen and (max-width: 767px) {
    
    /* --- 追加：red_tit のスマホ設定 --- */
    .wrapper .red_tit {
        font-size: 20px;     /* 28pxから20pxにサイズダウン */
        line-height: 1.5;    /* 1.4だと少し詰まって見えるので、わずかに広げて可読性アップ */
        margin-bottom: 15px; /* もし下に余白が必要な場合はここで調整 */
    }

  
}