@charset "UTF-8";

/* Google font Icon */
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

.article-detail-labels{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.625rem;
}
.article-detail-category-label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    color: #ffffff;
    background: transparent;
    border: 1px solid #ffffff;
    border-radius: 9999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}
a.article-detail-category-label:hover{
    background-color: rgba(255,255,255,0.14);
    color: #ffffff;
    opacity: 1;
}
.article-detail-section{
    background-color: #f4f5f7;
    padding: 72px 0;
}
.article-detail-card{
    max-width: 880px;
    margin: 0 auto;
    background-color: #ffffff;
    border: 1px solid rgba(26,58,92,0.08);
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(26,58,92,0.08);
    padding: clamp(2rem,4vw,3.5rem);
}
.article-detail-actions{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2.75rem;
}
.article-detail-actions .btn-outline{
    min-width: 220px;
    text-align: center;
}
@media (max-width: 575px){
    .article-detail-section{
        padding: 56px 0;
    }
    .article-detail-card{
        padding: 1.5rem;
    }
    .article-detail-actions{
        align-items: stretch;
    }
    .article-detail-actions .btn-outline{
        width: 100%;
        min-width: 0;
    }
}
.column-article > *{
    clear: both;
}
.column-article > *:not(:last-child){
    margin-bottom: 2em;
}
.column-article p{
    margin-bottom: 1.5em;
}
.column-article b{
    font-weight: 600;
}
.column-article p strong{
    background: -webkit-linear-gradient(transparent 65%, #fff27dab 0%);
    background: linear-gradient(transparent 65%, #fff27dab 0%);
    border: 0;
}
.column-article mark{
    background-color: unset;
    color: inherit; 
    color: #1a1a2e;
}
.column-article a{
    display: inline-block;
    padding: 0 0.15em;
    text-decoration: underline;
}
.column-article a:hover{
	opacity: .7;
}
.column-article a[target="_blank"]::after{
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-image: url(/images/icon-link-blank.webp);
    background-size: 100%;
    margin-left: 0.5em;
}
.column-article dt, .column-article h2, .column-article h3, .column-article h4{
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
    font-weight: 700;
    line-height: 1.4;
    color: #1a1a2e;
}
.column-article h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title))::before{
    box-sizing: inherit;
    text-decoration: inherit;
    vertical-align: inherit;
    position: absolute;
    display: block;
    pointer-events: none;
    content: "";
    top: -4px;
    left: 0;
    width: 100%;
    height: calc(100% + 4px);
    box-sizing: content-box;
    border-top: solid 2px #1a3a5c;
    border-bottom: solid 2px #1a3a5c;
}
.column-article h2{
    line-height: 1.4;
    margin: 4em 0 2em;
    position: relative;
    z-index: 1;
    margin-left: -16px;
    margin-right: -16px;
	font-size: 1.4em;
}
.column-article h2:where(:not([class^="swell-block-"]):not(.faq_q):not(.p-postList__title)){
    background: #1a3a5c;
    padding: .75em 1em;
    color: #fff;
}
.column-article h3{
    font-weight: 700;
    line-height: 1.4;
    margin: 3em 0 2em;
    position: relative;
    font-size: 1.3em;
    padding: 0 .5em .5em;
}
.column-article h3::before{
    bottom: 0;
    display: block;
    left: 0;
    position: absolute;
    z-index: 0;
    content: "";
    width: 100%;
    height: 2px;
    background: repeating-linear-gradient(90deg, #1a3a5c 0%, #1a3a5c 29.3%, rgba(150, 150, 150, .2) 29.3%, rgba(150, 150, 150, .2) 100%);
}
.column-article h4{
    line-height: 1.4;
    margin: 3em 0 1.5em;
    position: relative;
    font-size: 1.2em;
    padding: 0 0 0 16px;
    border-left: solid 2px #1a3a5c;
}
.column-article h5{
    clear: both;
    margin-bottom: 2em;
}
.column-article .is-style-bad_list, .column-article .is-style-check_list, .column-article .is-style-good_list, .column-article .is-style-note_list, .column-article .is-style-num_circle, .column-article .is-style-circle_list{
    --swl-list-padding--left: .25em;
    --swl-list-padding--has_bg: 1em;
    list-style: none !important;
    border: 1px solid #f3f1ef;
    padding: 1em 1em 1em 1.5em;
    background: #fbfbfb;
}
.column-article li{
    line-height: 1.5;
    margin: .25em 0 1em;
    position: relative;
}
.column-article li strong{
    display: inline-block;
    margin-bottom: .25em;
}
.column-article .is-style-num_circle{
    counter-reset: li;
}
.column-article .is-style-circle_list li{
    padding-left: 1.5em;
}
.column-article .is-style-num_circle li{
    padding-left: 2em;
}
.column-article .is-style-num_circle li:before{
    background-color: #1a3a5c;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #1a3a5c;
    box-sizing: content-box;
    color: #fff;
    content: counter(li);
    counter-increment: li;
    display: block;
    height: 1.8em;
    left: 1px;
    line-height: 1.8;
    padding: 0;
    position: absolute;
    text-align: center;
    top: -.15em;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    width: 1.8em;
}
.column-article .is-style-circle_list li:before {
    background-color: #1a3a5c;
    border-radius: 50%;
    box-sizing: content-box;
    content: '';
    display: block;
    width: 0.5em;
    height: 0.5em;
    left: 1px;
    line-height: 1.8;
    padding: 0;
    position: absolute;
    top: .575em;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
}
.column-article .is-style-bad_list li, .column-article .is-style-check_list li, .column-article .is-style-good_list li, .column-article .is-style-triangle_list li{
    padding-left: 1.5em;
}
.column-article .is-style-bad_list li:before, .column-article .is-style-check_list li:before, .column-article .is-style-good_list li:before, .column-article .is-style-triangle_list li:before{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: none;
    border: none;
    border-radius: 0;
    display: block;
    font-family: "Material Icons";
    height: auto;
    left: 0;
    position: absolute;
    top: 0;
    width: 1em;
}
.column-article .is-style-check_list li:before{
    color: #1a3a5c;
    content: "\e5ca";
}
.column-article .is-style-good_list li:before{
    color: #86dd7b;
    content: "radio_button_unchecked";
}
.column-article .is-style-bad_list li:before{
    color: #f36060;
    content: "\e5cd";
}
.column-article .is-style-note_list:not(.has-text-color){
    opacity: .85;
}
.column-article .is-style-note_list li{
    margin: .5em 0;
    padding-left: 1.25em;
}
.column-article .is-style-note_list li:before{
    background: none;
    border: none;
    border-radius: 0;
    content: "※";
    height: auto;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transform: scale(.75);
    transform: scale(.75);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    white-space: nowrap;
}
.column-article .cap_box{
    position: relative;
}
.column-article .is-style-onborder_ttl2>.cap_box_ttl, .column-article .is-style-onborder_ttl>.cap_box_ttl{
    display: inline-flex;
    font-size: .85em;
    left: 1em;
    line-height: 1;
    margin-bottom: 0;
    padding: .5em .75em;
    position: relative;
    text-align: center;
    top: 1em;
    z-index: 1;
    background-color: #fff;
}
.column-article .cap_box[data-colset="col1"] .cap_box_ttl{
    color: #e05a1e;
}
.column-article .cap_box[data-colset="col1"] .cap_box_content{
    border-color: #e05a1e;
}
.column-article .cap_box[data-colset="col2"] .cap_box_ttl{
    color: #dd0e0e;
}
.column-article .cap_box[data-colset="col2"] .cap_box_content{
    border-color: #dd0e0e;
}
.column-article .cap_box[data-colset="col3"] .cap_box_ttl{
    color: #34c500;
}
.column-article .cap_box[data-colset="col3"] .cap_box_content{
    border-color: #34c500;
}
.column-article .cap_box.is-style-onborder_ttl .cap_box_content{
    font-size: .9em;
}
.column-article .cap_box_content{
    border: 1px solid #1a3a5c;
    clear: both;
    margin-top: -2px;
    padding: 1.75em;
    position: relative;
    z-index: 0;
}
.column-article .is-style-onborder_ttl2>.cap_box_content, .column-article .is-style-onborder_ttl>.cap_box_content{
}
.column-article .cap_box_content ul , .column-article .post_content .cap_box_content ol{
    border: 0;
    padding: 0;
    background: none;
}
.column-article .cap_box_content ul li::before , .column-article .post_content .cap_box_content ol li::before{
    background-color: #1a3a5c;
}
.column-article table{
    border: none;
    border-collapse: collapse;
    border-spacing: 0;
    line-height: 1.6;
    max-width: 100%;
    text-align: left;
    width: 100%;
}
.column-article td, .column-article th{
    border: 1px solid #dcdcdc;
    padding: .5em;
}
.column-article td{
    font-size: .95em;
    padding: 0.5em 1em;
}
.column-article th{
    background-color: #0f2236;
    color: #fff;
    text-align: center;
}

.bgc-box{
    padding: 1.5em 2.0em 1.5em 3.0em;
    position: relative;
    font-size: 0.9em;
}
.bgc-box::before{
    line-height: 1;
    position: absolute;
    z-index: 0;
    content: "";
    display: block;
    width: 5px;
    height: calc(100% - 3em);
    top: 1.5em;
    left: 1.5em;
    border-left: solid 1px rgba(180, 180, 180, .75);
    border-right: solid 1px rgba(180, 180, 180, .75);
}
.bgc-box.gray{
    background: #f5f5f5;
}
.bgc-box.blue{
    background: #f0f6ff;
}
.bgc-box.orange{
    background: #fff6f0;
}
.bgc-box.yellow{
    background: #fffbf0;
}
.supplement{
    padding: 1.5em;
    position: relative;
    background: #f9f9f9;
    font-size: 0.95em;
}
.supplement::before , .supplement::after{
    border-color: #c3c5c7 !important;
    content: "";
    display: inline-block;
    height: 2em;
    position: absolute;
    width: 2.25em;
}
.supplement::before{
    border-left: 1px solid;
    border-top: 1px solid;
    left: 0;
    top: 0;
}
.supplement::after{
    border-bottom: 1px solid;
    border-right: 1px solid;
    bottom: 0;
    right: 0;
}
blockquote cite{
    text-align: right;
    padding-right: 2em;
}