@charset "UTF-8";

.note-content {
    padding: 40px 0;
}
.note-content .note-width-wrap {
    width: 640px;
    margin: auto;
}

.note-content .note-title {
    font-family: 'Noto Serif', serif;
    font-size: 28px;
    font-weight: bold;
    line-height: 40px;
    color: #333;
    margin-bottom: 40px;
}

.note-content .section-content {
    font-size: 20px;
}

.note-content .note-section {
    position: relative;
}


.note-section + .note-section {
    margin-top: 100px;
}
.note-section > .section-separate {
    display: none;
}
.note-section + .note-section > .section-separate {
    display: block;
    position: absolute;
    width: 100%;
    top: -50px;
    transform: translateY(-50%);
}
.section-separate ins {
    display: block;
    position: relative;
    background: #dedede !important;
}
.section-separate[theme="small"] ins {
    height: 2px;
}
.section-separate[theme="medium"] ins {
    height: 4px;
}
.section-separate[theme="large"] ins {
    height: 6px;
}







.note-section .section-icon {
    position: relative;
}
.note-section[section-type="list"] .section-icon:before,
.note-section[section-type="list-inline"] .section-icon:before {
    content: attr(data-list-value);
}
.note-section[section-type="list"] .section-icon,
.note-section[section-type="list-inline"] .section-icon {
    float: left;
    font-weight: bold;
    font-size: 24px;
    background: #2096ff;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 5px;
    color: #fff;
    position: absolute;
    right: calc(100% + 30px);
    top: 5px;
}
.note-section[section-type="list-inline"] .section-icon {
    margin: 7px 20px 10px 0;
    position: relative;
    top: initial;
    right: initial;
}

.note-section[section-type="date"] .section-icon,
.note-section[section-type="date-time"] .section-icon {
    width: 70px;
    text-align: right;
    box-sizing: border-box;
    position: absolute;
    right: calc(100% + 30px);
    top: 5px;
    border-right: 1px solid #ddd;
    padding-right: 10px;
}
.note-section[section-type="date-time"] .section-icon {
    width: 125px;
}

.note-section[section-type="date"] .section-icon {
    cursor: pointer;
}
.note-section[section-type="date"] .section-icon .date-month {
    font-size: 16px;
    display: table;
    margin: 0 0 5px auto;
    position: relative;
}
.note-section[section-type="date"] .section-icon .year {
    font-size: 14px;
    font-weight: bold;
    display: table;
    margin: 0 0 0 auto;
    position: relative;
    color: #333;
}

.note-section[section-type="date-time"] .section-icon .date {
    font-size: 16px;
    font-weight: bold;
    display: table;
    margin: 0 0 0 auto;
    position: relative;
    cursor: pointer;
}
.note-section[section-type="date-time"] .section-icon .time {
    content: attr(data-time);
    font-size: 14px;
    display: table;
    margin: 0 0 5px auto;
    position: relative;
    cursor: pointer;
}




.note-section .osc-editor-style .align-left[align-level="2"] {
    margin-left: -86px !important;
}
.note-section .osc-editor-style .align-right[align-level="2"] {
    margin-right: -86px !important;
}
.note-section .osc-editor-block-image,
.note-section .osc-editor-autosize-textbox {
    width: auto !important;
}
.note-section .osc-editor-block-image:not(.align-left):not(.align-right),
.note-section .osc-editor-autosize-textbox:not(.align-left):not(.align-right) {
    max-width: 100% !important;
}
.note-section .osc-editor-block-image[align-level="1"],
.note-section .osc-editor-autosize-textbox[align-level="1"] {
    max-width: 360px !important;
}
.note-section .osc-editor-block-image[align-level="2"],
.note-section .osc-editor-autosize-textbox[align-level="2"] {
    max-width: 450px !important;
}

.note-section .osc-editor-embed-block:not(.align-left):not(.align-right) .content {
    width: 640px !important;
    height: 360px !important;
}
.note-section .osc-editor-embed-block[align-level="1"] .content {
    width: 360px !important;
    height: 202px !important;    
}
.note-section .osc-editor-embed-block[align-level="2"] .content {
    width: 450px !important;
    height: 253px !important;    
}

.note-section .osc-editor-block-image.overflow-mode:not(.align-left):not(.align-right),
.note-section .osc-editor > .edit-area .osc-editor-block-image.overflow-mode:not(.align-left):not(.align-right) {
    width: calc(100% + 170px) !important;
    max-width: unset !important;
}
.note-section .osc-editor-block-image.full-mode:not(.align-left):not(.align-right),
.note-section .osc-editor > .edit-area .osc-editor-block-image.full-mode:not(.align-left):not(.align-right) {
    width: 1000px !important;
    max-width: unset !important;
}







.note-content.mobile-version {
    padding: 0;
}
.note-content.mobile-version .note-width-wrap {
    width: calc(100vw - 40px);
    margin: auto;
}
.note-content .osc-editor-block-image:first-child,
.note-content .osc-editor > .edit-area .osc-editor-block-image:first-child {
    margin-top: 0;
}
.note-content.mobile-version .osc-editor-style .align-left[align-level="2"] {    
    margin-left: 0 !important;
}
.note-content.mobile-version .osc-editor-style .align-right[align-level="2"] {    
    margin-right: 0 !important;
}
.note-content.mobile-version .note-section .osc-editor-block-image[align-level="1"],
.note-content.mobile-version .note-section .osc-editor-autosize-textbox[align-level="1"],
.note-content.mobile-version .note-section .osc-editor-block-image[align-level="2"],
.note-content.mobile-version .note-section .osc-editor-autosize-textbox[align-level="2"] {
    max-width: 200px !important;
}
.note-content.mobile-version .note-section .osc-editor-block-image.overflow-mode:not(.align-left):not(.align-right),
.note-content.mobile-version .note-section .osc-editor > .edit-area .osc-editor-block-image.overflow-mode:not(.align-left):not(.align-right),
.note-content.mobile-version .note-section .osc-editor-block-image.full-mode:not(.align-left):not(.align-right),
.note-content.mobile-version .note-section .osc-editor > .edit-area .osc-editor-block-image.full-mode:not(.align-left):not(.align-right) {
    width: 100vw !important;
    max-width: unset !important;
}

.note-content.mobile-version .section-content {
    font-size: 16px;
    line-height: 24px;
}