/* 「造られるの？」〜「TIPS」までをまとめた背景色ラッパー */
.brewing-methods__section-group {
    background: #fbf8f1;
}

/* セクション間の区切り線（リボン装飾、SP/PCとも同じ絶対サイズで中央配置） */
.brewing-methods__border {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
}
.brewing-methods__border-line {
    flex-shrink: 0;
    width: 100px;
    height: 3px;
    background: #f20000;
}
.brewing-methods__border-ribbon {
    display: block;
    flex-shrink: 0;
    width: 54px;
    height: 35.565px;
}

/* キーワード強調枠（白背景+ボーダー、左右に酒アイコン） */
.brewing-methods__callout {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    width: 100%;
    background: var(--color-neutral-100, #fff);
    border: 2px solid #d5c3a8;
    border-radius: 8rem;
    padding: 16rem 48rem;
}
.brewing-methods__callout-lead {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 16rem;
    font-weight: 600;
    line-height: 1.3;   /* SPはbr--spで2行になる場合があるため行間を確保（PCは1行のためleading-none） */
    letter-spacing: 0.96rem;
    text-align: center;
}
.brewing-methods__callout-title {
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 16rem;
    font-weight: 600;
    line-height: 1.3;   /* SPはbr--spで2行になる場合があるため行間を確保（PCは1行のためleading-none） */
    letter-spacing: 0.96rem;
    text-align: center;
}
.brewing-methods__callout-accent {
    color: #ea5514;
    font-size: 18rem;
    font-weight: inherit;   /* reset.cssのspan{font-weight:normal}を打ち消す */
    line-height: 1;   /* Figma実測: leading-none */
    letter-spacing: 1.08rem;
}
.brewing-methods__callout-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: 32rem;
    height: 32rem;
}
.brewing-methods__callout-icon--left {
    left: 8rem;
}
.brewing-methods__callout-icon--right {
    right: 8rem;
}
@media screen and (min-width: 768px) {
    .brewing-methods__callout {
        gap: 12rem;
        padding: 16rem;
    }
    .brewing-methods__callout-lead {
        font-size: 20rem;
        line-height: 1;   /* Figma実測: leading-none（1行ラベルのため本文lh1.7は適用しない） */
        letter-spacing: 1.2rem;
    }
    .brewing-methods__callout-title {
        font-size: 20rem;
        line-height: 1;   /* Figma実測: leading-none（1行ラベルのため本文lh1.7は適用しない） */
        letter-spacing: 1.2rem;
    }
    .brewing-methods__callout-accent {
        font-size: 24rem;
        letter-spacing: 1.44rem;
    }
    .brewing-methods__callout-icon {
        width: 48rem;
        height: 48rem;
    }
    .brewing-methods__callout-icon--left {
        left: 20rem;
    }
    .brewing-methods__callout-icon--right {
        right: 20rem;
    }
}

/* NOTE吹き出し：円バッジが本文ボックスの上端に重なる（SP/PC同一サイズ） */
.brewing-methods__note {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 488rem;
    margin: 0 auto;
}
.brewing-methods__note-badge {
    position: relative;
    z-index: 2;
    margin-bottom: -32px;
    display: block;
    width: 80px;
    height: 80px;
}
.brewing-methods__note-body {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 40rem 20rem 24rem;
    border-radius: 8rem;
    background-color: #fff;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
}
.brewing-methods__note-text {
    width: 100%;
    color: var(--color-text-primary, #000b20);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 300;
    line-height: 1.7;
    letter-spacing: 1.68rem;   /* Figma実測12%（他の本文は6%だが、NOTE吹き出し内は全5箇所ともSP/PC共通で12%を確認） */
}
.brewing-methods__note-text b,
.brewing-methods__note-text strong {
    font-size: inherit;   /* reset.css の b/strong{font-size:16rem} を打ち消す */
    font-weight: 600;
}

/* 本文とNOTE吹き出しの縦積みgap */
.brewing-methods__note-wrap {
    display: flex;
    flex-direction: column;
    gap: 16rem;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .brewing-methods__note-wrap {
        gap: 20rem;
    }
}

/* TIPSカード：ネイビータブが白背景枠の上端に重なる（SP/PC同一サイズ、文字のみ可変） */
.brewing-methods__tips-section {
    padding-block: 40rem;
    background-color: #fff;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 20px 20px;
}
.brewing-methods__tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 660rem;
    margin: 0 auto;
}
.brewing-methods__tips-tab {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: -30px;
    padding-block: 6px;
    border-top: 4px solid #d5c3a8;
    border-bottom: 4px solid #d5c3a8;
}
.brewing-methods__tips-tab-inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8px 24px;
    background: #002063;
}
.brewing-methods__tips-tab-text {
    color: var(--color-neutral-100, #fff);
    font-family: "Hiragino Sans";
    font-size: 14rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 4.48rem;
    text-align: center;
    white-space: nowrap;
}
.brewing-methods__tips-card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20rem;
    width: 100%;
    padding: 40rem 21rem 20rem;
    background: var(--color-neutral-100, #fff);
    border: 1px solid #002063;
    border-radius: 10rem;
}
.brewing-methods__tips-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12rem;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .brewing-methods__tips-tab-text {
        font-size: 16rem;
        letter-spacing: 5.12rem;
    }
    .brewing-methods__tips-card {
        padding: 40rem 48rem;
    }
}