@charset "utf-8";
:root { --cqw: 1px; }
html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; }
body { min-height: 100vh; line-height: 1.5; }
html, body { margin: 0; padding: 0; width: 100%; overflow-x: hidden; }
#bf2026 { container-type: inline-size; font-family: "Noto Sans JP", "Inter", sans-serif; background: var(--c-wt); --c-wt: #fff; --c-cp: #c90436; --c-cp2: #aa0a33; --c-bu: #1d2b4b; --c-lbu: #889bc5; --c-gn: #0e7986; --c-yl: #f2f2f2; --c-yl2: #d3d3d3; --c-yl3: #e8e8e8; --c-c1: #03457A; --c-c2: #fff6e8; --c-c3: #c5c5c5; --c-c4: #d3e6f8; --c-c5: #b7d1b2; --c-c6: #a8cade; --c-c7: #c2adcf; --c-c8: #bababa; --c-c9: #c5b1a0; --c-c10: #8b6143;  --c-gb: #555; --c-gb2: #333; --c-gd: #c9a960; --c-yl2: #d3d3d3; --c-ly: #f6f5f3; --c-lg: #d0d0d0; --c-lg2:#b8b8b8;  --c-gl: #727271; --c-gy: #9c9c9c; --c-dg: #0a0a0a; width: 100%; }
#bf2026 *, #bf2026 *::before, #bf2026 *::after { box-sizing: border-box; margin: 0; padding: 0; }

.--item-box {margin: 0 auto; /*border:var(--c-bu) 1px solid; overflow: hidden; background: linear-gradient(90deg, #FFF8ED 0%, #FFFFFF 15%, #FFFFFF 85%, #FFF8ED 100%);*/ /*background:var(--c-yl);*/ box-sizing: border-box; background: var(--c-dg);}
.--item-box .toggle-accordion { display: none; }
.--item-box .header-container { display: flex; align-items: center; background: var(--c-bu); color: var(--c-wt); cursor: pointer; position: relative; user-select: none; box-sizing: border-box; }
.--item-box h2 {font-weight: bold; line-height: 1.1; background: linear-gradient(180deg, #D79F4F 0%, #F4DB85 50%, #D79F4F 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.--item-box h2 + p{line-height: 1.5; margin: 0; }
.--item-box .arrow-icon { position: absolute; transform: rotate(-90deg) /*translateY(-25%) rotate(-45deg)*/; transition: transform 0.3s ease;}
.--item-box .arrow-icon::before {content: "＞"; display: block;}
.--item-box ul.list { list-style: none; /*max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease;*/ }
.--item-box .toggle-accordion:checked ~ ul.list { max-height: 1900px; }
.--item-box .toggle-accordion:not(:checked) ~ .header-container .arrow-icon { transform: rotate(90deg)  /*translateY(-75%) rotate(135deg)*/; }
.--item-box ul.list li.box {box-sizing: border-box; border: 2px solid transparent; background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(to bottom, #C18A42 0%, #F3C56D 50%, #C18A42 100%); background-origin: border-box; background-clip: padding-box, border-box;}
.--item-box .product { display: flex; align-items: center;}
.--item-box .first { /*width: 45%;*/ display: flex; align-items: center; justify-content: center;}
.--item-box .second { width: 55%; }
.--item-box .first img { width: 100%; height: auto; object-fit: contain; }
.--item-box .product-name { font-weight: bold; color: var(--c-bu); }
.--item-box .price{ display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0 0 12px 0; }
.--item-box .price .old { color: var(--c-bu); }
.--item-box .price .new { font-weight: bold; color: var(--c-cp); }
.--item-box .price .tag { color: var(--c-wt); font-weight: bold; background: var(--c-cp);}
.--item-box .trial-container { color: var(--c-bu); box-sizing: border-box; list-style: none;}
.--item-box .trial-container li { display: flex; justify-content: space-between; align-items: center; font-weight: 500; background-color: var(--c-yl); }
/*.--item-box .trial-container li + li { border-top: 1px dashed rgba(26, 41, 54, 0.15); }*/
.--item-box .trial-container span::before { content: "◆ "; color: var(--c-gd2); margin-right: 2px; }
.--item-box .trial-container a { border: 1px solid  var(--c-bu);/*border: 1px solid transparent;*/ color: var(--c-gd2); padding-right: 2.25em!important; border-radius: 20px; background: url('../../../images/campaign/blackfriday2026/icon_link_b.webp') var(--c-wt) no-repeat calc(100% - .75em) .25em  / auto 75%; /*background-image: linear-gradient(#ffffff, #ffffff), linear-gradient(90deg, #D79F4F 0%, #F4DB85 50%, #D79F4F 100%); background-origin: border-box; background-clip: content-box, border-box;*/ text-decoration: none; transition: opacity 0.2s; display: inline-block; }
.--item-box .trial-container a:hover { opacity: 0.8; }
.--item-box .options-container { display: flex; flex-wrap: wrap;}
.--item-box .option-group { border: none; display: flex; flex-direction: column; margin: 0; padding: 0; }
.--item-box .option-label {color: var(--c-bu); margin: 0 0 4px 0; }
.--item-box .radio-buttons input, .--item-box .color-buttons input { display: none; }
.--item-box .radio-buttons { display: flex; gap: 7px; }
.--item-box .radio-buttons span { display: inline-block; background: var(--c-wt); border: 1px solid var(--c-gb); border-radius: 5px; text-align: center; cursor: pointer; user-select: none; box-sizing: border-box; padding: 0 .75em!important; }
.--item-box .radio-buttons input:checked + span { border-color: var(--c-bu); font-weight: bold; background: var(--c-yl); font-weight: 500;}
.--item-box .size-desc {color: var(--c-bu); display: block; width: 100%; order: 3; white-space: pre-wrap;}
.--item-box .color-buttons { display: flex; gap: 4px; }
.--item-box .color-dot {border-radius: 50%; border: 1px solid var(--c-gb); display: inline-block; cursor: pointer; box-sizing: border-box;}
.--item-box .--c1 { background: var(--c-c1);}
.--item-box .--c2 { background: var(--c-c2);}
.--item-box .--c3 { background: var(--c-c3);}
.--item-box .--c4 { background: var(--c-c4);}
.--item-box .--c5 { background: var(--c-c5);}
.--item-box .--c6 { background: var(--c-c6);}
.--item-box .--c7 { background: var(--c-c7);}
.--item-box .--c8 { background: var(--c-c8);}
.--item-box .--c9 { background: var(--c-c9);}
.--item-box .--c10 { background: var(--c-c10);}
.--item-box .color-buttons input:checked + .color-dot { border: 1px solid var(--c-bu); box-shadow: inset 0 0 0 2px var(--c-wt);}
.--item-box .button-container { display: flex; gap: 10px; }
.--item-box .button-container button, .--item-box .button-container a { flex: 1; font-weight: bold; cursor: pointer; box-sizing: border-box; text-decoration: none; display: flex; align-items: center; justify-content: center; background-repeat: no-repeat; transition: opacity 0.2s; }
.--item-box .btn-cart { background: var(--c-bu); color: var(--c-wt); border: none; background-image: url('../../../images/campaign/blackfriday2026/icon-cart.webp'); }
.--item-box .btn-detail { background: var(--c-wt); color: var(--c-bu); border: 1px solid var(--c-bu); background-image: url('../../../images/campaign/blackfriday2026/icon-more.webp');}

#bf2026 .item-box > h2 { background: var(--c-bu); box-sizing: border-box; width: 100%; text-align: left; margin: 0; /*font-size: clamp(17px, calc(17px + (100vw - 375px) * (25 - 17) / (1280 - 375)), 25px);*/ color:var(--c-wt); padding: .5em 0;}
#bf2026 .item-box > h2 span{display: block; color:var(--c-wt);}

#bf2026 .--inr { width: 100%; margin: 0 auto; display: block; }
#bf2026 section{max-width: 1280px; margin: 0 auto; width: 100%; box-sizing: border-box;}
#bf2026 section#bar{max-width: none;}

#bf2026 #bar { background: var(--c-gd); color: var(--c-bu); text-align: center; font-weight: 700; letter-spacing: 0.05em; z-index: 10; width: 100%; display: flex; align-items: center; justify-content: center; line-height: 1.2; }
#bf2026 #bar.is-fixed { position: fixed; left: 0; }

#bf2026 #kv h1, #bf2026 #kv picture, #bf2026 #kv img { display: block; width: 100%; height: auto; }

#bf2026 h2{/*font-size: clamp(21px, calc(21px + (100vw - 375px) * (28 - 21) / (1280 - 375)), 28px); margin-bottom: 1em;*/ color:var(--c-bu); font-weight: 700; letter-spacing: 0.02em; margin-bottom: .6em; text-align: center;}
#bf2026 .sub-ttl{/*font-size: clamp(14px, calc(14px + (100vw - 375px) * (22 - 14) / (1280 - 375)), 22px);*/ color:var(--c-gn); font-weight: 700; font-family: "Inter", sans-serif;}

#bf2026 #message p{line-height: 1.6; text-align: center;}

@media (min-width: 768px) {
.--sp{display: none;}
.--item-box {/*border-radius: calc(20 * var(--cqw)); margin-bottom: calc(30 * var(--cqw))!important; padding: 30px 0!important;*/  padding: 2em 0!important;}
.--item-box .header-container {padding: calc(20 * var(--cqw)) calc(30 * var(--cqw))!important;}
.--item-box h2 {font-size:calc(62 * var(--cqw)); padding-right: calc(20 * var(--cqw))!important;}
.--item-box h2 + p{font-size:calc(29 * var(--cqw))!important;}
/*.--item-box .arrow-icon { right: calc(30 * var(--cqw)); top: calc(30 * var(--cqw)); width: calc(30 * var(--cqw)); height: calc(30 * var(--cqw)); border-top: calc(4 * var(--cqw)) solid var(--c-wt); border-right: calc(4 * var(--cqw)) solid var(--c-wt);}*/
.--item-box .arrow-icon { font-size:calc(33 * var(--cqw)); right: calc(20 * var(--cqw)); top: calc(10 * var(--cqw)); }
.--item-box .toggle-accordion:checked ~ ul.list { max-height: 1200px; padding: calc(30 * var(--cqw))!important;}
.--item-box ul.list li { border: calc(0 * var(--cqw)) solid transparent; border-radius: calc(10 * var(--cqw));}
.--item-box ul.list li + li{margin-top: calc(10 * var(--cqw))!important;/*margin-top: calc(25 * var(--cqw))!important;*/}
.--item-box .first {padding: calc(20 * var(--cqw)) calc(20 * var(--cqw)) calc(20 * var(--cqw)) calc(20 * var(--cqw))!important;}
.--item-box .second {padding: calc(20 * var(--cqw)) calc(20 * var(--cqw)) calc(20 * var(--cqw)) 0!important;}
.--item-box .product-name { font-size:calc(26 * var(--cqw));/*font-size:calc(21 * var(--cqw));*/}
.--item-box .price .old { font-size:calc(22 * var(--cqw)); }
.--item-box .price .new { font-size:calc(44 * var(--cqw)); }
.--item-box .price .tag { font-size:calc(20 * var(--cqw)); padding: 0 calc(10 * var(--cqw))!important; border-radius: calc(10 * var(--cqw));}
.--item-box .trial-container { font-size:calc(19 * var(--cqw)); border-radius: calc(10 * var(--cqw)); padding: calc(5 * var(--cqw)) 0!important; margin: calc(20 * var(--cqw)) 0!important;}
.--item-box .trial-container li{padding: calc(10 * var(--cqw)) calc(20 * var(--cqw)) !important;/*padding: calc(5 * var(--cqw)) calc(20 * var(--cqw)) !important;*/}
.--item-box .options-container { font-size:calc(19 * var(--cqw)); gap: 0 calc(30 * var(--cqw)) ;}
.--item-box .size-desc {margin-bottom: calc(20 * var(--cqw))!important;}
.--item-box .radio-buttons input + span { min-width: calc(64 * var(--cqw)); line-height: calc(41 * var(--cqw));}
.--item-box .color-dot { width: calc(41 * var(--cqw)); height: calc(41 * var(--cqw));}
.--item-box .button-container button, .--item-box .button-container a { font-size:calc(20 * var(--cqw)); /*font-size:calc(22 * var(--cqw));*/  height: calc(55 * var(--cqw)); border-radius: calc(27.5 * var(--cqw)); font-weight: bold; background-position: left calc(20 * var(--cqw)) center; background-size: auto calc(38 * var(--cqw)); padding-left: calc(48 * var(--cqw))!important; }
.--item-box .--cut{opacity: 0; pointer-events: none;}

#bf2026 h2{font-size:calc(43 * var(--cqw));}
#bf2026 .sub-ttl{font-size:calc(22 * var(--cqw));}
#bf2026 .--item-box h2{font-size:calc(25 * var(--cqw));}
#bf2026 .--item-box .sub-ttl{font-size:calc(22 * var(--cqw));}

#bf2026 #message { padding: 2em 0; }
#bf2026 #message p{font-size:calc(22 * var(--cqw));}


}

@media (min-width: 1024px) {
  #bf2026 .--inr { max-width: 1024px; padding-left: 12px; padding-right: 12px; }
  #bf2026 #bar { min-height: 30px; font-size: 17.5px; padding-top: 4px; padding-bottom: 4px; }
}

@media (max-width: 1023px) and (min-width: 768px) {
  :root { --cqw: calc(100cqw / 1024); }
  #bf2026 .--inr { max-width: calc(1024 * var(--cqw)); padding-left: 1.5%; padding-right: 1.5%; }
  #bf2026 #bar { top: 90px;/*top: 91.4px;*/ min-height: calc(30 * var(--cqw)); font-size: calc(17.5 * var(--cqw)); padding-top: calc(4 * var(--cqw)); padding-bottom: calc(4 * var(--cqw)); }
}

@media (max-width: 767px) {
:root { --cqw: calc(100cqw / 375); }

.--pc{display: none;}
.--item-box {/*border-radius: calc(10 * var(--cqw)); margin-bottom: calc(20 * var(--cqw))!important;*/ padding: 20px 0!important;}
.--item-box .header-container {padding: calc(10 * var(--cqw)) calc(12 * var(--cqw))!important;}
.--item-box h2 {font-size:calc(23 * var(--cqw)); padding-right: calc(10 * var(--cqw))!important;}
.--item-box h2 + p{font-size:calc(12 * var(--cqw))!important; padding-right: calc(10 * var(--cqw))!important;}
.--item-box .arrow-icon { font-size:calc(13 * var(--cqw)); right: calc(10 * var(--cqw)); top: calc(10 * var(--cqw)); }
.--item-box .toggle-accordion:checked ~ ul.list { padding: calc(18 * var(--cqw))!important;}
.--item-box ul.list li { border: calc(0 * var(--cqw)) solid transparent; border-radius: calc(10 * var(--cqw));}
.--item-box ul.list li + li{margin-top: calc(5 * var(--cqw))!important;/*margin-top: calc(25 * var(--cqw))!important;*/}
.--item-box .product { flex-direction: column; }
.--item-box .first, .--item-box .second { width: 100%; }
.--item-box .first {padding: calc(10 * var(--cqw)) !important;}
.--item-box .second {padding: 0 calc(10 * var(--cqw)) calc(10 * var(--cqw)) calc(10 * var(--cqw))!important;}
.--item-box .product-name { font-size:calc(16 * var(--cqw));/*font-size:calc(15 * var(--cqw));*/}
.--item-box .price .old { font-size:calc(14 * var(--cqw)); }
.--item-box .price .new { font-size:calc(28 * var(--cqw)); }
.--item-box .price .tag { font-size:calc(13 * var(--cqw)); padding: 0 calc(5 * var(--cqw))!important; border-radius: calc(5 * var(--cqw));}
.--item-box .trial-container { font-size:calc(12 * var(--cqw)); border-radius: calc(5 * var(--cqw)); padding: calc(5 * var(--cqw)) 0!important; margin: calc(10 * var(--cqw)) 0!important;}
.--item-box .trial-container li{padding: calc(10 * var(--cqw)) calc(10 * var(--cqw)) !important;/*padding: calc(5 * var(--cqw)) calc(10 * var(--cqw)) !important;*/}
.--item-box .options-container { font-size:calc(12 * var(--cqw)); gap: 0 calc(15 * var(--cqw)) ; margin-bottom: calc(10 * var(--cqw))!important;}
.--item-box .option-group {  order: 2!important; }
.--item-box .size-desc {margin-bottom: calc(10 * var(--cqw))!important;  order: 2!important;}
.--item-box .radio-buttons { gap: 4px; }
.--item-box .radio-buttons input + span { min-width: calc(40 * var(--cqw)); line-height: calc(26 * var(--cqw));}
.--item-box .color-dot { width: calc(26 * var(--cqw)); height: calc(26 * var(--cqw));}
.--item-box .button-container button, .--item-box .button-container a { font-size:calc(12.5 * var(--cqw));  height: calc(35 * var(--cqw)); border-radius: calc(17.5 * var(--cqw)); font-weight: bold; background-position: left calc(12 * var(--cqw)) center; background-size: auto calc(23 * var(--cqw)); padding-left: calc(33 * var(--cqw))!important; }
.--item-box .button-container { gap: calc(8 * var(--cqw)); }
.--item-box .--cut{ height: 0; opacity: 0; pointer-events: none; padding-bottom: 1em;;}

#bf2026 h2{font-size:calc(19 * var(--cqw));}
#bf2026 .sub-ttl{font-size:calc(14 * var(--cqw));}
#bf2026 .--item-box h2{font-size:calc(17 * var(--cqw));}

#bf2026 .--inr { padding-left: 4.5%; padding-right: 4.5%; }

#bf2026 #message { padding: 1em 0; }
#bf2026 #message p{font-size:calc(14 * var(--cqw));}

}