.common-button__link--sake-101::before {
    left: 14rem;
}

/* Figmaと同じ見た目に：macOS既定のsubpixelアンチエイリアスだと本文が太く見えるため、
   グレースケール（Figma準拠）で描画する。※このCSSはsake-101配下ページのみ読込のためページ限定 */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* 字間をFigmaと同じに：fknsk3のグローバル `* { font-feature-settings:"palt" }` が
   和文の約物（「」、？等）を詰めて描画するため、sake-101配下では無効化して全角幅に戻す */
body * {
    font-feature-settings: normal;
}

/* ==========================================================
   共通レイアウト（sake-101配下ページ共通の区切り・幅）
   ========================================================== */

/* 横幅+左右ガターの共通コンテナ（830px） */
.sake-101__container {
    max-width: 890rem;
    margin: 0 auto;
    padding: 0 15rem;
}
@media screen and (min-width: 768px) {
    .sake-101__container {
        padding: 0 30px;
    }
}

/* メインビジュアル */
.sake-101__mv {
    padding-block: 20rem;
}
.sake-101__mv-inner {
    max-width: 1024rem;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .sake-101__mv {
        padding-block-start: 40px;
        padding-block-end: 20px;
    }
    .sake-101__mv-inner {
        max-width: 1024px;
    }
}

/* INDEXセクション（メインビジュアル直下、上paddingなし） */
.sake-101__index-section {
    padding-top: 0;
    padding-bottom: 20rem;
}
@media screen and (min-width: 768px) {
    .sake-101__index-section {
        padding-top: 20px;
        padding-bottom: 40px;
    }
}

/* 本文セクション（配下ページ共通の上下padding） */
.sake-101__section {
    padding-block: 60rem;
}
@media screen and (min-width: 768px) {
    .sake-101__section {
        padding-block: 80px;
    }
}

/* セクション内、記事ブロックの縦積みgap */
.sake-101__stack {
    display: flex;
    flex-direction: column;
    gap: 60rem;
}
@media screen and (min-width: 768px) {
    .sake-101__stack {
        gap: 80px;
    }
}

/* セクション背景色バリエーション（40px格子パターン） */
.sake-101__section--blue {
    background-color: #ebf2ff;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
    background-size: 40px 40px;
}
.sake-101__section--pink {
    background-color: #ffedeb;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 1px, transparent 1px);
    background-size: 40px 40px;
}

/* indexリスト */
.sake-101__index {
    border-radius: 10px;
    background: rgba(255, 239, 204, 0.50);
    padding: 25rem 40rem;
    display: flex;
    flex-direction: column;
    gap: 16rem;
    max-width: 490rem;
    margin: 0 auto;
}
.sake-101__index-title {
    color: var(--color-text-accent, #E83821);
    text-align: center;
    font-family: "Open Sans";
    font-size: 15rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.8px;
}
.sake-101__index-list {
    display: flex;
    flex-direction: column;
    gap: 14rem;
}
.sake-101__index-item {
    display: flex;
    gap: 8rem;
}
.sake-101__index-item::before {
    content: "";
    display: block;
    background-image: url(../img/sake-101/common/icon_arrow.png);
    background-repeat: no-repeat;
    background-size: contain;
    width: 20rem;
    height: 20rem;
    flex-shrink: 0;
}
.sake-101__index-link {
    display: block;
    color: var(--color-text-secondary, #001130);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: 0.84px;
}
.sake-101__index-link strong {
    font-size: inherit;   /* reset.css の strong{font-size:16rem} を打ち消す */
}
/* 文中の太字（600）：付与するだけで太字になる共通クラス。
   新規ページはこちらを使用（既存ページの b/strong 個別指定は後方互換のため残置） */
.sake-101__bold {
    font-size: inherit;   /* reset.css の b/strong{font-size:16rem} を打ち消し、親のfont-sizeを維持 */
    font-weight: 600;
}
@media screen and (min-width: 768px) {
    .sake-101__index {
        gap: 18px;
    }
    .sake-101__index-item:hover .sake-101__index-link {
        opacity: .5;
    }
    .sake-101__index-link {
        transition: .3s all;
    }
}

/* ==========================================================
   知ったら、次は選んでみる（8ページ共通CTA）
   ========================================================== */
.sake-101__cta {
    padding: 60rem 20rem;
}
/* 見出し（両脇のスラッシュ付き） */
.sake-101__cta-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rem;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 18rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 2.16px;
    text-align: center;
}
.sake-101__cta-slash {
    display: block;
    flex-shrink: 0;
    width: 2rem;
    height: 24rem;
    background: var(--color-text-primary, #000b20);
}
.sake-101__cta-slash--left {
    transform: rotate(-30deg);
}
.sake-101__cta-slash--right {
    transform: rotate(30deg);
}
/* カード一覧 */
.sake-101__cta-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40rem;
    padding-top: 40rem;
}
.sake-101__cta-item {
    width: 100%;
    padding: 0 24rem;
}
.sake-101__cta-link-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* 丸アイコン画像 */
.sake-101__cta-image {
    width: 160rem;
    height: 160rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.sake-101__cta-image-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* テキストブロック */
.sake-101__cta-text {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding-top: 24rem;
}
/* バッジ（選ぶ / 体験する / 買う） */
.sake-101__cta-badge {
    position: absolute;
    top: -20rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 8rem 12rem;
    border-radius: 8rem;
    background: var(--color-primary-600, #e83821);
    color: var(--color-text-inverse, #fff);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 700;
    line-height: 1.2;   /* Figma実測: SP/PC共に1.2（本文lh1.7/見出しlh1.6-1のいずれでもない） */
    letter-spacing: 0.84px;   /* Figma実測6%（12%ではない） */
    white-space: nowrap;
}
.sake-101__cta-badge::after {
    content: "";
    position: absolute;
    bottom: -6rem;
    left: 50%;
    transform: translateX(-50%);
    border-left: 4rem solid transparent;
    border-right: 4rem solid transparent;
    border-top: 6rem solid var(--color-primary-600, #e83821);
}
.sake-101__cta-name {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 16rem;
    font-weight: 700;
    line-height: 1.5;   /* Figma実測: SP/PC共に1.5 */
    letter-spacing: 0.96px;   /* Figma実測6%（12%ではない） */
    text-align: center;
}
.sake-101__cta-desc {
    padding-top: 8rem;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
/* テキストリンク（診断してみる → 等） */
.sake-101__cta-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12rem;
    padding-top: 12rem;
}
.sake-101__cta-action-text {
    padding: 14rem 0;
    border-bottom: 1px solid var(--color-secondary-600, #001d50);
    color: var(--color-button-secondary-text, #001d50);
    font-family: "Hiragino Sans";
    font-size: 15rem;
    font-weight: 600;
    line-height: 1;   /* Figma実測: SP/PC共にleading-none */
    letter-spacing: 0.6px;   /* Figma実測4%（12%ではない） */
}
.sake-101__cta-action-arrow {
    display: block;
    width: 32rem;
    height: 32rem;
    flex-shrink: 0;
}

@media screen and (min-width: 768px) {
    .sake-101__cta {
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 73px;
    }
    .sake-101__cta-title {
        gap: 12px;
        font-size: 22px;
        line-height: 1;
        letter-spacing: 2.64px;
    }
    .sake-101__cta-slash {
        width: 2px;
        height: 24px;
    }
    .sake-101__cta-list {
        flex-direction: row;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding-top: 40px;
    }
    .sake-101__cta-item {
        flex: 0 0 calc(100% / 3);
        min-width: 0;
        padding: 0 24px;
    }
    .sake-101__cta-name {
        font-size: 18px;
        letter-spacing: 1.08px;   /* Figma実測6%（12%ではない） */
    }
    .sake-101__cta-desc {
        font-size: 15px;
        letter-spacing: normal;
    }
    /* hover */
    .sake-101__cta-link-wrap {
        transition: .3s opacity;
    }
    .sake-101__cta-link-wrap:hover {
        opacity: .7;
    }
}

/* ==========================================================
   共通モジュール：ほかの「日本酒の味わい」も読む
   template-parts/sake-101/other-articles.php
   （インデックス以外の配下ページのフッターに表示）
   ========================================================== */
.sake-101__others {
    background: #faedd2;
    padding: 60rem 0;
}
.sake-101__others-title {
    padding: 0 15rem 20rem;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 18rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 2.16px;
    text-align: center;
}
/* カード横並び（SP・PCとも横スクロール可） */
.sake-101__others-list {
    display: flex;
    gap: 20rem;
    padding: 0 15rem;
    overflow-x: auto;
    scrollbar-width: none;              /* Firefox */
    -webkit-overflow-scrolling: touch;
}
.sake-101__others-list::-webkit-scrollbar {
    display: none;                      /* Safari/Chrome */
}
/* カード */
.sake-101__others-card {
    flex: 0 0 200rem;
    background: var(--color-neutral-100, #fff);
    border-radius: 10rem;
    overflow: hidden;
}
.sake-101__others-card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* サムネイル（正方形）＋カテゴリタグ */
.sake-101__others-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.sake-101__others-thumb-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sake-101__others-tag {
    position: absolute;
    left: 12rem;
    bottom: 8rem;
    display: inline-flex;
    align-items: center;
    gap: 2rem;
    padding: 8rem 16rem;
    border-radius: 100rem;
    background: #ffefcc;
    line-height: 1;
    white-space: nowrap;
}
.sake-101__others-tag-cat {
    color: var(--color-text-accent, #e83821);
    font-family: "Hiragino Sans";
    font-size: 12rem;
    font-weight: 700;
    letter-spacing: 0.72px;
}
.sake-101__others-tag-suffix {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 10rem;
    font-weight: 700;
    letter-spacing: 0.6px;
}
/* タイトル */
.sake-101__others-body {
    padding: 16rem;
}
.sake-101__others-card-title {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.84px;
}
/* 「日本酒101 一覧ページへ」ボタン */
.sake-101__others-more {
    display: flex;
    justify-content: center;
    padding: 40rem 15rem 0;
}
.sake-101__others-btn {
    display: inline-flex;
    align-items: center;
    gap: 4rem;
    padding: 13rem 30rem 13rem 14rem;
    border-radius: 100rem;
    background: var(--color-secondary-600, #001d50);
}
.sake-101__others-btn-arrow {
    flex-shrink: 0;
    width: 32rem;
    height: 32rem;
}
.sake-101__others-btn-arrow img {
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);   /* 矢印を左向きに */
}
.sake-101__others-btn-text {
    color: var(--color-text-inverse, #fff);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 600;
    line-height: 1;   /* Figma実測: leading-none */
    letter-spacing: 1.68px;
    text-align: center;
}

@media screen and (min-width: 768px) {
    .sake-101__others {
        padding: 80px 0;
    }
    .sake-101__others-title {
        padding-bottom: 40px;
        font-size: 22px;
        line-height: 1;
        letter-spacing: 2.64px;
    }
    .sake-101__others-list {
        padding: 0 80px;
        /* カードが収まる時は中央寄せ、はみ出す幅ではスクロール開始位置を維持 */
        justify-content: safe center;
    }
    .sake-101__others-more {
        padding-top: 40px;
    }
    /* hover */
    .sake-101__others-card-link,
    .sake-101__others-btn {
        transition: .3s opacity;
    }
    .sake-101__others-card-link:hover,
    .sake-101__others-btn:hover {
        opacity: .8;
    }
}

/* マーカー（ハイライト）：文字に追従して折り返す。やや下気味に配置し文字への被りを抑える */
.sake-101__marker {
    background: linear-gradient(transparent 40%, #fff7e5 61%, #fff7e5 98%, transparent 98%);
}
/* 白地セクション用（背景が白いため#fff7e5では視認性が低く、濃いめの色を使用） */
.sake-101__marker--onwhite {
    background: linear-gradient(transparent 40%, #ffd9b8 61%, #ffd9b8 98%, transparent 98%);
}

/* ==========================================================
   共通モジュール：H2見出し + 本文をまとめるラッパー
   （H2が単独で立ち、下に画像+本文の行が続く構成で使用）
   ========================================================== */
.sake-101__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40rem;
    width: 100%;
    scroll-margin-top: 70px;   /* アンカー遷移時にヘッダーへ潜らせない */
}
@media screen and (min-width: 768px) {
    .sake-101__group {
        gap: 60px;
    }
}
/* PCのみ値を変更する（SPはデフォルト40のまま）。デフォルトのPC60ではなくPC40にしたい場合 */
@media screen and (min-width: 768px) {
    .sake-101__group--pc-sm {
        gap: 40px;
    }
}

/* ==========================================================
   共通モジュール：小見出し（オレンジ線 + 太字テキスト）
   sake-101__lr-body内でH2の代わりに使う場合がある
   ========================================================== */
.sake-101__h3 {
    display: flex;
    align-items: flex-start;
    gap: 12rem;
    width: 100%;
}
.sake-101__h3-line {
    align-self: stretch;
    flex-shrink: 0;
    width: 8rem;
    border-radius: 10rem;
    background: #ea5514;
}
.sake-101__h3-text {
    flex: 1 0 0;
    min-width: 0;
    padding: 4rem 0;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 16rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 1.92px;
}
@media screen and (min-width: 768px) {
    .sake-101__h3-text {
        padding: 8px 0;
        font-size: 20px;
        line-height: 1;
        letter-spacing: 2.4px;
    }
}

/* ==========================================================
   共通モジュール：見出し（H2 / 「101」バッジ付き）
   背景は白（--white）と #FFF7E5（--cream）の2種
   ========================================================== */
.sake-101__h2 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10rem;
    width: fit-content;   /* 白箱は内容幅に収める */
    padding: 16rem;
    border-radius: 8rem;
    scroll-margin-top: 70px;   /* アンカー遷移時にヘッダーへ潜らせない */
}
.sake-101__h2--white {
    background: var(--color-neutral-100, #fff);
}
.sake-101__h2--cream {
    background: #FFF7E5;
}
.sake-101__h2-badge {
    position: absolute;
    left: -20rem;
    top: -16rem;
    width: 40rem;
    height: 40rem;
}
.sake-101__h2-text {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 18rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 2.16px;
    text-align: center;   /* Figma準拠：SPで2行に折り返す見出しも中央寄せ。PCは1行のため中央/左で見た目差なし */
}
/* H2内の色付き強調文字（背景マーカーではなく文字色のみ） */
.sake-101__h2-accent {
    color: var(--color-text-accent, #e83821);
    font-weight: inherit;   /* reset.css の span{font-weight:normal} を打ち消す */
    font-size: inherit;     /* reset.css の span{font-size:16rem} を打ち消す */
}

@media screen and (min-width: 768px) {
    .sake-101__h2-badge {
        left: -15px;
        top: -52px;
        width: 60px;
        height: 60px;
    }
    .sake-101__h2-text {
        font-size: 22px;
        line-height: 1;
        letter-spacing: 2.64px;
    }
}

/* sake-101__groupの本文内で、さらにブロックが並ぶ場合のブロック同士のgap */
.sake-101__group-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rem;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .sake-101__group-body {
        gap: 40px;
    }
}
/* デフォルト(20/40)ではなく60/80が必要な場合 */
.sake-101__group-body--md {
    gap: 60rem;
}
@media screen and (min-width: 768px) {
    .sake-101__group-body--md {
        gap: 80px;
    }
}

/* ==========================================================
   共通モジュール：画像＋本文（左右2カラム / SP縦積み）
   ========================================================== */
.sake-101__lr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rem;
    width: 100%;   /* align-items:centerの親（例: sake-101__group-body--md）配下でも
                      shrink-to-fitさせず、常にコンテナ幅いっぱいに広げる */
    scroll-margin-top: 70px;   /* アンカー遷移時にヘッダーへ潜らせない */
}
/* 画像 */
.sake-101__lr-figure {
    width: 100%;
    border-radius: 10rem;
    overflow: hidden;
}
.sake-101__lr-img {
    display: block;
    width: 100%;
    aspect-ratio: 320 / 240;
    object-fit: cover;
}
/* 本文側（見出し＋本文） */
.sake-101__lr-body {
    display: flex;
    flex-direction: column;
    align-items: center;   /* SP は中央寄せ（見出し） */
    gap: 16rem;
    width: 100%;
}
.sake-101__lr-text {
    display: flex;
    flex-direction: column;
    gap: 16rem;
    width: 100%;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 16rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.96px;
}
.sake-101__lr-text p {
    margin: 0;
    font-size: inherit;   /* reset.css の p{font-size:16rem} を打ち消す */
    font-weight: inherit;   /* reset.css の p{font-weight:normal} を打ち消し、本文ウェイト(300)を維持 */
}
.sake-101__lr-text b,
.sake-101__lr-text strong {
    font-size: inherit;   /* reset.css の b/strong{font-size:16rem} を打ち消す */
    font-weight: 600;
}

@media screen and (min-width: 768px) {
    .sake-101__lr {
        flex-direction: row;
        gap: 80px;
    }
    .sake-101__lr--reverse {
        flex-direction: row-reverse;
    }
    .sake-101__lr-figure {
        flex: 0 0 320px;   /* 画像は320px固定（sake-101__lr-imgのアスペクト比320/240と一致） */
        width: 320px;
        border-radius: 10px;
    }
    .sake-101__lr-body {
        flex: 1;
        min-width: 0;
        align-items: flex-start;   /* PC は左寄せ */
        gap: 20px;
    }
    .sake-101__lr-text {
        gap: 20px;
    }
}

/* ==========================================================
   共通モジュール：見出し＋数値評価テーブル（星5段階）
   ========================================================== */
.sake-101__rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rem;
    width: 100%;
    scroll-margin-top: 70px;   /* アンカー遷移時にヘッダーへ潜らせない */
}
.sake-101__rating-table {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--color-neutral-100, #fff);
    border: 1px solid var(--color-neutral-400, #c5c3c1);
}
.sake-101__rating-row {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    border-bottom: 1px solid var(--color-neutral-400, #c5c3c1);
}
.sake-101__rating-label {
    display: flex;
    grid-column: span 2 / span 2;
    align-items: center;
    justify-content: center;
    padding: 15rem 8rem;
    border-right: 1px solid var(--color-neutral-400, #c5c3c1);
}
.sake-101__rating-label-text {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 13rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1.3px;
    text-align: center;
}
.sake-101__rating-body {
    display: flex;
    flex-direction: column;
    grid-column: span 8 / span 8;
    gap: 8rem;
    padding: 15rem 0;
}
.sake-101__rating-stars {
    display: flex;
    align-items: center;
    justify-content: flex-start;   /* SPは左寄せ（descと左端を揃える・Figma準拠） */
    gap: 4rem;
    padding: 0 20rem;
}
.sake-101__rating-star {
    display: block;
    width: 14rem;
    height: 14rem;
    flex-shrink: 0;
}
.sake-101__rating-desc {
    display: flex;
    align-items: center;
    padding: 0 20rem;
}
.sake-101__rating-desc-text {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.84px;
}
.sake-101__rating-content {
    display: flex;
    flex-direction: column;
    gap: 10rem;
    width: 100%;
}
.sake-101__rating-note {
    width: 100%;
    color: var(--color-neutral-900, #231815);
    font-family: "Hiragino Sans";
    font-size: 12rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 0.72px;
}

@media screen and (min-width: 768px) {
    .sake-101__rating-label {
        padding: 15px 25px;
    }
    .sake-101__rating-label-text {
        font-size: 15px;
        line-height: 1.7;
        letter-spacing: 1.5px;
    }
    .sake-101__rating-body {
        flex-direction: row;
        gap: 0;
        padding: 0;
    }
    .sake-101__rating-stars {
        height: 56px;
        padding: 15px 25px;
    }
    .sake-101__rating-star {
        width: 14px;
        height: 14px;
    }
    .sake-101__rating-desc {
        flex: 1 0 0;
        min-width: 0;
        padding: 15px 20px;
    }
    .sake-101__rating-desc-text {
        font-size: 15px;
        letter-spacing: 0.9px;
    }
    .sake-101__rating-note {
        font-size: 12px;
        letter-spacing: 0.72px;
    }
}

/* ==========================================================
   日本酒の日においしいお酒を楽しもう！（配下ページ共通）
   ========================================================== */
/* 見出し＋本文ブロックと写真の縦積みgap */
.sake-day__enjoy-wrap {
    display: flex;
    flex-direction: column;
    gap: 40rem;
}
@media screen and (min-width: 768px) {
    .sake-day__enjoy-wrap {
        gap: 40px;
    }
}
/* 見出し＋本文ブロック */
.sake-day__enjoy-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rem;
    width: 100%;
}
/* 色付き見出し（101バッジ無し） */
.sake-day__enjoy-title {
    width: 100%;
    text-align: center;
    font-family: "Hiragino Sans";
    font-weight: 700;   /* Figma上はW6/600だが、body*のグレースケール描画補正により600だと薄く見えるため700で調整 */
    line-height: 1.5;
    letter-spacing: 2.88px;
}
/* 文字は span 内にあり、reset.css の span{font-weight:normal} で継承が打ち消されるため、
   span 自体にウェイトを明示する（Figma上はW6/600だが、上記と同じ理由で700に調整） */
.sake-day__enjoy-title-em {
    color: #ea5514;
    font-size: 24rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 2.88px;
}
.sake-day__enjoy-title-sub {
    color: var(--color-text-primary, #000b20);
    font-size: 18rem;
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 1.08px;
}
/* 改行制御：SPのみ改行（--sp）／PCのみ改行（--pc）。デザインの改行位置に合わせて使用 */
.sake-day__br--sp {
    display: inline;
}
.sake-day__br--pc {
    display: none;
}
.sake-day__enjoy-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20rem;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 16rem;
    font-weight: 600;
    line-height: 1.7;
    letter-spacing: 1.92px;
    text-align: center;
}
.sake-day__enjoy-text p {
    margin: 0;
    font-size: inherit;   /* reset.css の p{font-size:16rem} を打ち消す（PCでの18px指定を継承させる） */
    font-weight: 600;   /* reset.css の p{font-weight:normal} を打ち消す */
}
.sake-day__enjoy-text b,
.sake-day__enjoy-text strong {
    font-size: inherit;
    font-weight: 600;
}
/* 写真（招き猫・吹き出しは焼き込み済みの場合が多いが、別レイヤー装飾にも対応） */
.sake-day__enjoy-figure {
    position: relative;
    width: 100%;
    max-width: 660rem;
    align-self: center;
    border-radius: 10rem;
    overflow: hidden;
}
.sake-day__enjoy-img {
    display: block;
    width: 100%;
    aspect-ratio: 660 / 440;
    object-fit: cover;
}
/* 装飾レイヤー（猫＋吹き出しを別画像で重ねる場合） */
.sake-day__enjoy-deco {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sake-day__enjoy-cat {
    position: absolute;
    display: block;
    width: 26.8%;   /* 177 / 660 */
    height: auto;
    right: 2.4%;    /* (660-644) / 660 */
    top: 61%;       /* 269 / 440 （下端は overflow で自然にクリップ） */
}
.sake-day__enjoy-balloon {
    position: absolute;
    display: block;
    width: 28.7%;   /* 189.65 / 660 */
    height: auto;
    left: 67.2%;    /* 443.44 / 660 */
    top: 34.7%;     /* 152.73 / 440 */
}

@media screen and (min-width: 768px) {
    .sake-day__enjoy-title-em {
        font-size: 32px;
        line-height: 1;
        letter-spacing: 3.84px;
    }
    .sake-day__enjoy-title-sub {
        font-size: 24px;
        line-height: 1.7;
        letter-spacing: 1.44px;
    }
    .sake-day__enjoy-text {
        font-size: 18px;
        letter-spacing: 2.16px;
    }
    /* PCでは --sp を無効化し、--pc を有効化 */
    .sake-day__br--sp {
        display: none;
    }
    .sake-day__br--pc {
        display: inline;
    }
}