.flex{display:flex}.is-hidden{display:none!important}body{background:#fff;overflow:auto}a{color:#0086de;text-decoration:none}a:hover{text-decoration:underline}.guide-bbutton-contaier{margin:40px auto;width:960px}.bbutton-container{display:flex;justify-content:space-between}.bbutton-2column{flex-basis:420px;min-width:0}.bbutton-section{margin:0 0 60px}.bbutton-title{align-items:center;color:#00a4de;display:flex;flex:1 1 auto;margin:0 0 30px}.bbutton-title:after{border-bottom:1px solid #00a4de;content:"";display:block;flex:1 0 10%;height:0;margin-left:10px}#guide-headline{margin:0}#guide-headline h2{color:#303030;font-size:19px;font-weight:700;line-height:27px;margin:0 0 15px;padding:10px 0 0}#guide-headline p{color:#666;font-size:15px;line-height:25px;margin:0 0 15px}.guide-headline-inner{background-image:url(/4af54b48a4206ea16424c19bddae05adb5b78d64/images/v4/public/guide/bbutton/main-image@2x.png);background-position:100% 0;background-repeat:no-repeat;background-size:340px 240px;margin:35px 0 0;padding:0 400px 80px 0}.bbutton-design,.bbutton-design li{align-items:center;display:flex}.bbutton-design li{margin:0 30px 0 0}.bbutton-design label:hover{cursor:pointer}.bbutton-design input[type=radio]{margin-right:8px}.bbutton-design input[type=radio]:hover{cursor:pointer}.bbutton-design-label{align-items:center;display:flex;padding:5px 0}.bbutton-setting li{display:flex;margin:0 0 35px;position:relative}.bbutton-setting label:hover{cursor:pointer}.bbutton-setting input[type=radio]{margin-right:8px}.bbutton-setting input[type=radio]:hover{cursor:pointer}.bbutton-setting-label{display:inline-block;font-size:14px;font-weight:700;line-height:24px;margin:0 30px 0 0;text-align:right;width:105px}.bbutton-setting-label span{color:#b3b3b3;display:block;font-size:10px;font-weight:400;line-height:1.2}.bbutton-setting-select{align-items:baseline;display:flex;width:125px}.bbutton-setting-contents{display:flex;flex-direction:column;min-width:0}.bbutton-setting-contents span{margin:0 0 5px}.bbutton-setting-contents .bbutton-setting-textarea.is-invalid+.invalid-error-message{display:block;left:157px;top:64px;width:242px}.bbutton-setting-textarea{border:none;border-bottom:1px solid #ccc;font-size:14px;outline:0;padding:6px 2px;width:240px}.bbutton-setting-textarea:focus{border-bottom:1px solid #00a4de}.bbutton-setting-textarea-value{border:none;border-bottom:1px solid #ccc;font-size:14px;outline:0;padding:6px 2px;text-align:center;width:65px}.bbutton-setting-textarea-value:focus{border-bottom:1px solid #00a4de}.bbutton-setting-textarea-value.is-invalid+.invalid-error-message{display:block;left:250px;top:2px;width:210px}.invalid-error-message{background-color:#ffeaee;border:1px solid #ff7790;color:#ff7790;display:none;font-size:12px;line-height:18px;padding:5px 0;position:absolute;text-align:center}.bbutton-setting-px{color:rgba(70,82,94,.8);font-size:14px;margin:8px 15px 0}.preview{align-items:center;background-color:#eee;border:1px solid #ddd;border-radius:3px;display:flex;height:140px;justify-content:center;text-align:center}.preview-area{line-height:1}#codegen{border:1px solid #ddd;border-radius:3px;box-sizing:border-box;color:#666;font:10px Courier,monospace;height:111px;line-height:16px;outline:0;padding:8px 12px;resize:none;width:100%;word-break:break-all}.bbutton-note{font-size:12px;line-height:1.4;margin:4px 0 6px}#guide-rule{border-top:1px solid #eee;color:#666;font-size:13px;padding:18px 0 0 16px;position:relative}.is-button-no-label .js-lang-setting{display:none}