@charset "utf-8";
/* ============================================================
   Pontaボーナスパーク アイコンタップキャンペーン (2611)
   Figma: 20261102_BP11月CP / 261102_bp_pc_open・261102_lp_sp_open
   ============================================================ */

/* ============== 共通 =================== */
#contents {
	--green: #1eac4b;
	--orange: #ff9123;
	--yellow: #ffffd6;
	--text: #333;
	--head: #111;
	--gray: #999;
	--alert: #f50028;
	--link: #0099cc;
	--line: #ddd;
	--radius: 8px;
	color: var(--text);
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
	background-color: #fff;
	padding: 0;
	overflow: hidden;
}

@media screen and (max-width: 767px) {
    #contents p {
        font-size: 14px;
    }
}
#contents * {
	box-sizing: border-box;
}
#contents img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
#contents a {
	color: var(--link);
	text-decoration: underline;
}
#contents a:hover {
	opacity: 0.7;
}

#contents ul,
#contents ol {
	list-style: none;
}
.display-sp {
	display: none;
}
.end_txt {
	font-weight: bold;
	color: #ff0004;
	font-size: 200%;
	text-align: center;
	margin: 10px;
}
.dis_none {
	display: none;
}

/* 注釈リスト（※付き） */
.note_list {
	max-inline-size: max-content;
	margin: 20px auto 0;
	color: var(--gray);
	font-size: 14px;
	line-height: 1.6;
	text-align: left;
}
.note_list li {
	padding-left: 1.2em;
	text-indent: -1.2em;
}
.note_list li::before {
	content: "※";
	display: inline-block;
	width: 1.2em;
	text-indent: 0;
}
.note_list li + li {
	margin-top: 4px;
}
.note_list .is-alert,
.is-alert {
	color: var(--alert);
}
.note_list a {
	color: var(--link);
}

/* 黄色ブロック */
.sec_yellow {
	max-width: 970px;
	margin: 0 auto;
	background-color: var(--yellow);
	border-radius: var(--radius);
}

/* 吹き出し（斜線つき） */
.balloon_ttl {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--head);
	font-size: 16px;
	font-weight: bold;
	line-height: 1.6;
}
.balloon_ttl::before,
.balloon_ttl::after {
	content: "";
	display: block;
	flex: none;
	width: 2px;
	height: 22px;
	border-radius: 10px;
	background-color: var(--head);
}
.balloon_ttl::before {
	transform: rotate(-30deg);
}
.balloon_ttl::after {
	transform: rotate(30deg);
}
.balloon_ttl em {
	color: var(--orange);
	font-style: normal;
}

/* ============== パンくず =================== */
.breadcrumb {
	max-width: 1090px;
	margin: 0 auto;
	padding: 10px 15px;
	font-size: 12px;
	color: var(--gray);
	text-align: left;
}

/* ============== btn =================== */
#contents .btn {
	color: #fff;
	font-weight: bold;
	font-size: 18px;
	text-decoration: none;
}
.btn {
	position: relative;
	margin: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius);
	width: 100%;
	max-width: 400px;
	height: 50px;
	background-color: var(--orange);
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/bonuspark_2611/img/btnarrow_right.png);
	background-size: 22px;
	background-position: center right 20px;
	background-repeat: no-repeat;
}
/* 参照元（research_2610）と同じ primary ボタン */
#contents .btn.primary {
	background-color: #FF9123;
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/bonuspark_2611/img/btn_arrow_right_primary.png);
	color: #fff;
}
#contents .btn:hover {
	opacity: 1;
	background-color: #ffb66d;
}
.btn_wrap.first,
.btn_wrap.last {
	background-color: #fff;
	padding: 45px 15px;
}
.btn_wrap .balloon_ttl {
	margin-bottom: 10px;
}
.btn_att {
	max-width: 730px;
    margin: 15px auto 0;
    font-size: 14px;
    line-height: 1.6;
    font-weight: normal;
    color: #333;
    text-align: left;
}
.btn_att li + li {
	color: var(--gray);
}
.btn_att li + li a {
	color: var(--link);
}
/* 追従エントリーボタン */
.js-stickyItem {
	transition: opacity 0.3s, visibility 0s ease 0.3s;
	opacity: 0;
	visibility: hidden;
	z-index: 10;
}
.js-stickyItem.is-show {
	transition-delay: 0s;
	opacity: 1;
	visibility: visible;
	z-index: 10;
}
.p-stickyItem {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
	padding: 35px 30px;
	background: rgba(173, 173, 173, 0.5);
}
#contents .p-stickyItem a:hover {
	opacity: 1;
	background-color: #ffa144;
}
/*終了対応*/
#contents .btn_close {
	position: relative;
	pointer-events: none;
}
#contents .btn_close::after {
	content: "※本キャンペーンは終了しました";
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 2.2rem;
	font-weight: bold;
	background-color: rgba(0, 0, 0, 0.7);
	width: 104%;
	height: 120%;
	margin: 0 auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
}

/* ============== MV =================== */
.top img {
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}

/* ============== キャンペーン期間 =================== */
.period {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 45px;
	padding: 4px 15px;
	background-color: var(--green);
	color: #fff;
	font-family: "A-OTF Shin Maru Go Pro", "Shin Maru Go", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic Std", Meiryo, sans-serif;
	font-weight: bold;
	line-height: 1.3;
}
.period_ttl {
	font-size: 18px;
}
.period_date {
	font-size: 20.8px;
}

/* ============== アイコンタップでアクセス =================== */

.access {
	padding: 80px 20px 50px;
	margin-top: 45px;
}
.main_wrap > .access {
	margin-top: 0;
}
.access .balloon_ttl--access {
	margin-bottom: 16px;
	color: var(--text);
}
.access_ttl {
	color: var(--head);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5;
}
.access_img {
	margin-top: 20px;
}
.access_img img {
	display: block;
	margin: 0 auto;
}
.access_arrow {
	margin: 20px 0;
}
.access_arrow img {
	display: block;
	margin: 0 auto;
}
.access_lead {
	color: var(--head);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5;
}
.access_img--bp {
	margin-top: 30px;
}
.access_note {
	max-inline-size: max-content;
	margin: 20px auto 0;
	color: var(--gray);
	font-size: 14px;
	text-align: left;
}
.main_wrap > .acd_app {
	margin-top: 45px;
}

/* ============== アコーディオン共通 =================== */
.acd {
	max-width: 970px;
	margin: 45px auto;
}
@media screen and (max-width: 767px) {
	.acd {
		margin: 0 auto;
	}
}
.acd > summary {
	list-style: none;
	cursor: pointer;
}
.acd > summary::-webkit-details-marker {
	display: none;
}
.acd_head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.acd_ico {
	position: absolute;
	top: 50%;
	right: 20px;
	width: 22px;
	height: 22px;
	margin-top: -11px;
	border-radius: 50%;
	background:
		linear-gradient(var(--green), var(--green)) center / 10px 2px no-repeat,
		linear-gradient(var(--green), var(--green)) center / 2px 10px no-repeat;
	background-color: #FFF;
}
.acd[open] > .acd_head .acd_ico {
	background: linear-gradient(var(--green), var(--green)) center / 10px 2px no-repeat;
	background-color: #FFF;
}

.acd_ico_b {
	position: absolute;
	right: 20px;
	width: 25px;
	height: 25px;
	margin-top: -11px;
	border-radius: 50%;
	border: var(--head) 2px solid;
	background:
		linear-gradient(var(--head), var(--head)) center / 10px 2px no-repeat,
		linear-gradient(var(--head), var(--head)) center / 2px 10px no-repeat;
	background-color: #FFF;
}
.acd[open] > .acd_head .acd_ico_b {
	border: var(--head) 2px solid;
	background: linear-gradient(var(--head), var(--head)) center / 10px 2px no-repeat;
	background-color: #FFF;
}

/* 緑ヘッダー型 */
.acd_green > .acd_head {
	min-height: 50px;
	padding: 10px 56px;
	background-color: var(--green);
	border: 1px solid var(--green);
	border-radius: var(--radius);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.5;
}
.acd_green[open] > .acd_head {
	border-radius: var(--radius) var(--radius) 0 0;
}
.acd_green > .acd_body {
	background-color: #fff;
	border: 1px solid var(--green);
	border-top: 0;
	border-radius: 0 0 var(--radius) var(--radius);
}

/* 見出し型（黄色／白ブロック内） */
.acd_sec > .acd_head {
	position: relative; /* アイコンの基準位置にするため */
	display: flex;
	align-items: center;     /* 縦方向の中央ぞろえ */
	justify-content: center; /* 横方向の中央ぞろえ */
	min-height: 60px;
	padding: 30px 60px;      /* 上下の余白を均等にする */
	color: var(--head);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5;
}
.acd_sec > .acd_head .acd_ico_b {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%); /* 自身の高さの半分だけ上にずらして完全な上下中央にする */
	margin-top: 0;
	width: 26px;
	height: 26px;
}
.acd_sec > .acd_body {
	padding: 30px 40px 45px;
}

/* ============== Pontaアプリをお持ちでない方 =================== */
.acd_app > .acd_body {
	padding: 30px 65px 30px;
	background-color: #fff;
}
.app_dl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	text-align: left;
}
.app_dl_col--info {
	position: relative;
	flex: none;
	width: 254px;
	padding-right: 0;
}
.app_dl_col--info::after {
	content: "";
	position: absolute;
	top: -20px;
	right: -12px;
	width: 1px;
	height: 145px;
	background-color: #ccc;
}
.app_dl_logo {
	display: flex;
	align-items: center;
	gap: 10px;
}
.app_dl_icon {
	width: 48px;
	height: auto;
}
.app_dl_name {
	width: 160px;
	height: auto;
}
.app_dl_txt {
	margin-top: 12px;
	font-weight: bold;
	line-height: 1.4;
}
.app_dl_col--store {
	flex: none;
	width: 112px;
}
.app_dl_col--store a {
	display: block;
}
.app_dl_col--store a + a {
	margin-top: 4px;
}
.app_dl_col--qr {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: 1;
}
.app_dl_qr {
	flex: none;
	width: 85px;
}
.app_dl_qr img {
	display: block;
	width: 85px;
	border: 1px solid #000;
}
.app_dl_qrtxt {
	font-size: 16px;
	line-height: 1.4;
}
.note_list--app {
	max-inline-size: none;
	margin-top: 20px;
}
.note_list--app li {
	color: var(--gray);
}
/* PC：SP用の注釈（非表示）が前にあっても余白を足さない */
.note_list--app .display-sp + .display-pc {
	margin-top: 0;
}
.app_dl_sptxt {
	display: none;
}

/* ============== 参加方法 =================== */
.howto {
	padding: 45px 70px 55px;
}
.sec_ttl {
	margin-bottom: 40px;
	color: var(--head);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5;
}
.step_card {
	position: relative;
	padding: 45px 20px 40px;
	background-color: #fff;
	border-radius: var(--radius);
}
.step_card + .step_card {
	margin-top: 40px;
}
.step_pill {
	position: absolute;
	top: -15px;
	left: 50%;
	z-index: 2;
	width: 160px;
	height: 30px;
	margin: 0;
	transform: translateX(-50%);
	border-radius: 500px;
	background-color: var(--green);
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	line-height: 30px;
	text-align: center;
	white-space: nowrap;
}
.step_ttl {
	color: var(--head);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.5;
}
.step_ttl--s {
	font-size: 26px;
}
.step1_img {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-top: 24px;
}
.step1_img img {
	flex: none;
	height: auto;
}
.step2_img {
	margin-top: 30px;
}
.step2_img img {
	display: block;
	margin: 0 auto;
}
.note_list--step2 {
	width: 640px;
	max-inline-size: 640px;
	margin-top: 10px;
}
.note_list--step2 .is-alert {
	color: var(--alert);
}
.step3_img {
	margin-top: 30px;
}
.step3_img img {
	display: block;
	margin: 0 auto;
}
.step2_appbtn {
	display: none;
}
.note_list--alert {
	max-inline-size: none;
	width: 726px;
	margin-top: 10px;
	color: var(--alert);
}
.note_list--alert li {
	color: var(--alert);
}
.note_list--order {
	max-inline-size: none;
	width: 830px;
	margin: 20px auto 0;
}
.howto > .note_list--order {
	margin: 20px 0 0;
}

/* おすすめ商品 */
.recommend {
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center;
}

/* 「おすすめ商品はこちら」の吹き出し風タイトル */
.balloon_pill {
    position: relative;
    display: inline-block;
    min-width: 234px;
    padding: 5px 24px;
    background-color: #fff;
    border: 2px solid var(--head);
    border-radius: 500px;
    color: var(--text);
    font-size: 18px;
    font-weight: bold;
    line-height: 1.6;
    margin-bottom: 18px;
}
.balloon_pill::before,
.balloon_pill::after {
    content: "";
    position: absolute;
    left: 50%;
    border-style: solid;
    border-color: transparent;
}
/* 外側のとんがり（黒い枠線用） */
.balloon_pill::before {
    bottom: -12px;
    margin-left: -9px;
    border-width: 10px 9px 0;
    border-top-color: var(--head);
}
/* 内側のとんがり（白抜きの背景用で、上の線に少し被せて境界線を隠す） */
.balloon_pill::after {
    bottom: -9px; /* 少し上にめり込ませることで黒い重なり線を消す */
    margin-left: -7px;
    border-width: 10px 7px 0;
    border-top-color: #fff;
}

/* カード一覧のグリッド・フレックス配置 */
.product_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 757px;
    margin: 0 auto;
}

/* 各カードのデザイン */
.product_list li {
    flex: none;
    width: calc((100% - 30px) / 4);
    max-width: 182px;
    padding: 16px 15px;
    background-color: #f2f2f2;
    border: 1px solid #666;
    border-radius: 10px;
    text-align: left;
}
#contents .product_list li a {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: var(--text);
    text-decoration: none;
}
.product_list li a > img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    object-position: center;
    background-color: #fff;
    border: 1px solid var(--line);
}
.product_list li a dl {
    margin-top: 8px;
}
.product_list li a dl dt {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    height: calc(18px * 2);
    font-size: 16px;
    line-height: 18px;
}
.product_list li a dl dd {
    margin-top: 10px;
    padding-left: 18px;
    background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/bonuspark_2611/img/ico_insentive.png) no-repeat left 5px;
    background-size: 15px;
    color: var(--alert);
    font-size: 14px;
    font-weight: bold;
    line-height: 22.4px;
    min-height: 45px;
}

@media screen and (max-width: 767px) {
    .balloon_pill {
        min-width: 0;
        font-size: 16px;
    }
    .product_list {
        gap: 10px;
        max-width: none;
        padding: 0 10px;
    }
    .product_list li {
        width: calc((100% - 10px) / 2); /* SP時は2カラム */
        max-width: none;
        padding: 10px 8px;
    }
    .product_list li a dl dt {
        font-size: 14px;
        line-height: 1.4;
        height: calc(1.4em * 2);
    }
    .product_list li a dl dd {
        font-size: 13px;
        line-height: 1.5;
    }
	/* ▼ おすすめ商品を画面の端から端まで表示（手動スワイプ） */
    .recommend.js-recommend {
        overflow: hidden;           /* はみ出た分を隠す */
        width: 100vw;               /* 画面全体の幅にする */
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;         /* 親要素の余白を無視して画面端まで強制拡張 */
        margin-right: -50vw;
    }

    /* 「おすすめ商品はこちら」の吹き出しは中央に固定 */
    .recommend.js-recommend .balloon_pill {
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    /* 手動スワイプのスライダー（スクロールスナップ） */
    .product_list.is-slider {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start; /* centerだと左端が切れるため */
        gap: 12px;
        width: 100%;
        /* 先頭・末尾のカードも中央に寄せられるように左右に余白を確保 */
        padding: 10px calc(50% - 72.5px) 14px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;      /* Firefox */
        -ms-overflow-style: none;
    }
    .product_list.is-slider::-webkit-scrollbar {
        display: none;              /* Chrome / Safari */
    }
    .product_list.is-slider li {
        flex: 0 0 145px;
        width: 145px;
        max-width: none;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    /* ドットインジケーター */
    .product_dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2px;
        margin: 0 auto 20px;
        padding: 0;
    }
    .product_dots li {
        list-style: none;
    }
    .product_dots button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }
    .product_dots button::before {
        content: "";
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #ccc;
        transition: background-color 0.2s;
    }
    .product_dots button.is-active::before {
        background-color: var(--orange);
    }
}

/* PC・タブレットではドットを表示しない */
@media screen and (min-width: 768px) {
    .product_dots {
        display: none;
    }
}

/* ご利用の手引き */
.acd_guide {
	width: 726px;
	margin: 40px auto 0;
}
.acd_guide > .acd_body {
	padding: 30px 40px 25px;
}
.guide_flow {
	display: flex;
	align-items: stretch;
	justify-content: center;
}
.guide_item {
	display: flex;
	flex-direction: column;
	flex: none;
	width: 186px;
	padding: 20px 10px 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background-color: #fff;
	font-size: 14px;
	line-height: 1.6;
}
.guide_num {
	width: 19px;
	height: 19px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background-color: var(--green);
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	line-height: 19px;
}
.guide_ttl {
	margin-bottom: 8px;
	color: var(--head);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.4;
}
.guide_txt {
	margin-bottom: 10px;
	font-size: 13px;
	line-height: 1.5;
}
.guide_img {
	margin: auto -10px 0;
	padding: 0 14px;
}
.guide_img img {
	display: block;
	margin: 0 auto;
}
.guide_arrow {
	flex: none;
	align-self: center;
	width: 14px;
	height: 20px;
	margin: 0 6px;
	background-color: var(--green);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.acd_guide .note_list {
	max-inline-size: none;
	margin-top: 20px;
}

/* ============== 商品利用～ポイント獲得までの流れ =================== */
.acd_flow > .acd_body {
	padding: 40px 66px 50px;
}
.flow_list {
	text-align: left;
}
.flow_item {
	display: grid;
	grid-template-columns: 135px 1fr;
	column-gap: 20px;
	padding-bottom: 20px;
}
.flow_item--last {
	padding-bottom: 0;
}
.flow_side {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.flow_side::after {
	content: "";
	display: block;
	flex: 1;
	width: 7px;
	margin: 10px 0;
	background: radial-gradient(circle, #666 3px, transparent 3.5px) center top / 7px 21px repeat-y;
}
.flow_item--last .flow_side::after {
	display: none;
}
.flow_pill {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 135px;
	height: 76px;
	border-radius: 38px;
	background-color: var(--green);
	color: #fff;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
.flow_pill--orange {
	background-color: var(--orange);
}
.flow_card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 30px 42px 30px 42px;
	background-color: #fff;
	min-height: 185px;
}
.flow_card_txt {
	flex: 1;
	min-width: 0;
}
.flow_card_ttl {
	margin-bottom: 14px;
	color: var(--head);
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4;
}
.flow_card_img {
	flex: none;
}
.flow_card_img img {
	display: block;
}
.flow_card_img--phone {
	align-self: flex-end;
	margin-bottom: -30px;
}
.flow_box {
	margin-top: 20px;
	border: 1px solid var(--green);
	border-radius: 4px;
	overflow: hidden;
	background-color: #fff;
}
.flow_box_ttl {
	background-color: var(--green);
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	line-height: 31px;
	text-align: center;
}
.flow_box_body {
	padding: 10px 49px 14px;
	line-height: 1.6;
}
.flow_box_body .is-alert {
	margin-top: 4px;
	font-size: 14px;
}
.flow_box--orange {
	border-color: var(--orange);
}
.flow_box--orange .flow_box_ttl {
	background-color: var(--orange);
}
.flow_card--point {
	position: relative;
	display: block;
	padding: 36px 42px 0;
	text-align: center;
	overflow: hidden;
}
.flow_card_ttl--orange {
	position: relative;
	display: inline-block;
	color: var(--orange);
	font-size: 24px;
}
.flow_deco {
	position: absolute;
	top: 50%;
	width: 37px;
	height: auto;
	transform: translateY(-50%);
}
.flow_deco--l {
	left: -52px;
}
.flow_deco--r {
	right: -52px;
}
.flow_point_txt {
	max-width: 400px;
	margin: 6px auto 0;
	text-align: left;
}
.marker {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #ffe94d 0);
}
.flow_card--point .flow_box {
	max-width: 485px;
	margin: 20px auto 0;
	text-align: left;
}
.flow_last_img {
	margin: 20px -42px 0;
}
.flow_last_img img {
	display: block;
	width: 100%;
}

/* ============== 商品利用状況の確認方法 =================== */
.confirm_lead {
	margin-bottom: 40px;
	font-size: 16px;
}
.confirm_lead strong {
	color: var(--orange);
}
.acd_confirm > .acd_body {
	padding: 30px 69px 30px;
}
.confirm_cols {
	display: flex;
	justify-content: center;
	gap: 19px;
}
.confirm_card {
	position: relative;
	flex: 1;
	max-width: 408px;
	padding: 56px 24px 24px;
	background-color: #fff;
	border-radius: var(--radius);
	text-align: left;
}
.confirm_ttl {
	margin-bottom: 14px;
	color: var(--head);
	font-size: 26px;
	font-weight: bold;
	line-height: 1.3;
	text-align: center;
}
.confirm_txt {
	font-size: 16px;
	line-height: 1.6;
}
.confirm_img {
	margin-top: 24px;
}
.confirm_img img {
	display: block;
	margin: 0 auto;
}
.confirm_card .note_list {
	max-inline-size: none;
	margin-top: 16px;
}
.note_list--confirm {
	max-inline-size: none;
	margin-top: 16px;
}

/* PC・タブレット：STEP1/STEP2のタイトル・説明文・画像の高さをそろえる（subgrid）
   ※subgrid非対応ブラウザでは従来どおり（そろわないだけで崩れません） */
@media screen and (min-width: 768px) {
	.confirm_cols {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 408px));
		justify-content: center;
		column-gap: 19px;
		row-gap: 0;
	}
	.confirm_card {
		display: grid;
		grid-row: span 4;
		grid-template-rows: subgrid;
		max-width: none;
	}
	.confirm_ttl {
		align-self: start;
	}
}

/* ============== キャンペーン詳細 =================== */
.acd_att {
	background-color: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.acd_att > .acd_body {
	padding: 30px 70px 60px;
	text-align: left;
	font-size: 14px;
}
.att_item + .att_item {
	margin-top: 30px;
}
.att_item_ttl {
	position: relative;
	margin-bottom: 15px;
	padding-left: 20px;
	color: var(--head);
	font-size: 14px;
	font-weight: bold;
	line-height: 1.3;
}
.att_item_ttl::before {
	content: "";
	display: block;
	position: absolute;
	top: 1px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: var(--orange);
}
.att_item_inner p {
	margin-top: 10px;
}
.att_list-style {
	margin-top: 10px;
	padding-left: 1em;
	text-indent: -1em;
}
.att_num-style {
	margin-top: 10px;
	padding-left: 1.5em;
	text-indent: -1.4em;
	counter-reset: number 0;
}
.att_num-style > li::before {
	counter-increment: number 1;
	content: "(" counter(number) ")";
}
.att_num-style--3 > li::before {
	counter-increment: none;
	content: "(3)";
}
.att_small-unit {
	margin: 10px auto;
}
.att_list-style .att_small-unit {
	text-indent: 0;
}
.att_list-style li > .att_list-style,
.att_list-style li > .att_num-style,
.att_num-style li > .att_list-style,
.att_num-style li > .att_num-style,
.att_small-unit .att_list-style,
.att_small-unit .att_num-style {
	margin-top: 0;
	margin-bottom: 10px;
}
.att_small-unit .att_list-style,
.att_small-unit .att_num-style {
	margin-left: 0.5em;
}
.att_item_fwb {
	font-weight: bold;
}
.att_item_ftem {
	color: var(--alert);
	font-weight: bold;
}

/* ============== ラストのエントリー =================== */
.btn_wrap.last {
	padding: 45px 15px 60px;
}

/* ============== SP（767px以下） =================== */
@media screen and (max-width: 767px) {
	.display-pc {
		display: none;
	}
	.display-sp {
		display: block;
	}
	#contents a:hover {
		opacity: 1;
	}
	.end_txt {
		font-size: 140%;
	}
	.breadcrumb {
		flex-wrap: nowrap;
		white-space: nowrap;
		overflow-x: auto;
	}
	.breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.note_list {
		font-size: 12px;
		margin-top: 14px;
	}
	.sec_yellow {
		max-width: 100%;
		border-radius: 0;
	}

	/* btn */
	#contents .btn {
		max-width: 315px;
		font-size: 16px;
	}
	.btn {
		background-position: center right 16px;
		background-size: 20px;
	}
	#contents .btn:hover {
		opacity: 1;
		background-color: var(--orange);
	}
	.btn_wrap.first,
	.btn_wrap.last {
		padding: 30px 30px;
	}
	.btn_att {
		max-width: 315px;
		margin-top: 12px;
		font-size: 12px;
	}
	.p-stickyItem {
		padding: 20px 30px;
	}
	#contents .btn_close::after {
		font-size: 1.8rem;
	}

	/* 期間 */
	.period {
		flex-direction: column;
		gap: 0;
		min-height: 36px;
		padding: 4px 10px;
	}
	.period_ttl {
		display: none;
	}
	.period_date {
		font-size: 16px;
	}
	.period_date::before {
		content: "キャンペーン期間 ";
		font-size: 13px;
		margin-right: 6px;
	}

	/* access */
	.main_wrap > * + * {
		margin-top: 30px;
	}
	.access {
		padding: 40px 15px 30px;
	}
	.access .balloon_ttl--access {
		margin-bottom: 14px;
		font-size: 14px;
	}
	.access_ttl,
	.access_lead {
		font-size: 20px;
	}
	.access_ttl {
		line-height: 1.5;
	}
	.access_img {
		margin-top: 16px;
	}
	.access_arrow {
		margin: 18px 0;
	}
	.access_arrow img {
		width: 80px;
	}
	.access_img--bp {
		margin-top: 20px;
	}
	.access_note {
		font-size: 11px;
	}

	/* アコーディオン */
	.acd_green > .acd_head {
		min-height: 56px;
		padding: 8px 44px;
		font-size: 16px;
	}
	.acd_ico {
		right: 14px;
		width: 20px;
		height: 20px;
		margin-top: -10px;
	}
	.acd_sec > .acd_head {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 24px 56px; /* 上下左右のパディングを調整 */
		font-size: 20px;
	}
	.acd_sec > .acd_head .acd_ico_b {
		position: absolute;
		top: 50%;
		right: 16px;
		transform: translateY(-50%); /* 常にタイトルの縦中央に配置 */
		width: 24px;
		height: 24px;
		margin-top: 0;
	}
	.acd_sec:not([open]) > .acd_head {
		padding-bottom: 24px; /* 開閉時で高さがガタつかないように上下を合わせる */
	}
	.acd_sec > .acd_body {
		padding: 20px 15px 30px;
	}
	.main_wrap > .acd {
		width: calc(100% - 30px);
	}
	.main_wrap > .acd_sec {
		width: 100%;
	}

	/* アプリDL */
	.acd_app > .acd_body {
		padding: 20px 15px;
	}
	.app_dl {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	.app_dl_col--info {
		width: 100%;
		text-align: center;
	}
	.app_dl_col--info::after {
		display: none;
	}
	.app_dl_logo {
		justify-content: center;
	}
	.app_dl_col--store {
		display: flex;
		gap: 8px;
		width: 100%;
		justify-content: center;
	}
	.app_dl_col--store a {
		width: 120px;
	}
	.app_dl_col--store a + a {
		margin-top: 0;
	}
	.app_dl_col--qr {
		display: none;
	}
	.app_dl_txt {
		font-size: 14px;
		font-weight: normal;
	}
	/* ボタン下の区切り線＋説明文 */
	.app_dl_sptxt {
		margin-top: 24px;
		padding-top: 20px;
		border-top: 1px solid #ccc;
		color: var(--text);
		font-size: 14px;
		line-height: 1.7;
		text-align: left;
	}
	.note_list--app {
		margin-top: 16px;
	}

	/* 参加方法 */
	.howto {
		padding: 30px 15px 30px;
	}
	.sec_ttl {
		margin-bottom: 30px;
		font-size: 20px;
	}
	.step_card {
		padding: 40px 15px 24px;
	}
	.step_card + .step_card {
		margin-top: 36px;
	}
	.step_ttl {
		font-size: 20px;
	}
	.step_ttl--s {
		font-size: 20px;
	}
	.step1_cta {
		gap: 14px;
		margin-top: 16px;
	}
	.step1_cta_img {
		width: 70px;
	}
	.step1_cta .btn {
		width: 100%;
		font-size: 14px;
		background-size: 18px;
		background-position: center right 10px;
	}
	.step2_img,
	.step3_img {
		margin-top: 20px;
	}
	.step2_appbtn {
		display: block;
		margin-top: 16px;
	}
	/* 参照：ぽんぽん祭 .btn_secodary（シャドウなし） */
	#contents .step2_appbtn a {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 14px 36px; /* 右端のアイコンと文字が重ならないよう左右に余白（中央揃えを保つため左右同じ） */
		border: 1px solid #111;
		border-radius: 9999px;
		background: #fff;
		color: #111;
		font-size: 14px;
		font-weight: bold;
		line-height: 1;
		text-decoration: none;
		transition: border-color 0.5s ease, color 0.5s ease;
	}
	#contents .step2_appbtn a::after {
		content: "";
		position: absolute;
		right: 20px;
		top: 50%;
		z-index: 2;
		width: 20px;
		height: 20px;
		transform: translateY(-50%);
		background-image: url("https://pntc.sslcs.cdngc.net/cdn/campaign/bonuspark_2611/img/link_icon.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% auto;
	}
	#contents .step2_appbtn a:hover {
		color: #999;
		border-color: #999;
	}
	/* 360px未満（320pxなど）：文字とアイコンを少し小さくして収める */
	@media screen and (max-width: 359px) {
		#contents .step2_appbtn a {
			padding: 14px 32px;
			font-size: 12px;
		}
		#contents .step2_appbtn a::after {
			right: 12px;
			width: 16px;
			height: 16px;
		}
	}
	.note_list--step2 {
		width: 100%;
		max-inline-size: none;
	}
	.balloon_pill {
		min-width: 0;
		font-size: 16px;
	}
	.product_list {
		gap: 10px;
		max-width: none;
	}
	.product_list li {
		width: calc((100% - 10px) / 2);
		max-width: none;
		padding: 10px 8px;
	}
	.product_list li a dl dt {
		font-size: 14px;
		line-height: 1.4;
		height: calc(1.4em * 2);
	}
	.product_list li a dl dd {
		font-size: 13px;
		line-height: 1.5;
	}
	.acd_guide {
		width: calc(100% - 0px);
		margin-top: 30px;
	}
	.acd_guide > .acd_body {
		padding: 16px 10px 16px;
	}
	.guide_flow {
		display: block;
	}
	.guide_item {
		width: 100%;
		padding: 16px 10px 0;
	}
	.guide_arrow {
		display: block;
		width: 20px;
		height: 14px;
		margin: 8px auto;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
	}
	.guide_ttl {
		font-size: 16px;
	}
	.guide_txt {
		font-size: 14px;
		margin-bottom: 14px;
	}
	.note_list--alert {
		width: 100%;
	}
	.note_list--order {
		width: 100%;
		margin-top: 16px;
	}
	.howto > .note_list--order {
		margin-top: 16px;
	}

	/* 流れ */
	.acd_flow > .acd_body {
		padding: 24px 15px 30px;
	}
	.flow_item {
		display: block;
		padding-bottom: 0;
	}
	.flow_side {
		position: relative;
		z-index: 2;
		margin-bottom: -38px;
	}
	.flow_side::after {
		display: none;
	}
	.flow_pill {
		width: 135px;
		height: 66px;
		border-radius: 33px;
		font-size: 16px;
	}
	.flow_card {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding: 54px 15px 24px;
		min-height: 0;
	}
	.flow_card_ttl {
		font-size: 18px;
		text-align: center;
	}
	.flow_card_img {
		align-self: center;
		text-align: center;
	}
	.flow_card_img--phone {
		align-self: center;
		margin-bottom: -24px;
	}
	.flow_box_body {
		padding: 8px 16px 12px;
	}
	.flow_item + .flow_item::before {
		content: "";
		display: block;
		width: 7px;
		height: 40px;
		margin: 0 auto;
		background: radial-gradient(circle, #666 3px, transparent 3.5px) center top / 7px 18px repeat-y;
	}
	.flow_card--point {
		padding: 54px 15px 0;
	}
	.flow_card_ttl--orange {
		font-size: 18px;
	}
	.flow_deco--l {
		left: -42px;
	}
	.flow_deco--r {
		right: -42px;
	}
	.flow_deco {
		width: 30px;
	}
	.flow_point_txt {
		max-width: none;
	}
	.flow_last_img {
		margin: 20px -15px 0;
	}

	/* 確認方法 */
	.acd_confirm > .acd_body {
		padding: 20px 15px 24px;
	}
	.confirm_lead {
		margin-bottom: 36px;
		font-size: 14px;
	}
	.confirm_cols {
		flex-direction: column;
		gap: 36px;
	}
	.confirm_card {
		max-width: none;
		padding: 48px 18px 20px;
	}
	.confirm_ttl {
		font-size: 20px;
	}
	.confirm_txt {
		font-size: 14px;
	}

	/* 詳細 */
	.main_wrap > .acd_att {
        width: 100%;
        border: none;
        border-radius: 0;
        border-top: 2px solid #111; 
        border-bottom: none;      
        background-color: #fff;
    }
    .acd_att > .acd_head {
        background-color: #fff;
        border-bottom: 2px solid #111;
    }
    .acd_att[open] > .acd_body {
        margin: 15px 15px 25px; 
        border: 1px solid #dddddd;  
        border-radius: 8px;    
        padding: 20px 15px; 
        background-color: #fff;
    }
	.att_item + .att_item {
		margin-top: 20px;
	}
	.att_item_ttl {
		margin-bottom: 8px;
		font-size: 13px;
	}
	.att_item_inner p,
	.att_list-style {
		margin-top: 5px;
	}

	.btn_wrap.last {
		padding: 30px 30px 40px;
	}
}


/* ============== タブレット～SP：「商品利用～ポイント獲得までの流れ」のカード内イラストを小さく =================== */
@media screen and (max-width: 767px) {
	.flow_card_img {
		flex: none;
		width: 110px;
		max-width: none;
	}
	.flow_card_img img {
		width: 100%;
		height: auto;
	}
}
@media screen and (max-width: 767px) {
	.flow_card_img {
		width: 100px;
	}
}


/* 「流れ」STEP1の画像のみ170px（タブレット～SP） */
@media screen and (max-width: 767px) {
	.flow_item:first-child .flow_card_img {
		width: 170px;
	}
}


/* ============== STEP4 下部の画像（CSS配置） =================== */
/* PC・タブレット：枠の背景として一番下に配置（画像の高さに合わせず、はみ出た上部はカットされる）
   padding-bottom は画像の下部（Ponta＋オレンジのポイントの山）が見える高さ。画像 684×290 のうち約100px分 ≒ 14.6% */
.flow_card--point {
	background: #fff url(https://pntc.sslcs.cdngc.net/cdn/campaign/bonuspark_2611/img/img_step04_pc.png) center bottom / 100% auto no-repeat;
	padding-bottom: 18.6%;
}
/* SP：画像（690×230）を枠の一番下に配置 */
@media screen and (max-width: 767px) {
	.flow_card--point {
		background-image: none;
		padding-bottom: 0;
	}
	.flow_card--point::after {
		content: "";
		display: block;
		margin: 20px -15px 0;
		aspect-ratio: 690 / 230;
		background: url(https://pntc.sslcs.cdngc.net/cdn/campaign/bonuspark_2611/img/img_step04_sp.png) center bottom / 100% auto no-repeat;
	}
}

/* ============== PC・タブレット（768px以上）：「流れ」STEP1～3のカード内イラストの大きさ =================== */
@media screen and (min-width: 768px) {
	.flow_card_img {
		flex: none;
		width: 110px;
	}
	.flow_card_img img {
		width: 100%;
		height: auto;
	}
	.flow_item:first-child .flow_card_img {
		width: 170px;
	}
}


/* ============== STEP4 タイトル左右の飾り（CSS配置） =================== */
/* ※画像の縦横比に合わせて width / height を調整してください */
.flow_card_ttl--orange::before,
.flow_card_ttl--orange::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 37px;
	height: 60px;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.flow_card_ttl--orange::before {
	left: -52px;
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/bonuspark_2611/img/ico_flow_deco_l.png);
}
.flow_card_ttl--orange::after {
	right: -52px;
	background-image: url(https://pntc.sslcs.cdngc.net/cdn/campaign/bonuspark_2611/img/ico_flow_deco_r.png);
}
@media screen and (max-width: 767px) {
	.flow_card_ttl--orange::before,
	.flow_card_ttl--orange::after {
		width: 30px;
		height: 48px;
	}
	.flow_card_ttl--orange::before {
		left: -42px;
	}
	.flow_card_ttl--orange::after {
		right: -42px;
	}
}


/* ============== 「参加にはアイコンタップ必須！」のフォントサイズ（タイトルと同じ） =================== */
.access .balloon_ttl--access {
	font-size: 26px;
}
.balloon_ttl--access::before,
.balloon_ttl--access::after {
	align-self: end;
	min-height: 1.4em;
}
.balloon_ttl_txt {
	text-align: center;
}
/* 1行に収まらない場合は「参加には」「アイコンタップ必須！」の間で折り返す */
.bt_line {
	display: inline-block;
}
@media screen and (max-width: 767px) {
	.access .balloon_ttl--access {
		font-size: 20px;
	}
}

@media screen and (min-width: 475px) {
	.br-425 {
		display:none;
	}
}

/* ============== タブレット（768〜1024px）：PC表示のまま横幅に収める安全策 =================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.note_list--step2,
	.note_list--alert,
	.note_list--order,
	.acd_guide {
		width: auto;
		max-width: 100%;
		max-inline-size: 100%;
	}
	.sec_yellow,
	.main_wrap > .acd {
		width: calc(100% - 40px);
	}
}

/* ============== タブレット（768〜1024px）：ご利用の手引きを幅に合わせて縮める =================== */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.howto {
		padding-left: 30px;
		padding-right: 30px;
	}
	.acd_guide > .acd_body {
		padding: 30px 20px 25px;
	}
	.guide_item {
		flex: 0 1 186px;
		width: auto;
		min-width: 0;
	}
	.guide_arrow {
		flex: none;
		margin: 0 4px;
	}
}


/* ============== SP：ストアボタンを端末OSで出し分け（iPhone→App Store / Android→Google Play） =================== */
/* OSを判別できない場合（PCのDevToolsなど）は両方表示のまま */
@media screen and (max-width: 767px) {
	html.is-ios .app_dl_col--store .store_android,
	html.is-android .app_dl_col--store .store_ios {
		display: none;
	}
}