@charset "UTF-8";
/* =========================================================
   舟納豆 2026年 お中元LP
   - PC  : 768px以上（最大幅 980px）
   - SP  : 767px以下
   - 元CSS : summergift2025_pc.css / summergift2025_sp.css
             yeargift2025_pc.css / yeargift2025_sp.css（#cp）
   - サイト共通CSSと干渉しないよう、全て #summergift2026 配下に限定
   - 設置先：Css/imports/page-special.css
   - 画像：Contents/ImagesPkg/common/special/summergift/（SP用は sp/）
========================================================= */

/* ************************
reset（LP内のみ）
************************ */
#summergift2026 *,
#summergift2026 *::before,
#summergift2026 *::after {
    box-sizing: border-box;
}

#summergift2026 :where(h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd) {
    margin: 0;
    padding: 0;
}

#summergift2026 :where(ul, ol) {
    list-style: none;
}

#summergift2026 :where(h1, h2, h3, h4, h5, h6) {
    font-weight: normal;
}

#summergift2026 img {
    display: block;
    max-width: 100%;
    height: auto;
}

#summergift2026 a {
    color: inherit;
    text-decoration: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#summergift2026 a:hover {
    opacity: 0.8;
}

/* 改行・表示の出し分け */
#summergift2026 .sp_br {
    display: none;
}

/* 768〜1050pxのときだけ改行する（縦書きの見出しが枠の高さに収まらない幅。指定はCSS末尾） */
#summergift2026 .tb_br {
    display: none;
}

/* ************************
common
************************ */
#summergift2026 {
    --navy: #0A153C;
    --gold: #CABB35;
    --sky: #90C8E5;
    --red: #C95252;
    --purple: #A08BC1;
    --cream: #FFF7AC;
    --font-mincho: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "Noto Serif JP", "MS P明朝", "MS PMincho", serif;
    font-family: var(--font-mincho);
}

#summergift2026 .inner {
    width: 93.8%;
    max-width: 1160px;
    height: auto;
    margin: auto;
}

#summergift2026 .lp_main {
    font-family: var(--font-mincho);
    font-weight: 500;
    font-size: 18px;
    width: 100%;
    max-width: 980px;
    margin: 2rem auto 60px; /* 上：パンくずとの間の余白（PC・SP共通） */
    background: url(../../Contents/ImagesPkg/common/special/summergift/main_bg.webp);
    background-repeat: repeat-y;
    background-size: 100%;
}

#summergift2026 .lp_main :is(div, p, h1, h2, h3, h4) {
    line-height: 1.2em;
    font-size: 18px;
    text-align: left;
}

#summergift2026 section {
    scroll-margin-top: 20px;
}

/* side button */
#summergift2026 ul.side_btn_wrap {
    position: fixed;
    top: 311px; /* 上部固定のメインヘッダー（高さ約291px）の下に20pxあけて置く */
    right: 0;
    width: 64px; /* 下端が約705px（311＋160＋14＋220）。画面の高さ約786pxのノートPCでも切れないように小さめにしている */
    z-index: 9; /* サイトのヘッダー（z-index: 10）より下にする */
}

#summergift2026 ul.side_btn_wrap li a {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.15); /* 白い背景の上でもボタンが分かるように */
}

#summergift2026 ul.side_btn_wrap li a p {
    font-family: var(--font-mincho);
    font-weight: 600;
    font-size: 20px;
    text-shadow: 1px 1px 0px #ccc;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    line-height: 1.2em;
}

#summergift2026 ul.side_btn_wrap li:nth-child(1) a {
    height: 160px;
    background-color: var(--sky);
    color: #fff;
}

#summergift2026 ul.side_btn_wrap li:nth-child(2) {
    margin-top: 14px;
}

#summergift2026 ul.side_btn_wrap li:nth-child(2) a {
    height: 220px;
    background-color: #fff;
    color: var(--sky);
}

/* 768〜1107px：本文（最大980px）とサイドボタン（64px）が重なる幅。
   本文の左右にボタン分の余白をとって重ならないようにする */
@media screen and (min-width: 768px) and (max-width: 1107px) {
    #summergift2026 .lp_main {
        max-width: min(980px, calc(100% - 64px * 2));
    }
}

/* section title */
#summergift2026 .section_title_wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 980 / 480;
}

#summergift2026 .section_title_wrap .section_title {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(../../Contents/ImagesPkg/common/special/summergift/pattern.webp) center center / cover;
    background-color: #90BCE5;
    width: 51.02%;
    height: 100%;
}

#summergift2026 .section_title_wrap .title_right {
    right: 0;
}

#summergift2026 .section_title_wrap .title_left {
    left: 0;
}

#summergift2026 .section_title_wrap .section_title .section_title_text {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
}

#summergift2026 .section_title_wrap .section_title .section_title_text h3 {
    font-size: clamp(34px, 4.9vw, 48px);
    color: #fff;
}

#summergift2026 .section_title_wrap .section_title .section_title_text p {
    font-size: clamp(18px, 2.45vw, 24px);
    color: #fff;
    text-align: end;
    margin-bottom: -20px;
}

#summergift2026 .section_title_wrap .section_title_image {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 61.22%;
    aspect-ratio: 3 / 2;
    z-index: 2;
    box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.1);
}

#summergift2026 .section_title_wrap .section_title_image picture,
#summergift2026 .section_title_wrap .section_title_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#summergift2026 .section_title_wrap .image_right {
    right: 0;
}

#summergift2026 .section_title_wrap .image_left {
    left: 0;
}

/* ************************
endtxt（販売終了時の告知）
************************ */
#summergift2026 .endtxt {
    color: #8a2c03;
    width: 80%;
    position: relative;
    margin: 15px auto 0;
    padding: 1.5em;
    border: solid 3px #8a2c03;
    border-radius: 8px;
}

#summergift2026 .endtxt p {
    font-size: 24px;
    line-height: 1.5em;
    color: #8a2c03;
}

#summergift2026 .endtxt hr {
    margin: 0.8em 0;
    border: none;
    border-top: 1px solid #8a2c03;
}

/* ************************
main_catch
************************ */
#summergift2026 .main_catch {
    background: url(../../Contents/ImagesPkg/common/special/summergift/top.webp) center center / cover;
    width: 100%;
    aspect-ratio: 980 / 500;
    position: relative;
}

#summergift2026 .main_catch .top_text {
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    color: var(--navy);
    position: absolute;
}

#summergift2026 .main_catch .top_text::after {
    display: block;
    position: absolute;
    content: "2026 舟納豆";
    z-index: 2;
    top: 22%;
    right: 26%;
    padding: clamp(8px, 1vw, 13px);
    background-color: var(--gold);
    color: #fff;
    font-size: clamp(18px, 1.45vw, 24px);
    font-weight: 600;
    transform: translate(50%, -50%);
}

#summergift2026 .main_catch .top_text h2 {
    font-size: clamp(40px, 6.16vw, 80px);
    font-weight: normal;
    letter-spacing: 0.04em;
}

#summergift2026 .main_catch .top_text h2 span {
    font-size: clamp(40px, 4.53vw, 64px);
}

#summergift2026 .main_catch .top_text p {
    font-size: clamp(16px, 2vw, 20px);
    letter-spacing: 0.08em;
    font-weight: 600;
    padding-top: 24px;
    margin-bottom: -20px;
}

/* ************************
section cp（大口・法人様向け）
************************ */
#summergift2026 #cp {
    padding: 64px 0;
    background-color: #fefdf9;
}

#summergift2026 #cp .cp_top h3 {
    font-size: 24px;
    line-height: 1.5em;
    text-align: center;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    border-bottom: 1px solid #d85648;
}

#summergift2026 #cp .cp_top h4 {
    font-size: 18px;
    line-height: 1.5em;
    text-align: center;
    padding-top: 4px;
}

/* PC：上段3つ・下段2つ */
#summergift2026 #cp .cp_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px 100px;
    max-width: 622px;
    margin: auto;
    padding-top: 40px;
}

#summergift2026 #cp .cp_list li {
    position: relative;
    width: 140px;
}

#summergift2026 #cp .cp_list li img {
    width: 140px;
    height: auto;
}

#summergift2026 #cp .cp_list li dl {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 220px;
    text-align: center;
    line-height: 1.5em;
}

#summergift2026 #cp .cp_list li dl dt {
    font-size: 24px;
    color: #c64036;
    font-weight: 700;
}

#summergift2026 #cp .cp_list li dl dd {
    font-size: 16px;
    padding-top: 16px;
    font-weight: 700;
}

#summergift2026 #cp .important_text {
    font-size: 16px;
    line-height: 1.5em;
    text-align: center;
    padding-top: 40px;
    font-weight: 700;
}

#summergift2026 #cp .important_text span {
    font-size: 24px;
    font-weight: 700;
    color: #c64036;
}

/* ************************
section btn_wrap
************************ */
#summergift2026 section#btn_wrap {
    background: url(../../Contents/ImagesPkg/common/special/summergift/btn_wrap_bg.webp) center center / cover;
}

#summergift2026 section#btn_wrap ul {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 60px 0;
}

#summergift2026 section#btn_wrap ul li {
    flex: 0 1 168px;
}

#summergift2026 section#btn_wrap ul li a {
    width: 100%;
    height: 100px;
    background: url(../../Contents/ImagesPkg/common/special/summergift/btn.webp) center center / cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

#summergift2026 section#btn_wrap ul li a p {
    font-size: clamp(15px, 2.04vw, 20px);
    color: #fff;
    text-align: center;
    padding-bottom: 8px;
    position: relative;
}

#summergift2026 section#btn_wrap ul li a p::after {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--gold);
    border-bottom: 0;
}

/* ************************
common product
  product_wrap      : 1商品1行（画像とテキストを横並び）
  product_wrap_flex : 1行に2商品
************************ */
#summergift2026 ul.product_wrap {
    padding: 80px 0;
}

#summergift2026 ul.product_wrap li.product {
    display: flex;
    align-items: center;
    gap: 0 60px;
}

#summergift2026 ul.product_wrap li.reverse {
    flex-direction: row-reverse;
}

#summergift2026 ul.product_wrap li.product:not(:first-child) {
    padding-top: 60px;
}

#summergift2026 ul.product_wrap li.product .product_image_wrap {
    flex: 0 1 400px;
    min-width: 0;
}

#summergift2026 ul.product_wrap li.product .product_text_wrap {
    flex: 0 1 380px;
    min-width: 0;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .new {
    width: 88px;
    height: auto;
    padding-bottom: 10px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title h4 {
    font-size: clamp(48px, 6.53vw, 64px);
    font-weight: normal;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title h4.long {
    font-size: clamp(32px, 4.29vw, 42px);
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title h4 span {
    font-size: 24px;
    font-weight: normal;
    letter-spacing: -0.04em;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title p {
    font-weight: 600;
    font-size: clamp(18px, 2.45vw, 24px);
}

/* 説明文が1行に収まるよう字間を詰める（なつあざみ） */
#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title p.ls_catch {
    letter-spacing: -0.04em;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_image {
    padding-top: 10px;
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .3));
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_image img {
    width: 100%;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap {
    display: flex;
    align-items: center;
    gap: 0 8px;
    padding-top: 10px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap .limited_icon {
    width: 85px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap .furoshiki_icon {
    width: 84px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap .noshi_icon {
    width: 64px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap .gift_icon {
    width: 84px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text {
    padding: 20px 0;
    background-color: #fff;
    color: var(--navy);
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.1);
}

/* 「商品内容」と左右の金の線。線は最大80pxで、枠が狭いときは線だけ短くなる（枠からはみ出さない）
   以前は線を文字の外側に80px固定で置いていたため、タブレット幅で枠からはみ出していた（2026-10-17） */
#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 1em;
    font-size: 24px;
    white-space: nowrap; /* 線に押されて「商品内容」が折り返さないようにする */
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text p::before,
#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text p::after {
    content: "";
    flex: 0 1 80px;
    min-width: 0;
    height: 2px;
    background-color: var(--gold);
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul {
    padding-top: 20px;
    width: fit-content;
    /* 枠が狭いとき（768〜1000px前後）に、行頭の「・」（枠の外側に付く）が枠の左からはみ出さないよう、左右に余白を残す
       サイト共通CSSの字間（reset.css 0.05em）と word-break: break-all（base.css）で、リストが枠いっぱいまで広がるため */
    max-width: calc(100% - 3em);
    margin: auto;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul li {
    list-style: disc;
    width: fit-content;
    font-size: 18px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul li:not(:first-child) {
    padding-top: 10px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul li.spacer {
    list-style: none;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .price_wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .price_wrap .price_right {
    color: var(--red);
    font-size: clamp(76px, 10.2vw, 100px);
    transform: translateY(10px);
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .price_wrap .price_right span {
    color: var(--red);
    font-size: 0.64em;
    position: relative;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .price_wrap .price_right span::after {
    color: var(--red);
    position: absolute;
    content: "(税込)";
    width: auto;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: 1;
    font-size: 18px;
    /* 「円」の文字の上端のすぐ上に置く（下の「円」と重ならないように） */
    top: auto;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_btn {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--navy);
    width: 100%;
    height: 72px;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_btn p {
    font-size: 24px;
    font-weight: 900;
    color: #fff;
    padding-right: 10px;
    position: relative;
}

#summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_btn p::after {
    position: absolute;
    content: "";
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid var(--gold);
    border-right: 0;
}

/* 2商品横並び */
#summergift2026 .inner ul.product_wrap_flex {
    padding: 60px 0 80px;
    margin: -80px auto 0;
    width: 100%;
    max-width: 860px;
    display: flex;
    justify-content: space-between;
    gap: 0 40px;
}

#summergift2026 .inner ul.product_wrap_flex .product {
    flex: 0 1 400px;
    min-width: 0;
}

#summergift2026 .inner ul.product_wrap_flex .product .product_text {
    margin-top: 10px;
}

#summergift2026 .product_image_box {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

#summergift2026 .product_image_box .product_image {
    width: var(--w-pc, 100%);
    max-width: 100%;
}

/* 2商品横並びの画像幅（--w-pc：PC用 / --w-sp：SP用） */
#summergift2026 .product_image.img_furusato10 {
    --w-pc: 306px;
    --w-sp: 260px;
}
#summergift2026 .product_image.img_furusato5 {
    --w-pc: 300px;
    --w-sp: 260px;
}
#summergift2026 .product_image.img_funanatto10 {
    --w-pc: 292px;
    --w-sp: 260px;
}
#summergift2026 .product_image.img_funanatto5 {
    --w-pc: 290px;
    --w-sp: 260px;
}
#summergift2026 .product_image.img_tsuyukusa { --w-pc: 380px; --w-sp: 240px; }
#summergift2026 .product_image.img_hinageshi { --w-pc: 400px; --w-sp: 240px; }

/* 人気No.1 などのアイコン */
#summergift2026 .product_title .rank_icon {
    padding-bottom: 6px;
}

/* ************************
section specialprice
************************ */
#summergift2026 section#specialprice .specialprice_title {
    padding: 20px 0;
    background-image: url(../../Contents/ImagesPkg/common/special/summergift/pattern02.webp);
    background-size: 100%;
    background-color: var(--purple);
}

#summergift2026 section#specialprice .specialprice_title .specialprice_accent {
    width: 196px;
    margin: auto;
}

#summergift2026 section#specialprice .specialprice_title h3 {
    font-size: 64px;
    color: #fff;
    text-align: center;
    margin-top: -20px;
    font-weight: normal;
}

#summergift2026 section#specialprice .specialprice_title h3 span {
    color: var(--cream);
}

#summergift2026 section#specialprice .specialprice_title h3 span span {
    font-size: 120px;
}

#summergift2026 section#specialprice .specialprice_title .specialprice_text {
    background-color: var(--cream);
    padding: 20px 10px;
    text-align: center;
    margin-top: 10px;
}

#summergift2026 section#specialprice .specialprice_title .specialprice_text .top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#summergift2026 section#specialprice .specialprice_title .specialprice_text .top .text {
    font-size: 20px;
    color: var(--cream);
    background-color: var(--purple);
    padding: 4px 10px;
    font-weight: 600;
}

#summergift2026 section#specialprice .specialprice_title .specialprice_text .top .specialprice_date {
    font-size: 24px;
    color: var(--purple);
    font-weight: 600;
}

#summergift2026 section#specialprice .specialprice_title .specialprice_text .top .specialprice_date span {
    font-size: 48px;
}

#summergift2026 section#specialprice .specialprice_title .specialprice_text p {
    font-size: 16px;
    text-align: center;
    padding-top: 10px;
}

#summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .special_price {
    width: 221px;
    padding-top: 10px;
    margin-left: auto;
    margin-bottom: -40px;
}

#summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .price_wrap02 {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .price_wrap02 .price_left {
    font-size: 16px;
    text-align: center;
}

#summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .price_wrap02 .price_right {
    font-size: 48px;
    margin-left: 10px;
}

#summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .price_wrap02 .price_right span {
    font-size: 24px;
    position: relative;
}

#summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .price_wrap02 .price_right span::after {
    font-size: 10px;
    width: auto;
    white-space: nowrap;
    letter-spacing: 0;
    line-height: 1;
    position: absolute;
    content: "(税込)";
    top: -140%;
    left: 50%;
    transform: translateX(-50%);
}

/* ************************
section furusato / funanatto / teiban
************************ */
#summergift2026 section#furusato .section_title_wrap .section_title {
    background-color: #CE8089;
}

#summergift2026 section#funanatto .section_title_wrap .section_title {
    background-color: #C1956C;
}

#summergift2026 section#teiban .section_title_wrap .section_title {
    background-color: #77A759;
}

#summergift2026 :is(#furusato, #funanatto, #teiban) .section_title_text {
    margin-top: -10px;
}

/* お中元：舟納豆詰合せの見出しを小さくする指定は、2026-10-20に名前を「舟納豆詰合せ」に短くしたため削除（ほかの見出しと同じ大きさ） */

#summergift2026 :is(#furusato, #funanatto) :is(.product_wrap, .product_wrap_flex) .product .product_title h4 {
    font-size: clamp(38px, 4.9vw, 48px);
    font-weight: normal;
}

#summergift2026 :is(#furusato, #funanatto) :is(.product_wrap, .product_wrap_flex) .product .product_title h4 span {
    font-size: clamp(48px, 6.53vw, 64px);
    letter-spacing: 0;
}

/* ************************
section qa（ギフト商品に関するQ&A）
************************ */
#summergift2026 section#qa {
    padding-bottom: 80px;
}

#summergift2026 section#qa .qa_title {
    padding: 40px 0 44px;
    background: url(../../Contents/ImagesPkg/common/special/summergift/pattern.webp) center center / cover;
    background-color: var(--sky);
}

#summergift2026 section#qa .qa_title .qa_label {
    width: fit-content;
    margin: 0 auto;
    padding: 6px 18px;
    background-color: var(--gold);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.1em;
}

#summergift2026 section#qa .qa_title h3 {
    margin-top: 16px;
    font-size: clamp(36px, 4.9vw, 48px);
    font-weight: normal;
    color: #fff;
    text-align: center;
    letter-spacing: 0.04em;
}

#summergift2026 section#qa .qa_title .qa_lead {
    padding-top: 14px;
    font-size: 20px;
    color: #fff;
    text-align: center;
    position: relative;
}

#summergift2026 section#qa .qa_title .qa_lead::after {
    display: block;
    content: "";
    width: 0;
    height: 0;
    margin: 14px auto 0;
    border-style: solid;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 8px solid var(--gold);
    border-bottom: 0;
}

#summergift2026 section#qa .qa_list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 860px;
    margin: 60px auto 0;
}

#summergift2026 section#qa .qa_item {
    background-color: #fff;
    color: var(--navy);
    box-shadow: 4px 4px 8px 4px rgba(0, 0, 0, 0.1);
}

#summergift2026 section#qa .qa_q {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}

#summergift2026 section#qa .qa_q::-webkit-details-marker {
    display: none;
}

#summergift2026 section#qa .qa_q:hover {
    background-color: #f3f9fc;
}

#summergift2026 section#qa .qa_q:focus-visible {
    outline: 2px solid var(--sky);
    outline-offset: 2px;
}

#summergift2026 section#qa .qa_mark {
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--navy);
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

#summergift2026 section#qa .qa_q_text {
    flex: 1;
}

/* ＋／－ アイコン */
#summergift2026 section#qa .qa_toggle {
    flex-shrink: 0;
    position: relative;
    width: 20px;
    height: 20px;
}

#summergift2026 section#qa .qa_toggle::before,
#summergift2026 section#qa .qa_toggle::after {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--gold);
    transform: translate(-50%, -50%);
    -webkit-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
}

#summergift2026 section#qa .qa_toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

#summergift2026 section#qa .qa_item[open] .qa_toggle::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

#summergift2026 section#qa .qa_a {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 0 24px;
    padding: 20px 0 24px;
    border-top: 1px dashed var(--gold);
}

#summergift2026 section#qa .qa_item[open] .qa_a {
    animation: qa_open 0.3s ease;
}

#summergift2026 section#qa .qa_a .qa_mark {
    background-color: var(--red);
}

#summergift2026 section#qa .qa_a_text {
    flex: 1;
    padding-top: 8px;
    font-size: 18px;
    line-height: 1.8;
}

#summergift2026 section#qa .qa_a_text .gift_text {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    color: var(--red);
}

#summergift2026 section#qa .qa_a_text .qa_tel {
    color: var(--red);
}

@keyframes qa_open {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   SP（767px以下）
========================================================= */
@media screen and (max-width: 767px) {

    #summergift2026 .sp_br {
        display: inline;
    }

    #summergift2026 .pc_br,
    #summergift2026 .pc_only {
        display: none;
    }

    /* 下部固定ボタン分の余白 */
    #summergift2026 {
        padding-bottom: calc(74px + min(env(safe-area-inset-bottom), 30px));
    }

    #summergift2026 .inner {
        width: 92%;
        max-width: none;
    }

    /* side button → 下部固定バー（サイト共通の下部ナビの上に表示） */
    #summergift2026 {
        /* サイト共通の下部ナビ（#sp-bottom-nav）の高さ＝5.8rem＋iPhoneのホームバー分の余白（css/top.cssと同じ計算） */
        --sp-nav-h: calc(5.8rem + min(env(safe-area-inset-bottom), 30px));
    }

    #summergift2026 ul.side_btn_wrap {
        top: auto;
        bottom: var(--sp-nav-h);
        width: 100%;
        display: flex;
        justify-content: space-between;
        gap: 4%;
        padding: 10px 4%;
        background-color: var(--sky);
    }

    #summergift2026 ul.side_btn_wrap li {
        flex: 1;
    }

    #summergift2026 ul.side_btn_wrap li:nth-child(2) {
        margin-top: 0;
    }

    #summergift2026 ul.side_btn_wrap li:nth-child(1) a,
    #summergift2026 ul.side_btn_wrap li:nth-child(2) a {
        height: 54px;
        border-radius: 6px;
        box-shadow: none; /* SPの下部バーでは影をつけない（PC用の影を打ち消す） */
    }

    #summergift2026 ul.side_btn_wrap li:nth-child(1) a {
        border: 2px solid #fff;
    }

    #summergift2026 ul.side_btn_wrap li a p {
        font-size: 16px;
        text-shadow: none;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        transform: translateY(-4px);
        position: relative;
    }

    #summergift2026 ul.side_btn_wrap li a p::after {
        position: absolute;
        bottom: -4px;
        left: 50%;
        transform: translate(-50%, 100%);
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-right: 8px solid transparent;
        border-left: 8px solid transparent;
        border-bottom: 0;
    }

    #summergift2026 ul.side_btn_wrap li:nth-child(1) a p::after {
        border-top: 8px solid #fff;
    }

    #summergift2026 ul.side_btn_wrap li:nth-child(2) a p::after {
        border-top: 8px solid var(--sky);
    }

    /* section title */
    #summergift2026 .section_title_wrap {
        aspect-ratio: 375 / 280;
    }

    #summergift2026 .section_title_wrap .section_title {
        width: 48%;
        background: url(../../Contents/ImagesPkg/common/special/summergift/sp/pattern.webp) center center / cover;
        background-color: #90BCE5;
    }

    #summergift2026 .section_title_wrap .section_title .section_title_text h3 {
        font-size: clamp(22px, 7.47vw, 44px);
    }

    #summergift2026 .section_title_wrap .section_title .section_title_text p {
        font-size: clamp(14px, 4.27vw, 24px);
    }

    #summergift2026 .section_title_wrap .section_title_image {
        width: 64%;
        aspect-ratio: 1 / 1;
    }

    /* お中元：舟納豆詰合せの縦長の枠（375 / 334）と見出しの下揃えは、2026-10-20に名前を短くしたため削除 */

    #summergift2026 section#teiban .section_title_text {
        margin-top: -5px;
    }

    #summergift2026 section#teiban .section_title_wrap .section_title .section_title_text p {
        margin-bottom: -10px;
    }

    /* endtxt */
    #summergift2026 .endtxt p {
        font-size: 16px;
    }

    /* main_catch */
    #summergift2026 .main_catch {
        background-image: url(../../Contents/ImagesPkg/common/special/summergift/sp/top.webp);
        aspect-ratio: 375 / 277;
    }

    #summergift2026 .main_catch .top_text {
        right: 26%;
        top: 46%;
        transform: translate(50%, -50%);
    }

    #summergift2026 .main_catch .top_text::after {
        top: 25%;
        right: 30%;
        padding: clamp(4px, 1.25vw, 10px);
        font-size: clamp(12px, 3.2vw, 20px);
        transform: translate(50%, -50%);
    }

    #summergift2026 .main_catch .top_text h2 {
        font-size: clamp(40px, 10.67vw, 72px);
    }

    #summergift2026 .main_catch .top_text h2 span {
        font-size: clamp(32px, 8.53vw, 58px);
    }

    #summergift2026 .main_catch .top_text p {
        font-size: clamp(12px, 3.2vw, 20px);
        padding-top: 10px;
    }

    /* cp */
    #summergift2026 #cp {
        padding: 32px 0;
    }

    #summergift2026 #cp .cp_top h3 {
        font-size: 15px;
    }

    #summergift2026 #cp .cp_top h4 {
        font-size: 14px;
    }

    /* SP：2列 × 2段 ＋ 1つ */
    #summergift2026 #cp .cp_list {
        justify-content: space-around;
        gap: 0;
        max-width: 420px;
        padding-top: 20px;
    }

    #summergift2026 #cp .cp_list li {
        width: 45%;
        padding: 5%;
    }

    #summergift2026 #cp .cp_list li img {
        width: 100%;
    }

    /* 丸画像（li内側）より少しはみ出し、li同士の隙間には収まる幅 */
    #summergift2026 #cp .cp_list li dl {
        width: 108%;
    }

    #summergift2026 #cp .cp_list li dl dt {
        font-size: 20px;
    }

    #summergift2026 #cp .cp_list li dl dd {
        font-size: 14px;
        font-weight: 500;
        padding-top: 8px;
    }

    #summergift2026 #cp .important_text {
        font-size: 14px;
        line-height: 1.8em;
        font-weight: 500;
    }

    #summergift2026 #cp .important_text span {
        font-size: 18px;
    }

    /* btn_wrap */
    #summergift2026 section#btn_wrap ul {
        flex-wrap: wrap;
        justify-content: center;
        padding: 15px 0;
    }

    #summergift2026 section#btn_wrap ul li {
        flex: 0 1 calc(50% - 5px);
        max-width: 240px;
    }

    #summergift2026 section#btn_wrap ul li a {
        height: 80px;
    }

    #summergift2026 section#btn_wrap ul li a p {
        font-size: 18px;
        font-weight: 600;
    }

    /* product：縦積み（タイトル → 画像＋アイコン → 商品内容） */
    #summergift2026 ul.product_wrap {
        padding: 60px 0;
    }

    #summergift2026 .inner ul.product_wrap_flex {
        display: block;
        max-width: none;
        margin: 0;
        padding: 0 0 60px;
    }

    #summergift2026 ul.product_wrap li.product,
    #summergift2026 .inner ul.product_wrap_flex .product {
        display: block;
        max-width: 480px;
        margin: 0 auto;
    }

    #summergift2026 .inner ul.product_wrap_flex .product:not(:first-child) {
        padding-top: 60px;
    }

    #summergift2026 ul.product_wrap li.product .product_image_wrap,
    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_image_wrap {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: start;
        gap: 10px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title {
        grid-column: 1 / -1;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title h4,
    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title h4.long {
        font-size: 34px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_title p {
        font-size: 20px;
    }

    #summergift2026 :is(#furusato, #funanatto) :is(.product_wrap, .product_wrap_flex) .product .product_title h4 {
        font-size: 28px;
    }

    #summergift2026 :is(#furusato, #funanatto) :is(.product_wrap, .product_wrap_flex) .product .product_title h4 span {
        font-size: 32px;
    }

    #summergift2026 .product_title .rank_icon img {
        width: 20%;
        min-width: 64px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_image_link {
        justify-self: start;
        min-width: 0;
        max-width: 100%;
    }

    /* ふるさと・舟納豆シリーズは画像をアイコン側（右）に寄せる */
    #summergift2026 :is(#furusato, #funanatto) :is(.product_wrap, .product_wrap_flex) .product .product_image_link {
        justify-self: end;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_image {
        max-width: 100%;
        padding-top: 0;
    }

    #summergift2026 .product_image_box {
        height: auto;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_image_box .product_image {
        width: var(--w-sp);
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap {
        flex-direction: column;
        gap: 8px;
        padding-top: 0;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap .furoshiki_icon {
        width: 80px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap .noshi_icon {
        width: 60px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product ul.icon_wrap .gift_icon {
        width: 78px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text_wrap {
        width: 100%;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text {
        margin-top: 10px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text p {
        font-size: 18px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 330px;
        max-width: 100%;
        margin: auto;
        padding: 16px 0 0;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul li {
        list-style: none;
        width: auto;
        font-size: 16px;
        padding-left: 1em;
        text-indent: -1em;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul li:not(:first-child) {
        padding-top: 0;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul li::before {
        content: "・";
    }

    /* 長い品名を2列のまま1行に収めるための字間調整（以前のLPと同じ値） */
    #summergift2026 .product_text .ls_s {
        letter-spacing: -0.16em;
    }

    #summergift2026 .product_text .ls_l {
        letter-spacing: -0.2em;
    }

    /* SPのみ並び順を後ろへ（以前のSP版と同じ並び） */
    #summergift2026 .product_text li.sp_last {
        order: 1;
    }

    #summergift2026 #funanatto :is(.product_wrap, .product_wrap_flex) .product .product_text ul {
        grid-template-columns: 1fr;
    }

    #summergift2026 #funanatto :is(.product_wrap, .product_wrap_flex) .product .product_text ul li {
        text-align: center;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .price_wrap {
        padding-top: 10px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .price_wrap .price_right {
        font-size: 88px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .price_wrap .price_right span {
        font-size: 48px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .price_wrap .price_right span::after {
        font-size: 16px;
        /* SPは「円」の上端を基準に置き、「円」に少し被っていたので以前（-60%）より少し上げる */
        top: 0;
        bottom: auto;
        transform: translate(-50%, -85%);
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_btn {
        height: 58px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_btn p {
        font-size: 18px;
    }

    /* specialprice */
    #summergift2026 section#specialprice .specialprice_title {
        background-image: url(../../Contents/ImagesPkg/common/special/summergift/sp/pattern02.webp);
    }

    #summergift2026 section#specialprice .specialprice_title .specialprice_accent {
        width: 162px;
    }

    #summergift2026 section#specialprice .specialprice_title h3 {
        font-size: 40px;
    }

    #summergift2026 section#specialprice .specialprice_title h3 span span {
        font-size: 80px;
    }

    #summergift2026 section#specialprice .specialprice_title .specialprice_text {
        padding: 10px;
    }

    #summergift2026 section#specialprice .specialprice_title .specialprice_text .top {
        display: block;
    }

    #summergift2026 section#specialprice .specialprice_title .specialprice_text .top .text {
        width: fit-content;
        margin: auto;
        font-size: 18px;
    }

    #summergift2026 section#specialprice .specialprice_title .specialprice_text .top .specialprice_date {
        font-size: 20px;
        padding-top: 10px;
        text-align: center;
    }

    #summergift2026 section#specialprice .specialprice_title .specialprice_text .top .specialprice_date span {
        font-size: 40px;
    }

    #summergift2026 section#specialprice .specialprice_title .specialprice_text p {
        font-size: 14px;
    }

    #summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .special_price {
        width: 200px;
    }

    #summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .price_wrap02 .price_left {
        font-size: 14px;
        margin-left: 8px;
    }

    #summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .price_wrap02 .price_right {
        font-size: 40px;
        margin-left: 0;
    }

    #summergift2026 section#specialprice :is(.product_wrap, .product_wrap_flex) .product .price_wrap02 .price_right span::after {
        top: -30px;
    }

    /* qa */
    #summergift2026 section#qa {
        padding-bottom: 40px;
    }

    #summergift2026 section#qa .qa_title {
        padding: 28px 0 30px;
        background-image: url(../../Contents/ImagesPkg/common/special/summergift/sp/pattern.webp);
    }

    #summergift2026 section#qa .qa_title .qa_label {
        font-size: 16px;
        padding: 4px 14px;
    }

    #summergift2026 section#qa .qa_title h3 {
        margin-top: 12px;
        font-size: clamp(24px, 7.47vw, 36px);
    }

    #summergift2026 section#qa .qa_title .qa_lead {
        padding-top: 10px;
        font-size: 14px;
    }

    #summergift2026 section#qa .qa_list {
        gap: 12px;
        margin-top: 32px;
    }

    #summergift2026 section#qa .qa_q {
        gap: 12px;
        padding: 16px 14px;
        font-size: 16px;
    }

    #summergift2026 section#qa .qa_mark {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    #summergift2026 section#qa .qa_toggle {
        width: 16px;
        height: 16px;
    }

    #summergift2026 section#qa .qa_a {
        gap: 12px;
        margin: 0 14px;
        padding: 16px 0 18px;
    }

    #summergift2026 section#qa .qa_a_text {
        padding-top: 5px;
        font-size: 15px;
    }

    #summergift2026 section#qa .qa_a_text .gift_text {
        font-size: 13px;
    }
}

/* ************************
tablet（500〜767px）
SP用の配置のままだと画像とアイコンが左右に離れるため、まとめて中央に寄せる
************************ */
@media screen and (min-width: 500px) and (max-width: 767px) {
    #summergift2026 ul.product_wrap li.product .product_image_wrap,
    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_image_wrap {
        grid-template-columns: auto auto;
        justify-content: center;
        column-gap: 24px;
    }
}

/* ************************
お歳暮（.gift_winter）の配色
お中元（.gift_summer）は上の指定のまま。お歳暮では水色・紫・紺を暖色に置き換える
（参考：2025年お歳暮LPの #d85648 / #e29a4b / #c64036）
************************ */
#summergift2026.gift_winter {
    --sky: #D9774A;    /* メインカラー（お中元の水色の代わり）：柿色 */
    --purple: #B8463A; /* 5％還元特別価格の背景：朱赤 */
    --navy: #4A2A1E;   /* 見出しの文字・ボタン：焦げ茶 */
    --cream: #FFF3D6;
}

/* セクション見出し・Q&A見出しの地色（お中元では #90BCE5 を直接指定） */
#summergift2026.gift_winter .section_title_wrap .section_title,
#summergift2026.gift_winter section#qa .qa_title {
    background-color: var(--sky);
}

/* 商品一覧ボタン：紺色の布地の画像をやめて焦げ茶の単色にする */
#summergift2026.gift_winter section#btn_wrap ul li a {
    background: var(--navy);
}

#summergift2026.gift_winter section#qa .qa_q:hover {
    background-color: #FDF3EC;
}

/* お歳暮のメインビジュアル（PC）。画像はお中元と分けて yeargift/ に置く */
#summergift2026.gift_winter .main_catch {
    background-image: url(../../Contents/ImagesPkg/common/special/yeargift/top_pc.webp);
}

@media screen and (max-width: 767px) {
    /* お歳暮のメインビジュアル（SP）。画像が750×550pxなので縦横比を合わせる */
    #summergift2026.gift_winter .main_catch {
        background-image: url(../../Contents/ImagesPkg/common/special/yeargift/top_sp.webp);
        aspect-ratio: 375 / 275;
    }
}

/* お歳暮：商品一覧ボタン（8個）をPCでは4個×2段に並べる。SPは共通指定の2列のまま */
@media screen and (min-width: 768px) {
    #summergift2026.gift_winter section#btn_wrap ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    #summergift2026.gift_winter section#btn_wrap ul li {
        flex: 0 1 calc((100% - 30px) / 4);
    }
}

/* お歳暮で追加したセクションの見出しの地色 */
#summergift2026.gift_winter section#koufuku .section_title_wrap .section_title {
    background-color: #5A3A2E; /* 香ふく納豆：カタログの墨色に合わせた濃い茶 */
}

#summergift2026.gift_winter section#kome .section_title_wrap .section_title {
    background-color: #B08A4E; /* 米：稲穂の金茶 */
}

#summergift2026.gift_winter section#iwaifune .section_title_wrap .section_title {
    background-color: #b93844; /* 祝舟：赤（2026-10-16 ユーザー指定。以前はカタログの紫 #8E4A7A） */
}

#summergift2026.gift_winter :is(#koufuku, #kome, #iwaifune) .section_title_text {
    margin-top: -10px;
}

/* セクション末尾の注意書き（風呂敷包みの先着受付・祝舟の注文期間など） */
#summergift2026.gift_winter .series_note {
    padding-bottom: 60px;
    color: #B8463A;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6em;
    text-align: center;
}

/* 注意書きの中の「※」の行：一回り小さくし、改行したときに2行目以降が※の下に入らないようにする（ぶら下げインデント）
   PCは注意書きが中央揃えなので inline-block にして、ブロックごと中央に置き、中は左揃えにする */
#summergift2026.gift_winter .series_note .note_kome {
    display: inline-block;
    margin-left: 1em;
    text-indent: -1em;
    font-size: 16px;
    text-align: left;
}

@media screen and (max-width: 767px) {
    #summergift2026.gift_winter .series_note {
        padding-bottom: 40px;
        font-size: 16px;
        text-align: left;
    }

    #summergift2026.gift_winter .series_note .note_kome {
        font-size: 14px; /* SPは14pxでよい（ユーザー了承・2026-10-17） */
    }

    /* SPの商品内容（2列）で、長い品目だけ2列分の幅を使って1行に収める（米セット） */
    #summergift2026.gift_winter .product_text li.sp_wide {
        grid-column: 1 / -1;
    }
}

/* お歳暮：ご自宅用詰合せ（id は #eco。2026-10-17に「エコパッケージシリーズ」から名前を変更）の見出しの地色（カタログの緑）
   名前が短くなったので、以前の「長い見出しを小さくする」指定は削除し、ほかの見出しと同じ大きさにした */
#summergift2026.gift_winter section#eco .section_title_wrap .section_title {
    background-color: #6E9A3E;
}

#summergift2026.gift_winter section#eco .section_title_text {
    margin-top: -10px;
}

/* お歳暮：ななかいの米の紹介（2025年お歳暮LPのコラージュを移植）
   元のPC版（幅980px）の配置を％に置き換え、PC・SPとも同じ配置のまま画面幅に合わせて縮める
   left・width は幅980px、top は高さ915px に対する割合（元の値 ÷ 980 または 915） */
#summergift2026.gift_winter .kome_collage {
    position: relative;
    width: 100%;
    aspect-ratio: 980 / 915;
    margin-top: 60px;
}

#summergift2026.gift_winter .kome_collage > div {
    position: absolute;
}

#summergift2026.gift_winter .kome_collage img {
    width: 100%;
}

/* ななかいの米×舟納豆（元：332×277px、左30px） */
#summergift2026.gift_winter .kome_collage .collaboration {
    top: 0;
    left: 3.06%;
    width: 33.88%;
}

/* ごはん（元：540×608px、右端） */
#summergift2026.gift_winter .kome_collage .gohan {
    top: 0.55%;
    right: 0;
    width: 55.1%;
}

/* ローズドール賞（元：223px幅、右22px）。ごはんの右下に重ねる */
#summergift2026.gift_winter .kome_collage .award {
    top: 48.63%;
    right: 2.24%;
    width: 22.76%;
}

/* 飯村さん（元：409×471px、左端） */
#summergift2026.gift_winter .kome_collage .iimura {
    top: 31.04%;
    left: 0;
    width: 41.73%;
}

/* 田んぼ（元：302×430px、右263px）。ごはんの左下に重ねる */
#summergift2026.gift_winter .kome_collage .tanbo {
    top: 53.01%;
    right: 26.84%;
    width: 30.82%;
}

/* PCではSP用の画像を出さない */
#summergift2026.gift_winter .kome_collage .kome_sp {
    display: none;
}

/* お歳暮：見出し画像はSP用の画像を用意せず、PC用（1200×800px）をSPの正方形の枠に切り取って表示する
   中央で切ると被写体が切れる画像は、切り取る位置（横方向）を画像ごとに指定する（0%＝左端、50%＝中央） */
@media screen and (max-width: 767px) {
    #summergift2026.gift_winter section#furoshiki .section_title_image img {
        object-position: 0% 50%; /* 風呂敷包みの箱が左寄りなので左端から */
    }

    #summergift2026.gift_winter section#kome .section_title_image img,
    #summergift2026.gift_winter section#eco .section_title_image img {
        object-position: 25% 50%; /* 稲穂・お茶碗が切れないよう少し左寄り */
    }

    #summergift2026.gift_winter section#furusato .section_title_image img {
        object-position: 75% 50%; /* 箸の納豆が右寄りなので、右端が切れないよう右寄り（2026-10-22） */
    }
}

/* お歳暮：SPの商品画像を、右に縦に並ぶアイコンの上下中央に置く（お中元は上揃えのまま） */
@media screen and (max-width: 767px) {
    #summergift2026.gift_winter :is(.product_wrap, .product_wrap_flex) .product .product_image_link {
        align-self: center;
    }
}

/* お歳暮：499px以下では、商品画像（1枚のもの）を幅240px固定にせず、アイコンの左の幅いっぱいに広げる
   （画面が広くなるほど画像とアイコンの間が空いてしまうため） */
@media screen and (max-width: 499px) {
    #summergift2026.gift_winter ul.product_wrap .product .product_image_link {
        justify-self: stretch;
    }

    #summergift2026.gift_winter ul.product_wrap .product .product_image_link > .product_image {
        width: 100%;
    }

    /* 2商品並びの商品（ul.product_wrap_flex：ふるさと・舟納豆の10本詰・5本詰、ひなげし、さぎそう）は、
       画像の幅はSP用（--w-sp）のまま、画像とアイコンをひとまとまりにして中央に寄せる（500〜767pxと同じ並べ方） */
    #summergift2026.gift_winter ul.product_wrap_flex li.product .product_image_wrap {
        grid-template-columns: auto auto;
        justify-content: center;
        column-gap: 24px;
    }

    #summergift2026.gift_winter ul.product_wrap_flex .product .product_image_link {
        justify-self: center;
    }
}

/* お歳暮：768〜1050pxでは、長い見出し（定番詰合せシリーズ）を2行にする
   この幅では見出しの枠の高さが低くなり、1行の縦書きだと上下にはみ出すため。文字は小さくしない */
@media screen and (min-width: 768px) and (max-width: 1050px) {
    #summergift2026.gift_winter br.tb_br {
        display: inline;
    }
}

/* SP：2025年お歳暮SP版と同じく、タイトル画像（幅90%。SP用の横長の nav02-title.webp に切り替え）とSP用の画像（幅100%）を縦に並べる
   ごはん・賞・飯村さん・田んぼはSP用の画像に含まれているので非表示にする */
@media screen and (max-width: 767px) {
    #summergift2026.gift_winter .kome_collage {
        aspect-ratio: auto;
        max-width: 480px; /* タブレット幅で大きくなりすぎないようにする */
        margin: 0 auto;
    }

    #summergift2026.gift_winter .kome_collage > div {
        position: static;
    }

    #summergift2026.gift_winter .kome_collage :is(.gohan, .award, .iimura, .tanbo) {
        display: none;
    }

    #summergift2026.gift_winter .kome_collage .collaboration {
        width: 90%;
        margin: 30px auto;
    }

    #summergift2026.gift_winter .kome_collage .kome_sp {
        display: block;
        width: 100%; /* 下の商品との間は商品一覧（ul.product_wrap）の上の余白60pxで空ける */
    }
}

/* 「※」で始まる文が改行したとき、2行目以降が※の下に入らないようにする（ぶら下げインデント・2026-10-17）
   大口・法人様向けの注意書きは中央揃えなので、ブロックごと中央に置き、中は左揃えにする（2026-10-20にお中元・お歳暮共通にした） */
#summergift2026 #cp .important_text {
    width: fit-content;
    margin-inline: auto;
    padding-left: 1em;
    text-indent: -1em;
    text-align: left;
}

/* Q&Aの「※」の行（span.kome_line）と、紙袋のQ&Aの注意書き（.gift_text）
   2026-10-20にお中元のQ&Aもお歳暮と同じ内容にしたため、お中元・お歳暮共通にした（以前は .gift_winter 付き） */
#summergift2026 section#qa .qa_a_text :is(.kome_line, .gift_text) {
    display: block;
    padding-left: 1em;
    text-indent: -1em;
}

/* 縦書きの見出しの中の数字を横向きのまま1マスに収める（縦中横。「75年、そして新たに――」の「75」） */
#summergift2026 .section_title_text .tcy {
    -webkit-text-combine: horizontal;
    text-combine-upright: all;
    letter-spacing: 0;
}

/* 文末のダッシュ（――）の代わりに、縦の線を描く（文字のダッシュは2本の間にすき間が出るため）
   見えないダッシュ2文字分の場所に背景で線を描くことで、ほかの文字と同じ中心に並べる
   （inline-block＋vertical-align: middle で置くと、明朝体では文字の中心より右にずれた） */
#summergift2026 .section_title_text .dash::after {
    content: "\2015\2015"; /* ダッシュ2文字分の長さ（全角スペースは行末で文字数に数えられず、枠の下まではみ出すため） */
    -webkit-text-fill-color: transparent; /* ダッシュの文字は見せず、背景の線だけを見せる */
    letter-spacing: 0;
    background: linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat; /* 中央に幅1pxの線（文字と同じ色） */
}

/* ************************
2026-10-20（1校の修正）
************************ */

/* お歳暮：かすみそう「晩酌のお供に」・すいせん「贅沢セット」のアイコンは、はなみずきの「人気No.1」と同じ意味合いなので、
   商品名の上（.rank_icon）に置いた（2026-10-20・ユーザー指示。画像はユーザー支給の128×120で、人気No.1と同じ大きさ）。
   以前の楕円のアイコン（ul.icon_wrap の .banshaku_icon・.zeitaku_icon）の指定は削除した */

/* お歳暮：新商品「香ふく納豆」の紹介（#koufuku の見出しの下。写真の下に文章を中央揃えで置く）
   配置・写真・短冊などの指定は CSS 末尾の「香ふく納豆の紹介（D案：丸窓）」（2026-10-20）で上書きしている */
#summergift2026.gift_winter .koufuku_intro {
    padding-top: 80px;
}

#summergift2026.gift_winter .koufuku_intro .koufuku_image {
    max-width: 720px;
    margin: 0 auto;
    box-shadow: 10px 10px 10px 0px rgba(0, 0, 0, 0.1);
}

#summergift2026.gift_winter .koufuku_intro .koufuku_image img {
    width: 100%;
}

#summergift2026.gift_winter .koufuku_intro .koufuku_text {
    padding-top: 40px;
    color: var(--navy);
}

#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text :is(h4, p) {
    text-align: center;
}

#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text h4 {
    font-size: clamp(30px, 3.67vw, 36px);
    line-height: 1.4;
}

#summergift2026.gift_winter .koufuku_intro .koufuku_text h4 span {
    font-size: 0.75em;
}

#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_sub {
    padding-top: 10px;
    font-size: 20px;
    color: #9E7027; /* 金茶（カタログの金の文字に合わせる） */
    font-weight: 600;
}

#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_body {
    padding-top: 30px;
    font-size: 18px;
    line-height: 2;
}

/* 「この一粒が…」の4行。上下に金の線を引いて区切る */
#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_message {
    width: fit-content;
    max-width: 100%;
    margin: 30px auto 0;
    padding: 24px 2em;
    border-top: 1px solid var(--gold);
    border-bottom: 1px solid var(--gold);
    font-size: 22px;
    line-height: 1.9;
}

#summergift2026.gift_winter .koufuku_intro .koufuku_text .koufuku_message span {
    font-size: 1.2em;
    color: var(--red);
}

@media screen and (max-width: 767px) {
    #summergift2026.gift_winter .koufuku_intro {
        padding-top: 50px;
    }

    #summergift2026.gift_winter .koufuku_intro .koufuku_text {
        padding-top: 28px;
    }

    #summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text h4 {
        font-size: 26px;
    }

    /* 幅の狭いSP（320px）でも1行に収まるよう、字間を0にする（文字は小さくしない） */
    #summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_sub {
        font-size: 16px;
        letter-spacing: 0;
    }

    /* SPは中央揃えだと長い文が読みにくいので、本文だけ左揃え */
    #summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_body {
        padding-top: 20px;
        font-size: 16px;
        line-height: 1.9;
        text-align: left;
    }

    #summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_message {
        padding: 18px 0;
        font-size: 18px;
        letter-spacing: 0;
    }
}

/* Q&A：ご利用ガイドへのリンク、回答の段落（冷凍保存の回答） */
#summergift2026 section#qa .qa_a_text .qa_link {
    color: var(--red);
    text-decoration: underline;
}

#summergift2026 section#qa .qa_a_text .qa_para {
    display: block;
}

#summergift2026 section#qa .qa_a_text .qa_para + .qa_para {
    margin-top: 0.8em;
}

/* SPの商品内容（2列）の字間。サイト共通CSSの字間（0.05em）を0にして基準にし、
   それでも1行に収まらない長い品名だけ、.ls_s（-0.16em）・.ls_l（-0.2em）で個別に詰める（2026-10-20にお中元・お歳暮共通にした） */
@media screen and (max-width: 767px) {
    /* .ls_s・.ls_l の指定が優先されるよう、その2つは除く */
    #summergift2026 .product_text ul li:not(.ls_s):not(.ls_l) {
        letter-spacing: 0;
    }
}

/* 定番詰合せ・祝舟詰合せ（祝舟はお歳暮のみ）の見出し。小見出しが長く、枠の下にくっつきそうだったため（1校「味わう」の下に余白が欲しい）、
   文字を上下に寄せる指定（上 -10px・下 -20px、SPは上 -5px・下 -10px）をやめて、枠の上下中央に置く（2026-10-20にお中元・お歳暮共通にした）
   SPの section#teiban の指定より優先されるよう、section を付けて詳細度をそろえ、後ろに書いている */
#summergift2026 section:is(#teiban, #iwaifune) .section_title_wrap .section_title_text {
    margin-top: 0;
}

#summergift2026 section:is(#teiban, #iwaifune) .section_title_wrap .section_title .section_title_text p {
    margin-bottom: 0;
}

/* ************************
2026-10-20（テスト環境での確認後の修正）
************************ */

/* セクション見出し：見出し（h3）と小見出しの間をあける（縦書きなので小見出しの右側の余白。お中元・お歳暮共通・ユーザー指示） */
#summergift2026 .section_title_wrap .section_title .section_title_text p {
    margin-right: clamp(8px, 1.2vw, 12px);
}

@media screen and (max-width: 767px) {
    #summergift2026 .section_title_wrap .section_title .section_title_text p {
        margin-right: 6px;
    }
}

/* お歳暮：香ふく納豆の紹介（D案：丸窓）。生成りの地に、丸く切り抜いた写真を金の輪で囲む（和の「丸窓」に見立てる）
   写真は、パッケージと納豆の小鉢の間が丸の中心に来るよう、中身を左にずらしてある（小皿は丸のふちで切れる・ユーザー指示）
   PC（1051px以上）は写真が左・文章が右。1050px以下は文章の列が狭くなり見出しが折り返すため、写真の下に文章を置く。写真は丸に収まるよう、元の写真の上下を延長した正方形（yeargift/koufuku.webp・2026-10-20・ユーザーが選択） */
#summergift2026.gift_winter .koufuku_intro .inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 0 40px;
    align-items: center;
    padding: 56px 44px;
    background: radial-gradient(circle at 20% 50%, #FFF6E8 0, #F7EBDA 70%);
}

/* 写真：丸く切り抜き、少し離して金の輪で囲む */
#summergift2026.gift_winter .koufuku_intro .koufuku_image {
    position: relative;
    max-width: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    outline: 2px solid rgba(202, 187, 53, 0.9);
    outline-offset: 10px;
    box-shadow: none;
}

#summergift2026.gift_winter .koufuku_intro .koufuku_image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* 写真の右上の赤い短冊（縦書きで「新商品／香ふく納豆」。カタログの赤い帯に合わせる） */
#summergift2026.gift_winter .koufuku_intro .koufuku_label {
    position: absolute;
    top: -22px; /* 少し上に出す（ユーザー指示） */
    right: 10px;
    z-index: 1;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation: upright;
    padding: 14px 8px 18px;
    background-color: #A3262E;
    color: #fff;
    font-size: 22px;
    letter-spacing: 0.12em;
    line-height: 1;
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
}

#summergift2026.gift_winter .koufuku_intro .koufuku_label span {
    display: block;
    margin-left: 6px;
    font-size: 15px;
    color: #F5D98B;
}

/* 文章：PCは左揃え */
#summergift2026.gift_winter .koufuku_intro .koufuku_text {
    padding-top: 0;
}

#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text :is(h4, p) {
    text-align: left;
}

/* 本文はカタログの位置での改行をやめ、幅に合わせて折り返す */
#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_body {
    font-size: 16px;
}

#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_body br {
    display: none;
}

/* 「この一粒が…」：上下の金の線を、上の本文と同じ長さ（文章の幅いっぱい）にし、文は中央揃え */
#summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_message {
    width: auto;
    text-align: center;
    margin: 24px 0 0;
    padding: 18px 0;
    font-size: 19px;
}

/* 「そんな想いを込めて、丁寧につくりました。」は1行。1行に収まらない幅（320px）では「、」の後ろで折り返す
   「幸福」用の span の指定（赤字・1.2em）がかからないよう、色と大きさは親に合わせる */
#summergift2026.gift_winter .koufuku_intro .koufuku_text .koufuku_message span.koufuku_nobr {
    display: inline-block;
    font-size: inherit;
    color: inherit;
}

/* 1050px以下：写真の下に文章。見出し・小見出しは中央、本文は左揃え */
@media screen and (max-width: 1050px) {
    #summergift2026.gift_winter .koufuku_intro .inner {
        display: block;
        padding: 48px 40px 40px;
    }

    #summergift2026.gift_winter .koufuku_intro .koufuku_image {
        width: min(320px, 80%);
        margin: 0 auto;
    }

    #summergift2026.gift_winter .koufuku_intro .koufuku_text {
        padding-top: 40px;
    }

    #summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text :is(h4, .koufuku_sub) {
        text-align: center;
    }
}

@media screen and (max-width: 767px) {
    #summergift2026.gift_winter .koufuku_intro .inner {
        width: 100%; /* SPは地を画面幅いっぱいにする（左右の余白は内側でとる） */
        padding: 44px 16px 32px; /* 320pxでも小見出しが1行に収まる余白 */
    }

    #summergift2026.gift_winter .koufuku_intro .koufuku_image {
        width: min(260px, 80%);
    }

    #summergift2026.gift_winter .koufuku_intro .koufuku_label {
        top: -18px;
        padding: 10px 6px 14px;
        font-size: 18px;
    }

    #summergift2026.gift_winter .koufuku_intro .koufuku_text {
        padding-top: 36px;
    }

    #summergift2026.gift_winter .lp_main .koufuku_intro .koufuku_text .koufuku_message {
        font-size: 16px; /* 「食べる人の“幸福”につながるように。」を320pxでも1行に収める */
    }
}

/* ************************
2026-10-20（ご自宅用詰合せの2商品を横並びに）
************************ */

/* お歳暮：ご自宅用詰合せの舟納豆15本セット・舟納豆・もち麦入り舟納豆セットを、ひなげし・つゆくさと同じ2商品横並び（ul.product_wrap_flex）にした（ユーザー指示）
   画像は縦長（800×991）なので、画像の枠（PC 高さ350px）に収まる幅にする */
#summergift2026 .product_image.img_funanatto15set,
#summergift2026 .product_image.img_mochimugiset {
    --w-pc: 270px;
    --w-sp: 200px;
}

/* 商品名：PC・タブレットでは2商品とも2行にそろえ、画像の高さをそろえる
   （15本セットは「舟納豆／15本セット」と br.pc_br で改行。もち麦入りは「舟納豆・もち麦入り」が1行に収まるよう、幅の狭い画面（約1130px以下）で文字を少し小さくする。最小でも768pxで28px） */
@media screen and (min-width: 768px) {
    #summergift2026.gift_winter section#eco ul.product_wrap_flex .product .product_title h4.long {
        font-size: min(42px, 3.7vw);
    }
}

/* SP：この2商品はアイコンがない（ギフト包装・のし不可）ので、画像を中央に置く（ユーザー指示） */
@media screen and (max-width: 767px) {
    #summergift2026.gift_winter section#eco ul.product_wrap_flex li.product .product_image_wrap {
        grid-template-columns: 1fr;
    }

    #summergift2026.gift_winter section#eco ul.product_wrap_flex .product .product_image_link {
        justify-self: center;
    }
}

/* ************************
2026-10-20（SPの商品内容の幅）
************************ */

/* SPの商品内容（2列）：「そばの実入り舟納豆　◯本」を375px以上で1行に収める（以前は「◯本」の前で改行していた・ユーザー指示。お中元・お歳暮共通）
   文字は小さくせず、リストの幅（330px固定 → 枠の左右5pxずつを残した幅いっぱい・最大360px）と列の間（10px → 6px）を広げ、
   「・」の後ろのあきを0.25em詰める（2行目の字下げも同じだけ詰める）。書体の違いで少し幅が変わっても折り返さないよう、375pxで約10pxの余裕を持たせた */
@media screen and (max-width: 767px) {
    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul {
        width: calc(100% - 10px);
        max-width: 360px;
        column-gap: 6px;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul li {
        padding-left: 0.75em;
        text-indent: -0.75em;
    }

    #summergift2026 :is(.product_wrap, .product_wrap_flex) .product .product_text ul li::before {
        margin-right: -0.25em;
    }
}

/* SPの「そばの実入り舟納豆　◯本」が窮屈に見えるため、字間を -0.2em → -0.15em に戻し、
   「◯本」の前の全角の空き（span.ls_gap）を半角ほどの幅に詰めた（PCはほかの品名と同じ全角の空きのまま）
   （2026-10-20・ユーザーが選択。お中元・お歳暮共通。375pxで必要な幅約154px・列の幅165px） */
@media screen and (max-width: 767px) {
    #summergift2026 .product_text .ls_l {
        letter-spacing: -0.15em;
    }

    #summergift2026 .product_text .ls_l .ls_gap {
        letter-spacing: -0.65em; /* 全角1文字の幅を約0.35emにする（半角の空きに字間 -0.15em をかけたのと同じくらい） */
    }
}

/* ************************
2026-10-20（2校の修正）
************************ */

/* 縦書きの見出し「新商品 詰合せ」の間の空き（2校「スペースを半角にする」）
   文字を立てる指定（text-orientation: upright）では半角の空白も全角の高さになり、空白の代わりの span（高さ0.5em）でも
   テスト環境では縮まらなかったため、空白を使わず「詰合せ」を span.h3_after_gap で囲み、前に0.25emの余白をつける
   （縦書きでは文字の進む方向が上から下なので、margin-inline-start が上の余白になる） */
#summergift2026 .section_title_text h3 .h3_after_gap {
    margin-inline-start: 0.25em;
}

/* SPはもう少し詰める（ユーザー指示） */
@media screen and (max-width: 767px) {
    #summergift2026 .section_title_text h3 .h3_after_gap {
        margin-inline-start: 0.2em;
    }
}