article.webhook-article section pre code.hljs {font-family :'JetBrainsMono'; letter-spacing: -0.04em;}
article.webhook-article section .tab-box pre code.hljs { background-color: rgb(255, 255, 255); font-weight: 400; }
article.webhook-article .callback-type {display: flex; gap: 10px;}
article.webhook-article .callback-type figure {flex-basis: 50%;}
article.webhook-article .callback-type figure figcaption p ~ p {margin-bottom: 0;}
article.webhook-article .route {font-weight: 700; font-size: 17px; position: relative; padding-left: 10px; display: block; margin: 20px 0;}
article.webhook-article .route:before {content: ''; position: absolute; left: 0; top: 55%;transform: translateY(-50%); width: 3px; height: 90%; background-color: #006cff;}
article.webhook-article .site-route {background-color: #f0f2f4; font-weight: 500; font-size: 90%; padding: 0 6px;}
article.webhook-article h6 {margin-top: 30px;}
article.webhook-article h6.webhook-example {margin-top: 8px;}
article.webhook-article .test-site {color: #f71b42;}
article.webhook-article .prod-site {color: #006cff;}
article.webhook-article #callback-url-regist h6 {font-weight: 500; font-size: 17px;}
article.webhook-article #callback-url-regist h6 ~ p {margin-top: 10px;}
article.webhook-article #webhook-process img + ol {margin-top: 30px;}
article.webhook-article #webhook-process img + ol > li {padding-left: 0;}
article.webhook-article #webhook-process img + ol > li h6 {font-weight: 500; font-size: 18px;}
article.webhook-article #webhook-process img + ol > li p {margin: 10px 0;}
article.webhook-article .panel-box.mt {margin-top: -10px;}
article.webhook-article .panel-box p span {color: #8d8d8d; padding-right: 5px;}
article.webhook-article .panel-box p i {color: #f52929; font-weight: 500;}
article.webhook-article .panel-box .example {margin-top: 30px;}
article.webhook-article .panel-box img.shadow {box-shadow: 0 0 10px 0 rgba(98, 109, 124, 0.14); margin: 10px 0;}


article.webhook-article section .accordion-wrapper {margin: 12px 0 20px; background: #fff; border: solid 1px #d3dce4; border-radius: 5px; overflow: hidden; transition: background-color 0.2s ease;}
article.webhook-article section .accordion-wrapper .accordion-header {display: flex; align-items: center; gap: 6px; padding: 16px; font-weight: 600; font-size: 16px; user-select: none; cursor: pointer; background-color: #fff; transition: background-color 0.2s ease;}
article.webhook-article section .accordion-wrapper .accordion-header:hover {background-color: #FAFAFA;}
article.webhook-article section .accordion-wrapper:has(.accordion-header:hover) {border-color: #D0D0D0;}
article.webhook-article section .accordion-wrapper .accordion-header::before {content: ''; background: url("/images/common/document/icon_accordion_arrow.svg") center/contain no-repeat; transform: rotate(-90deg); display: block; width: 16px; height: 16px; transition: transform 0.2s ease-in-out;}
article.webhook-article section .accordion-wrapper .accordion-content {display: grid; grid-template-rows: minmax(0, 0fr); transition: grid-template-rows 0.2s ease-in-out;}
article.webhook-article section .accordion-wrapper .accordion-content > * {overflow: hidden;}
article.webhook-article section .accordion-wrapper .accordion-content table {margin-top: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table{counter-reset:tr; font-size: 14px; table-layout: fixed;}
article.webhook-article section .accordion-wrapper .accordion-content table tr:not(.nested-wrapper) td:first-child::before{counter-increment : tr;content : counter(tr);}
article.webhook-article section .accordion-wrapper .accordion-content table thead tr th {padding: 8px 10px;}
article.webhook-article section .accordion-wrapper .accordion-content table tbody tr td {padding: 10px;}
article.webhook-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):nth-child(1),
article.webhook-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):nth-child(4),
article.webhook-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):nth-child(5) {text-align: center; padding: 10px 0;}
article.webhook-article section .accordion-wrapper .accordion-content table tr td:not([colspan]):last-child {text-align: left; padding: 10px;}
article.webhook-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(1) { width: 5%; max-width: 5%; min-width: 5%; padding: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(2) { min-width: 15%; }
article.webhook-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(3) { min-width: 13%; }
article.webhook-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(4) { width: 6.5%; max-width: 6.5%; min-width: 6.5%; padding: 0; }
article.webhook-article section .accordion-wrapper .accordion-content table thead tr th:nth-child(5) { width: 6.5%; max-width: 6.5%; min-width: 6.5%; padding: 0; }
article.webhook-article section .accordion-wrapper .accordion-content table thead tr th:last-child { width: 43%; max-width: 43%; }
article.webhook-article section .accordion-wrapper .accordion-content table tr:hover {background: #F6F9FE;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper + tr td {border-top: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td {border: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td {padding: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper {padding: 0 15px; display: grid; grid-template-rows: minmax(0, 0fr); transition: all 0.2s ease-in-out;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper > .nested-table-content {overflow: hidden;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper > .nested-table-content.scroll-polyfill {overflow: visible;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper > .nested-table-content > .header {margin-bottom: 13px; background: url("/images/common/document/icon_depth_arrow.svg") left center no-repeat; padding-left: 20px; font-weight: 500; font-size: 15px; color: #424a57;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper > td > .nested-table-wrapper > .nested-table-content > .body {border: 1px solid rgb(224,224,224); overflow: clip; border-radius: 3px;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper.depth1 > td > .nested-table-wrapper {background: #FAFBFB; scroll-margin-top: var(--headerHeight) + var(--snbHeight, 0px);}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper.depth2 > td > .nested-table-wrapper {background: #F2F2F3;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper.open > td {border-bottom: 1px solid rgb(224, 224, 224);}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper.open > td > .nested-table-wrapper {grid-template-rows: minmax(0, 1fr); padding: 15px;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper table thead tr th:nth-child(1) { width: 4%; max-width: 4%; min-width: 4%; padding: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper table thead tr th {border-top: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table tr.nested-wrapper table tbody tr:last-child td {border-bottom: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table tr:has(+ tr.nested-wrapper:not(.open)):nth-last-child(2) td {border-bottom: 0;}
article.webhook-article section .accordion-wrapper .accordion-content table .clickable {color: rgb(77, 100, 228); position: relative; cursor: pointer;}
article.webhook-article section .accordion-wrapper .accordion-content table .clickable:hover {text-decoration: underline;}
article.webhook-article section .accordion-wrapper .accordion-content table .clickable::after {content: ''; background: url("/images/common/document/icon_open_arrow.svg") no-repeat; display: block; width: 12px; height: 15px; position: absolute; top: 50%; right: -12px; transform: translateY(-50%) rotate(0); transition: transform 0.2s ease;}
article.webhook-article section .accordion-wrapper .accordion-content > table > tbody > tr:last-child > td {border-bottom: 0;}
article.webhook-article section .accordion-wrapper .accordion-content pre {margin: 0;}
article.webhook-article section .accordion-wrapper .accordion-content pre code.hljs {border: 0; border-radius: 0;}
article.webhook-article section .accordion-wrapper.open .accordion-header::before {transform: rotate(0);}
article.webhook-article section .accordion-wrapper.open .accordion-content {grid-template-rows: minmax(0, 1fr);}
article.webhook-article section tr:has(+ tr.nested-wrapper.open) td .clickable::after {transform: translateY(-50%) rotate(-90deg);}

article.webhook-article section .row-table {counter-reset:tr; font-size: 14px; table-layout: fixed;}
article.webhook-article section .row-table tr td:first-child::before {counter-increment : tr;content : counter(tr);}
article.webhook-article section .row-table thead tr th:nth-child(1) { width: 5%; max-width: 5%; min-width: 5%; padding: 0;}
article.webhook-article section .row-table thead tr th:nth-child(2) { width: 23%;}
article.webhook-article section .row-table thead tr th:nth-child(3) { width: 5%; max-width: 5%; min-width: 5%; padding: 0;}
article.webhook-article section .row-table thead tr th:nth-child(4) { width: 28%;}
article.webhook-article section .row-table thead tr th:nth-child(5) { width: 30%;}
article.webhook-article section .row-table tr td:nth-child(1),
article.webhook-article section .row-table tr td:nth-child(3) {text-align: center; padding: 10px 0;}

article.webhook-article section .webhook-event-title {font-size: 20px;}