.box_design {
    border-radius: 6px;
    margin: 1.8rem 0;
}

.box_design a {
    cursor: pointer;
}

.box_design .header {
    font-weight: 700;
    border-bottom: 1px dotted #000;
    color: #000;
    width: 96%;
    position: relative;
    padding: 1.2rem 3.6rem;
    line-height: 2.8rem;
}

.box_design .header:before {
    display: inline-block;
    content: "";
    width: 2rem;
    height: 3px;
    background-color: #000;
    vertical-align: middle;
    margin-right: 0.6rem;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 0;
}

.box_design .content {
    padding: 1.2rem 3rem;
}

.box_design ul {
    counter-reset: item;
    list-style-type: none;
    padding: 0;
}

.box_design ul li {
    counter-reset: item;
    list-style-type: none;
    text-indent: -2rem;
    padding-left: 2rem;
    font-size: 14px;
}

.box_design ul li a {
    font-size: 14px;
}

.box_design ol {
    counter-reset: item;
    list-style-type: none;
    padding: 0;
}

.box_design ol li {
    list-style-type: none;
    text-indent: -1.8rem;
    padding-left: 1rem;
    font-size: 14px;
}

.box_design ol li a {
    font-size: 14px;
}

.box_design li:not(:last-child) {
    margin-bottom: 0.4rem;
}

.box_design ul li:before {
    display: inline-block;
    counter-increment: item;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    font-size: 1.3rem;
    text-align: center;
    margin-right: 0.8rem;
    text-indent: 0;
    padding-left: 0;
}

.box_design ol li:before {
    display: inline-block;
    counter-increment: item;
    content: counter(item) ".";
    min-width: 2.4rem;
    border-radius: 50%;
    font-size: 1.6rem;
    text-align: center;
    text-indent: 0;
    padding-left: 0;
    font-style: italic;
    font-weight: 700;
}

.pink_box {
    background-color: #ffe2de;
}

.pink_box ul li:before {
    color: #fff;
    border: 3px solid #f26969;
}

.pink_box ol li:before {
    color: #333;
}

.gray_box {
    background-color: #f4f6f8;
}

.gray_box ul li:before {
    color: #fff;
    border: 3px solid #444;
}

.gray_box ol li:before {
    color: #333;
}

.yellow_box {
    background-color: #fff7d5;
}

.yellow_box ul li:before {
    border: 3px solid #008ad3;
    background-color: #fff7d5;
}

.yellow_box ol li:before {
    color: #333;
}

.white_box {
    background-color: #fff;
    border: 1px solid #b4b4b4;
}

.white_box ul li:before {
    border: 3px solid #008ad3;
    background-color: #fff;
}

.white_box ol li:before {
    color: #333;
}

.doubleline_yellow_box {
    padding: 8px 19px;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-top: solid 5px #ffc06e;
    border-bottom: solid 5px #ffc06e;
}

.doubleline_red_box {
    padding: 8px 19px;
    margin: 2em 0;
    color: #ff7d6e;
    background: #ffebe9;
    border-top: solid 5px #ff7d6e;
    border-bottom: solid 5px #ff7d6e;
}

.doubleline_blue_box {
    padding: 8px 19px;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;
    border-top: solid 5px #5989cf;
    border-bottom: solid 5px #5989cf;
}
.doubleline_yellow_box p{
    margin-bottom: 0px !important;
}
.doubleline_red_box p{
    margin-bottom: 0px !important;
}
.doubleline_blue_box p{
    margin-bottom: 0px !important;
}

.aff_box_blue {
    background: linear-gradient(90deg, #a1c4fd, #c2e9fb);
    border-radius: 0;
    padding: 2rem 2%;
}

.aff_box_blue .header {
    text-align: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 90%;
    line-height: 2.2rem;
    margin: 0 auto;
}

.aff_box_blue .header:before {
    display: none;
}

.aff_box_blue .content {
    padding: 0;
    margin-top: 1.4rem;
}

.aff_box_blue ul li {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    padding: 6px 6px 6px 3rem;
    font-size: 1.5rem;
}

.aff_box_blue ul li:hover,
.aff_box_yellow ul li:hover,
.aff_box_pink ul li:hover,
.aff_box_green ul li:hover {
    background-color: #fffec6;
    transition: 0.4s;
}

.aff_box_blue a,
.aff_box_yellow a,
.aff_box_pink a,
.aff_box_green a {
    color: #008ad3 !important;
}

.aff_box_blue ul li:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #008ad3;
    margin-left: 6px;
}

.aff_box_blue ol li:before {
    color: #333;
}

.aff_box_blue ul li:not(:last-child) {
    margin-bottom: 1.4rem;
}

.aff_box_yellow {
    background: linear-gradient(90deg, #d6e3e8, #fbfbee);
    border-radius: 0;
    padding: 2rem 2%;
}

.aff_box_yellow .header {
    text-align: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 90%;
    line-height: 2.2rem;
    margin: 0 auto;
}

.aff_box_yellow .header:before {
    display: none;
}

.aff_box_yellow .content {
    padding: 0;
    margin-top: 1.4rem;
}

.aff_box_yellow ul li {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    padding: 6px 6px 6px 3rem;
    font-size: 1.5rem;
}

.aff_box_yellow ul li:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #008ad3;
    margin-left: 6px;
}

.aff_box_yellow ol li:before {
    color: #333;
}

.aff_box_yellow ul li:not(:last-child) {
    margin-bottom: 1.4rem;
}

.aff_box_pink {
    background: linear-gradient(90deg, #ffc2cb, #fdf0e9);
    border-radius: 0;
    padding: 2rem 2%;
}

.aff_box_pink .header {
    text-align: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 90%;
    line-height: 2.2rem;
    margin: 0 auto;
}

.aff_box_pink .header:before {
    display: none;
}

.aff_box_pink .content {
    padding: 0;
    margin-top: 1.4rem;
}

.aff_box_pink ul li {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    padding: 6px 6px 6px 3rem;
    font-size: 1.5rem;
}

.aff_box_pink ul li:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #008ad3;
    margin-left: 6px;
}

.aff_box_pink ol li:before {
    color: #333;
}

.aff_box_pink ul li:not(:last-child) {
    margin-bottom: 1.4rem;
}

.aff_box_green {
    background: linear-gradient(90deg, #94e9c2, #e0ebba);
    border-radius: 0;
    padding: 2rem 2%;
}

.aff_box_green .header {
    text-align: center;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    width: 90%;
    line-height: 2.2rem;
    margin: 0 auto;
}

.aff_box_green .header:before {
    display: none;
}

.aff_box_green .content {
    padding: 0;
    margin-top: 1.4rem;
}

.aff_box_green ul li {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.3);
    padding: 6px 6px 6px 3rem;
    font-size: 1.5rem;
}

.aff_box_green ul li:before {
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #008ad3;
    margin-left: 6px;
}

.aff_box_green ol li:before {
    color: #333;
}

.aff_box_green ul li:not(:last-child) {
    margin-bottom: 1.4rem;
}

.guest_box {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    background-color: #f4f6f8;
}

.guest_box .guest_name {
    background: -moz-linear-gradient(left, #008ad3, #59b2e1);
    background: -webkit-linear-gradient(left, #008ad3, #59b2e1);
    background: linear-gradient(to right, #008ad3, #59b2e1);
    padding: 2rem;
    font-weight: 700;
    font-size: 1.8rem;
}

.guest_box .guest_name p {
    color: #fff;
}

.guest_box .view_box {
    display: flex;
    padding: 2rem 2rem 0;
}

.guest_box .image {
    padding-right: 1.2rem;
}

.guest_box .image img {
    border: 3px solid #fff;
    border-radius: 50%;
    width: 108px;
    height: auto;
    margin-bottom: -6rem;
}

.guest_box .belongs {
    margin-left: 142px;
    font-weight: 700;
    padding-right: 2rem;
}

.guest_box .introduction {
    padding: 3rem 6.6rem 2rem;
    font-size: 1.5rem;
}

.talk_box {
    box-shadow: 0 0 8px #b7b7b7;
    border-radius: 6px;
    padding: 1.4rem 1.2rem;
    margin: 2.2rem 0;
}

.talk_box .author {
    color: #008ad3;
    font-weight: 700;
}

.talk_box .guest {
    color: tomato;
    font-weight: 700;
}

.after_interview .header {
    color: #008ad3;
}

.after_interview .header:before {
    background-color: #008ad3;
}

.after_interview .content {
    display: flex;
}

.after_interview .image {
    width: 30%;
    display: flex;
    align-items: center;
}

.after_interview .image img {
    width: 100%;
    height: auto;
}

.after_interview .image~.sentence {
    width: 70%;
    padding: 0 2rem;
}

#add_chat {
    margin: 2.4rem 0;
}

#add_chat .chat_header {
    color: #008ad3;
    font-weight: 700;
    font-size: 2rem;
    border: 1px solid #b4b4b4;
    padding: 1.6rem;
}

#add_chat .chat_header span {
    color: #008ad3;
    font-size: 2.4rem;
}

#add_chat .chat_header {
    position: relative;
    display: inline-block;
    margin: 1rem 0;
    padding: 7px 10px;
    width: 100%;
    color: #444;
    border: solid 3px #008ad3;
    box-sizing: border-box;
    text-align: center;
    border-radius: 6px;
}

#add_chat .chat_header:before {
    content: "";
    position: absolute;
    bottom: -24px;
    left: 50%;
    margin-left: -15px;
    border: 12px solid transparent;
    border-top: 12px solid #fff;
    z-index: 2;
}

#add_chat .chat_header:after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 50%;
    margin-left: -17px;
    border: 14px solid transparent;
    border-top: 14px solid #008ad3;
    z-index: 1;
}

#add_chat .query_box {
    display: none;
    border: 1px solid #b4b4b4;
    padding: 2rem 4rem;
    margin: 1.2rem 0;
    border-radius: 6px;
}

#add_chat .query_box>div {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: space-around;
}

.cf:after,
.comment-respond:after,
.widget ul li:after {
    clear: both;
}

#add_chat .query_box .error {
    display: block;
    width: 100%;
    color: tomato;
    font-weight: 700;
}

#add_chat .query_box .kick_next {
    width: 90%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
    background: #008ad3;
    padding: 1rem 0;
    border-radius: 6px;
    color: #fff;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid #008ad3;
}

#add_chat .query_box label {
    flex-basis: 47%;
    box-sizing: border-box;
    margin-bottom: 20px;
    text-align: left;
    display: flex;
    align-items: center;
    border-radius: 50px;
}

#add_chat .chat_box {
    display: block;
    padding-left: 88px;
    background-image: url("/magazines/img/article_detail/shortcode/ad_series/chat_lady.png");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: left 10px;
    background-size: 84px auto;
}

#add_chat .chat_box:not(:first-child) {
    display: none;
}

#add_chat .chat_box {
    margin: 10px 0;
}

#add_chat .balloon2-left {
    position: relative;
    display: inline-block;
    margin: 1.5em 0 1.5em 15px;
    padding: 7px 10px;
    min-width: 120px;
    max-width: 100%;
    color: #555;
    font-size: 16px;
    background: #fff;
    border: solid 2px #b4b4b4;
    box-sizing: border-box;
    border-radius: 6px;
}

#add_chat .balloon2-left strong {
    color: #008ad3;
}

#add_chat .balloon2-left:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    margin-top: -12px;
    border: 12px solid transparent;
    border-right: 12px solid #fff;
    z-index: 2;
}

#add_chat .balloon2-left:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -29px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #b4b4b4;
    z-index: 1;
}

#add_chat .balloon2-left p {
    margin: 0;
    padding: 0;
}

#add_chat .query_box .sex .male {
    background: #d3f0ff;
    border: 2px solid #008ad3;
}

#add_chat .query_box .sex .male:after {
    border: 2px solid #008ad3;
}

#add_chat .query_box .sex .female {
    background: #fcd4e4;
    border: 2px solid #fc8cb4;
}

#add_chat .query_box .sex .female:after {
    border: 2px solid #fc8cb4;
}

#add_chat input[type="checkbox"],
#add_chat input[type="radio"] {
    display: none;
}

#add_chat .checkbox,
#add_chat .radio {
    box-sizing: border-box;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    position: relative;
    display: block;
    margin: 0 0 8px;
    padding: 12px 12px 12px 40px;
    vertical-align: middle;
    cursor: pointer;
    background-color: #fff;
    border: 2px solid #a9b7dc;
    color: #333;
}

#add_chat .checkbox:hover,
#add_chat .radio:hover {
    background-color: #ffe653;
}

#add_chat input[type="radio"]:checked+label {
    background-color: #fff99a;
}

#add_chat .checkbox:hover:after,
#add_chat .radio:hover:after {
    border-color: #999;
    border: 2px solid #a9b7dc;
}

#add_chat .radio:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 12px;
    display: block;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border: 2px solid #bbb;
    border-radius: 20px;
    content: "";
}

#add_chat .checkbox:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    border: 2px solid #bbb;
    content: "";
}

#add_chat .radio:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 46%;
    left: 15px;
    display: block;
    margin-top: -5px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #008ad3;
    content: "";
    opacity: 0;
}

#add_chat input[type="radio"]:checked+.radio:before {
    opacity: 1;
}

#add_chat .checkbox:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 50%;
    left: 20px;
    display: block;
    margin-top: -8px;
    width: 8px;
    height: 13px;
    border-right: 3px solid #585858;
    border-bottom: 3px solid #585858;
    content: "";
    opacity: 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

#add_chat input[type="checkbox"]:checked+.checkbox:before {
    opacity: 1;
}

#add_chat #wait_moment {
    width: 60px;
    margin-top: 20px;
}

#add_chat .botui-message-content {
    padding: 7px;
    border-radius: 15px;
    color: #595a5a;
    background-color: #ebebeb;
}

#add_chat .botui-message-content.text {
    line-height: 1.3;
}

#add_chat .botui-message-content.loading {
    background-color: rgba(206, 206, 206, 0.5);
    line-height: 1.3;
    text-align: center;
}

#add_chat .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background-color: #919292;
    margin: 0 2px;
}

#add_chat .dot:first-child {
    animation: loading 0.6s 0.3s linear infinite;
}

#add_chat .dot:nth-child(2) {
    animation: loading 0.6s 0.2s linear infinite;
}

#add_chat .dot:nth-child(3) {
    animation: loading 0.6s 0.1s linear infinite;
}

@keyframes loading {
    0% {
        transform: translate(0, 0);
        background-color: #ababab;
    }

    25% {
        transform: translate(0, -3px);
    }

    50% {
        transform: translate(0, 0);
        background-color: #ababab;
    }

    75% {
        transform: translate(0, 3px);
    }

    100% {
        transform: translate(0, 0);
    }
}


.check_box {
    margin: 2em 0;
    background-color: #ecffe9;
    color: #333333;
    border-radius: 6px;
}

.check_box .content div.box_item,
.attention_box .content div.box_item,
.point_box .content div.box_item {
    display: flex;
    align-items: center;
    grid-gap: 0 .7rem;
    margin: 0 auto;
    padding: 5px;
}

.check_box .content div.box_item::before {
    width: 16px;
    height: 8px;
    border-bottom: 3px solid #86d67c;
    border-left: 3px solid #86d67c;
    transform: rotate(-45deg) translate(2.5px, -2.5px);
    content: '';
}

.check_box .content div.box_item_detail {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #86d67c;
    width: 100%;
}
.point_box .content div.box_item_detail p{
    margin-bottom: 5px!important;
}
.attention_box .content div.box_item_detail p{
    margin-bottom: 5px!important;
}

.check_box ul,
.check_box ol,
.attention_box ul,
.attention_box ol,
.point_box ul,
.point_box ol {
    counter-reset: item;
    list-style-type: none;
    padding: 0;
}

.check_box ul li,
.check_box ol li,
.attention_box ul li,
.attention_box ol li,
.point_box ul li,
.point_box ol li {
    counter-reset: item;
    list-style-type: none;
    font-size: 14px;
}

.check_box ul li a,
.check_box ol li a,
.attention_box ul li a,
.attention_box ol li a,
.point_box ul li a,
.point_box ol li a {
    font-size: 14px;
}

.check_box li:not(:last-child),
.attention_box li:not(:last-child),
.point_box li:not(:last-child) {
    margin-bottom: 0.4rem;
    /*background-image: linear-gradient(to right, #fff 1.5rem, transparent 1.5rem);*/
    background-size: 2rem 1.5px;
    background-repeat: repeat-x;
    background-position: left bottom;
}

.check_box .header:before,
.attention_box .header:before,
.point_box .header:before {
    display: inline-block;
    content: "";
    width: 2rem;
    height: 3px;
    background-color: #000;
    vertical-align: middle;
    margin-right: .6rem;
    border-radius: 1px;
    position: absolute;
    top: 50%;
    left: 0;
}

.check_box .header,
.attention_box .header,
.point_box .header {
    font-weight: 700;
    border-bottom: 1px dotted #000;
    color: #000;
    width: 96%;
    position: relative;
    padding: 1.2rem 0 1.2rem 3.6rem;
    line-height: 2.8rem;
}

.attention_box {
    margin: 2em 0;
    background-color: #ffebee;
    color: #333333;
    border-radius: 6px;
}

.attention_box .content div.box_item::before {
    width: 24px;
    height: 24px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM10.9999 16.0002V18.0002H12.9999V16.0002H10.9999ZM10.9999 9.00017V14.0002H12.9999V9.00017H10.9999Z' fill='%23f06060'%3E%3C/path%3E%3C/svg%3E");
}

.attention_box .content div.box_item_detail {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #f06060;
    width: 100%;
}

.point_box {
    margin: 2em 0;
    background-color: #fff9e5;
    color: #333333;
    border-radius: 6px;
}

.point_box .content div.box_item::before {
    width: 24px;
    height: 24px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23ffb36b'%3E%3C/path%3E%3C/svg%3E");
}

.point_box .content div.box_item_detail {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #ffb36b;
    width: 100%;
}

.suenaga_box {
    margin: 2em 0;
    background-color: #f0f8ff;
    border: #3C78D8 1px solid;
}

.suenaga_box .content p,
.suenaga_box .content li,
.suenaga_box .content div {
    color: #595959;
    margin-bottom: 0;
    line-height: 1.7em;
}

.suenaga_box .header {
    padding: 0.2em;
    display: flex;
    justify-content: start;
    align-items: center;
}

.suenaga_box .header .img {
    margin-top: .2rem;
    margin-left: .2rem;
}

.suenaga_box .header .img img {
    aspect-ratio: 1;
    background: #ffffff;
    border-radius: 50%;
    padding: 0.5rem;
    width: 70px;
    margin-right: 0;
    transform: scale(-1, 1);
}

.suenaga_box .header .title {
    font-family: "Kosugi Maru", sans-serif;
    width: 100%;
    margin-left: 1%;
    font-weight: 700;
    line-height: 4.2rem;
    font-size: 2rem;
    background-image: linear-gradient(to right, #3c78d8 1.5rem, transparent 1.5rem);
    background-size: 2rem 1.5px;
    background-repeat: repeat-x;
    background-position: left bottom;
    display: flex;
    display: -webkit-flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
    margin-right: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.suenaga_box .header .title img {
    margin: 0 .5rem 0 0;
    width: auto !important;
}

.suenaga_box .header p {
    font-weight: 700;
    text-align: center;
    line-height: 1.5;
    font-size: 1.3rem;
}

.merit_box {
    margin: 2em 0;
    border: #df2059 solid 1px;
}

.merit_box .header {
    position: relative;
    background-color: #ecc6d1;
    border-bottom: #df2059 solid 1px;
    padding: .2em .5em .2em 2.5em;
    color: #df2059;
    font-weight: 700;
    display: flex;
    display: -webkit-flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

.merit_box img {
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}

.demerit_box {
    margin: 2em 0;
    border: #366ba1 solid 1px;
}

.demerit_box .header {
    position: relative;
    background-color: #c6ddec;
    border-bottom: #366ba1 solid 1px;
    padding: .2em .5em .2em 2.5em;
    color: #366ba1;
    font-weight: 700;
    display: flex;
    display: -webkit-flex;
    align-items: flex-start;
    -webkit-align-items: flex-start;
}

.demerit_box img {
    width: 1.5em;
    height: 1.5em;
    position: absolute;
    left: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}

.suenaga_box,
.merit_box,
.demerit_box {
    border-radius: 6px;
    overflow: hidden;
}

.suenaga_box .content {
    padding: 0 3rem 1.2rem;
}

.merit_box .content,
.demerit_box .content {
    padding: 1.2rem 3rem;
}

.merit_box .content,
.demerit_box .content {
    background: #fffafa;
}

.suenaga_box ul,
.merit_box ul,
.demerit_box ul,
.accordion_box ul {
    counter-reset: item;
    list-style-type: none;
}

.suenaga_box ul li,
.merit_box ul li,
.demerit_box ul li,
.accordion_box ul li {
    counter-reset: item;
    list-style-type: none;
    text-indent: -2rem;
    padding-left: 2rem;
    font-size: 14px;
}

.suenaga_box ul li a,
.merit_box ul li a,
.demerit_box ul li a,
.accordion_box ul li a {
    font-size: 14px;
}

.suenaga_box ol,
.merit_box ol,
.demerit_box ol,
.accordion_box ol {
    counter-reset: item;
    list-style-type: none;
}

.suenaga_box ol li,
.merit_box ol li,
.demerit_box ol li,
.accordion_box ol li {
    list-style-type: none;
    text-indent: -1.8rem;
    padding-left: 1rem;
    font-size: 14px;
}

.suenaga_box ol li a,
.merit_box ol li a,
.demerit_box ol li a,
.accordion_box ol li a {
    font-size: 14px;
}

.suenaga_box li:not(:last-child),
.merit_box li:not(:last-child),
.demerit_box li:not(:last-child),
.accordion_box li:not(:last-child) {
    margin-bottom: 0.4rem;
}

.suenaga_box ul li:before,
.merit_box ul li:before,
.demerit_box ul li:before,
.accordion_box ul li:before {
    display: inline-block;
    counter-increment: item;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    font-size: 1.3rem;
    text-align: center;
    margin-right: 0.8rem;
    text-indent: 0;
    padding-left: 0;
    border: 3px solid #444;
}

.suenaga_box ol li:before,
.merit_box ol li:before,
.demerit_box ol li:before,
.accordion_box ol li:before {
    display: inline-block;
    counter-increment: item;
    content: counter(item) ".";
    min-width: 2.4rem;
    border-radius: 50%;
    font-size: 1.6rem;
    text-align: center;
    text-indent: 0;
    padding-left: 0;
    font-style: italic;
    font-weight: 700;
}

.suenaga_box ul li:before {
    color: #fff;
    border: 3px solid #595959;
}

.suenaga_box ol li:before {
    color: #595959;
}

.merit_box ul li:before {
    color: #fff;
    border: 3px solid #df2059;
}

.merit_box ol li:before {
    color: #df2059;
}

.demerit_box ul li:before {
    color: #fff;
    border: 3px solid #366ba1;
}

.demerit_box ol li:before {
    color: #366ba1;
}

@media (max-width: 767px) {
    .suenaga_box .header .img {
        width: 20%;
    }

    .suenaga_box .header .img img {
        width: 65px;
    }

    .suenaga_box .header .title {
        font-size: 1.7rem;
    }

    .suenaga_box .content {
        padding: 0 1.2rem 1.2rem;
    }

    .merit_box .content,
    .demerit_box .content {
        padding: 1.2rem;
    }
}


/* アコーディオン */

.accordion_box {
    border: 2px solid #008ad3;
    border-radius: 5px;
    margin: 1.8rem 0;
}

.accordion_box summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1.2rem;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2028%2028%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%2214%22%20style%3D%22fill%3A%232589d0%3B%22%2F%3E%0A%3C%2Fsvg%3E');
    background-position: right 0.5rem center;
    background-size: 22px;
    background-repeat: no-repeat;
    color: #008ad3;
    font-weight: 600;
    cursor: pointer;
}

.accordion_box summary::-webkit-details-marker {
    display: none;
}

.accordion_box summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    content: '';
    transition: transform .3s;
}

.accordion_box[open] summary::after {
    transform: rotate(225deg);
}

.accordion_box .content {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 1.2rem 1.2rem;
    transition: transform .5s, opacity .5s;
}

.accordion_box[open] .content {
    transform: none;
    opacity: 1;
}