@charset "utf-8";

[data-category="kaisya"] {
    --category-color: var(--color-kaisya);
}
[data-category="hito"] {
    --category-color: var(--color-hito);
}
[data-category="monokoto"] {
    --category-color: var(--color-monokoto);
}
[data-category="kizuna"] {
    --category-color: var(--color-kizuna);
}
[data-category="topics"] {
    --category-color: var(--color-topics);
}

[data-type="kaisya"] {
    --type-color: var(--color-kaisya);
}
[data-type="hito"] {
    --type-color: var(--color-hito);
}
[data-type="monokoto"] {
    --type-color: var(--color-monokoto);
}
[data-type="kizuna"] {
    --type-color: var(--color-kizuna);
}
[data-type="topics"] {
    --type-color: var(--color-topics);
}

/* article_head */
.article_head {
    color: #fff;
}
.article_head {
    background-color: var(--category-color);
}
.article_head_date {
    font-weight: 500;
}
.article_head_ttl {
    font-weight: 700;
    letter-spacing: 0.04em;
}
.article_head_txt {
    font-weight: 500;
    line-height: 1.7;
}
.article_head_category_wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
}
.article_head_category,
.article_head_category_sub {
    font-weight: 700;
    line-height: 1.7;
    border: 1px solid #fff;
    border-radius: 4rem;
    display: inline-block;
}
.article_head_category,
.article_head_category_sub {
    color: inherit;
    text-decoration: none;
}

.article_head_category_sub {
    background-color: #fff;
}
.article_head_category_sub {
    color: var(--category-color);
}
.article_head_list_tag {
    font-weight: 500;
    line-height: 1;
    display: flex;
    flex-wrap: wrap;
}
.article_head_list_tag > li a {
    color: inherit;
    text-decoration: none;;
}
.article_head_list_tag > li a::before {
    content: '#';
    margin-right: 0.1em;
}
@media (min-width: 641px) {
    .article_head {
        padding: 40rem 80rem;
        border-radius: 24rem 24rem 0 0;
        display: flex;
        align-items: center;
        gap: 40rem;
    }
    .article_head_inner {
        width: 845rem;
        padding-right: 40rem;
        border-right: 2px solid #fff;
    }
    .article_head_date {
        font-size: 14rem;
        line-height: 1.7;
    }
    .article_head_ttl {
        margin-top: 15rem;
        padding-bottom: 24rem;
        font-size: 40rem;
        line-height: 1.25;
    }
    .article_head_txt {
        margin-top: 15rem;
        font-size: 16rem;
    }
    .article_head_info {
        width: 230rem;
    }
    .article_head_category,
    .article_head_category_sub {
        padding: 4rem 8rem;
        font-size: 13rem;
    }
    .article_head_list_tag {
        margin-top: 24rem;
        font-size: 14rem;
        gap: 8rem 16rem;
    }
}
@media (max-width: 640px) {
    .article_head {
        padding: 24rem;
        border-radius: 24rem 24rem 0 0;
    }
    .article_head_date {
        font-size: 10rem;
        line-height: 1;
    }
    .article_head_ttl {
        margin-top: 16rem;
        font-size: 20rem;
        line-height: 1.5;
    }
    .article_head_txt {
        margin-top: 8rem;
        font-size: 14rem;
    }
    .article_head_info {
        margin-top: 24rem;
    }
    .article_head_category,
    .article_head_category_sub {
        padding: 2rem 8rem;
        font-size: 12rem;
    }
    .article_head_list_tag {
        margin-top: 16rem;
        font-size: 10rem;
        gap: 8rem;
    }
}

/* article_side */
.article_side {
	border-image-slice: 33%;
	border-image-repeat: repeat;
}
.article_side_share_list {
    display: flex;
}
.article_side_share_list > li {
    position: relative;
}
.article_side_share_list_link {
    display: block;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.share_speech {
    font-weight: 700;
    line-height: 1.7;
    color: #fff;
    border-radius: 100rem;
    background-color: #333;
    display: block;
    position: absolute;
    top: 0;
    white-space: nowrap;
    pointer-events: none;
}
.share_speech::before {
    content: '';
    width: 0;
    height: 0;
    margin-inline: auto;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
}

.article_side_anchor_list_ttl {
    display:flex;
    justify-content: space-between;
    font-weight: 700;
    line-height: 1.7;
    border-bottom: 1px solid #333;
}
/* SP目次の表示/非表示 */
.article_side_btn {
    position: relative;
    border: none;
    padding-right: 18rem;
    padding-block: 3rem;
}
.article_side_btn:before {
    content:"";
    display: block;
    position: absolute;
    top: 50%;
    right: 2rem;
    width: 8rem;
    height: 8rem;
    border-right: 2rem solid #000;
    border-bottom: 2rem solid #000;
    scale: 0.8 1;
    transform: translateY(calc(-50% + 2rem)) rotate(-135deg);
}
.article_side_btn.is_close:before {
    transform: translateY(calc(-50% - 2rem)) rotate(45deg);
}
.article_side_btn_close,
.is_close .article_side_btn_open {
    display: block;
}
.article_side_btn_open,
.is_close .article_side_btn_close {
    display: none;
}

.article_side_anchor_list_link {
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: #333;
    display: flex;
    gap: 0.3em;
    position: relative;
}
.article_side_anchor_list_link::before {
    content: '■';
}
.article_side_anchor_list_link_indent {
    padding-left: 40rem;
}
.article_side_anchor_list_link_indent::before {
    content: '';
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background-color: #333;
    position: absolute;
    top: 11rem;
    left: 26rem;
}
.is_active .article_side_anchor_list_link_indent::before {
    background-color: currentColor;
}
@media (min-width: 641px) {
    .article_side {
        width: 360rem;
        border-image-source: url(../img/common/line_pc.svg);
        border-image-width: 0 0 0 32rem;
        position: relative;
    }
    .article_side_inner {
        padding: 40rem 80rem 40rem 40rem;
        position: sticky;
        top: 0;
        right: 0;
    }
    .article_side_share_list {
        gap: 16rem;
    }
    .article_side_share_list_link {
        width: 24rem;
    }
    .share_speech {
        padding: 2rem 8rem;
        font-size: 12rem;
        left: 50%;
        translate: -50% -50%;
    }
    .share_speech::before {
        border-width: 8rem 4rem 0 4rem;
    }

    .article_side_anchor_list_wrap {
        margin-top: 48rem;
    }
    .article_side_anchor_list_ttl {
        font-size: 14rem;
    }
    .article_side_anchor_list {
        display: block!important;
    }
    .article_side_anchor_list > li {
        margin-top: 16rem;
    }
    .article_side_anchor_list_link {
        font-size: 14rem;
    }
    .article_side_anchor_list > li.is_active .article_side_anchor_list_link {
        color: var(--category-color);
    }
}
@media (max-width: 640px) {
    .article_side {
        padding-inline: 24rem;
    }
    .article_side_share_list_wrap {
        margin-top: 48rem;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .article_side_share_list_ttl {
        font-weight: 700;
        font-size: 12rem;
    }
    .article_side_share_list_link {
        width: 40rem;
        padding: 8rem;
    }
    .share_speech {
        padding: 2rem 8rem;
        font-size: 10rem;
    }
    .article_side_share_list .share_speech {
        right: 0;
        translate: 0 -50%;
    }
    .share_list .share_speech {
        left: 50%;
        translate: -50% -50%;
    }
    .share_speech::before {
        border-width: 6rem 3rem 0 3rem;
    }
    .article_side_share_list .share_speech::before {
        left: auto;
        right: 17rem;
    }

    .article_side_anchor_list_wrap {
        margin-top: 24rem;
    }
    .article_side_anchor_list_ttl {
        padding-bottom: 4rem;
        font-size: 12rem;
    }
    .article_side_anchor_list {
        margin-top: 16rem;
    }
    .article_side_anchor_list > li + li {
        margin-top: 12rem;
    }
    .article_side_anchor_list_link {
        font-size: 14rem;
    }
}
.share_speech {
    opacity: 0;
}
.is_active.share_speech {
    opacity: 1;
    transition: top 0.5s, opacity 0.5s;
}
@media (min-width: 641px) {
    .is_active.share_speech {
        top: -21rem;
    }
}
@media (max-width: 640px) {
    .is_active.share_speech {
        top: -19rem;
    }
}

/* article_body */
.article_lead_img,
.article_img > img,
.article_img > div > img,
.article_gallery_img > img,
.article_gallery_img > div > img,
.article_box_img > img,
.article_iframe > iframe,
.article_talk_icon > img {
    border: 2px solid #fff;
}
.article_img_2col {
    display:flex;
    border: 2px solid #fff;
}
.article_img_2col_cell + .article_img_2col_cell {
    border-left: 2px solid #fff;
}
.article_ttl,
.article_body h2 {
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.04em;
    border-bottom: 1px solid #333;
}
.article_ttl_sub,
.article_body h3,
.article_blockquote > .article_ttl_sub {
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.04em;
}
.article {
    position: relative;
    z-index: 1;
}
.article_txt,
.article_lead_txt {
    line-height: 2;
    letter-spacing: 0.04em;
}
.article_caption {
    line-height: 1.7;
    display: block;
}
.article_iframe > iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.article_blockquote {
    border-left: solid #ccc;
}
.article_blockquote > .article_txt {
    line-height: 1.7;
}
[data-background-color="white"]{
    --bg-color: #fff;
}
[data-background-color="blue"]{
    --bg-color: #C2D6EC;
}
[data-background-color="red"]{
    --bg-color: #FFD6D5;
}
[data-background-color="yellow"]{
    --bg-color: #F9DEA1;
}
[data-background-color="gray"]{
    --bg-color: #D8D8D8;
}
[data-background-color] {
    background-color: var(--bg-color);
}
[data-background-color]::before {
    border-color: transparent var(--bg-color) var(--bg-color) transparent;
}
.article_comment {
    border-radius: 8rem;
    position: relative;
}

.article_comment::before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    display: block;
    position: absolute;
}
.article_comment.interviewer {
    background-color: #c2d6ec;
}
.article_comment.interviewer::before {
    border-color: transparent #c2d6ec #c2d6ec transparent;
}
.article_comment_r::before {
    border-color: transparent transparent #fff #fff;
    left: auto;
    right: 48rem;
}
.article_comment_ttl {
    font-weight: 700;
}
.article_comment_txt {
    line-height: 1.7;
}
.article_txt a {
    color: #0091e6;
}
.article_talk {
    margin-top: 24rem;
}
.article_talk_item_inner {
    display: flex;
}
.article_talk_icon > img {
    border-radius: 50%;
}
.article_talk_area {
    border-radius: 8rem;
    background-color: var(--bg-color);
    position: relative;
}
.article_talk_area::before {
    content: '';
    width: 0;
    height: 0;
    margin: auto;
    border-style: solid;
    border-color: var(--bg-color) var(--bg-color) transparent transparent;
    display: block;
    position: absolute;
    top: 0;
    right: 100%;
    bottom: 0;
}
.article_talk_area_ttl {
    font-weight: 700;
}
.article_talk_area_txt {
    line-height: 1.7;
}
.article_talk_item_reverse .article_talk_item_inner {
    flex-direction: row-reverse;
}
.article_talk_item_reverse .article_talk_area::before {
    border-color: var(--bg-color) transparent transparent var(--bg-color);
    left: 100%;
    right: auto;
}
.article_talk_item_reverse .article_talk_icon_txt {
    text-align: right;
}
.article_talk_icon_txt_division,
.article_talk_icon_txt_name {
    display: block;
    text-align: center;
}
.article_talk_icon_txt_name {
    font-weight: 700;
}
.default_hr {
    width:100%;
    border-top: 1px solid #333;
}
.article_col2_box {
    display: flex;
}
.article_col2_box_txt_side_txt {
    font-weight: 400;
    line-height: 2;
    text-align: justify;
}
.article_body h4 {
    font-weight: 700;
}
.article_body b {
    font-weight: 700;
}
.article_body .color_red {
    color:#E60012;
}
.article_body del,
.article_body s {
  text-decoration: line-through;
}
.article_body .underline {
  text-decoration: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 0.2em; /* 下線を太めにできる */
  text-underline-offset: 0.1em;    /* 下線の位置を調整できる */
}
.article_body .list_style_disc {
    list-style-type: disc;
    padding-left:1em;
}
.article_body .list_style_num {
    list-style-type: decimal;
    padding-left:1em;
}
.article_body ul:not([class]) {
    list-style-type: disc;
    padding-left:1em;
}
.article_body ol:not([class]) {
    list-style-type: decimal;
    padding-left:1em;
}

.article_body sup {
    font-size: 50%;
    vertical-align: super;
}
.article_body .italic {
    font-style: italic;
}

@media (min-width: 641px) {
    .article_body {
        display: flex;
        flex-direction: row-reverse;
    }
    .article_body_inner {
        width: 920rem;
        padding: 48rem 40rem 80rem 80rem;
    }

    .article_lead_txt {
        margin-top: 64rem;
        font-size: 16rem;
    }
    .article_lead_txt a {
        color: #0091e6;
    }

    .article_lead + .article_section,
    .article_section + .article_section {
        margin-top: 64rem;
    }
    .article_ttl,
    .article_body h2 {
        margin-bottom: 64rem;
        padding-bottom: 16rem;
        font-size: 32rem;
        margin-top: 112rem;
    }
    .article_ttl_sub,
    .article_body h3 {
        font-size: 24rem;
    }
    * + .article_ttl_sub,
    .article_body * + h3 {
        margin-top: 64rem;
    }
    .article_txt {
        font-size: 16rem;
    }
    * + .article_txt {
        margin-top: 24rem;
    }
    .article_img,
    .article_iframe {
        margin-top: 24rem;
    }
    .article_caption {
        margin-top: 16rem;
        font-size: 12rem;
    }
    .article_blockquote {
        width: 720rem;
        margin-top: 24rem;
        margin-inline: auto;
        padding-block: 16rem;
        padding-left: 40rem;
        border-left-width: 6px;
    }
    .article_blockquote > .article_ttl_sub {
        margin-top: 0;
        font-size: 20rem;
    }
    .article_blockquote > .article_txt {
        margin-top: 16rem;
        font-size: 14rem;
    }
    .article_blockquote > .article_img {
        width: 480rem;
        margin-top: 16rem;
    }
    .article_gallery {
        margin-top: 24rem;
        display: flex;
        flex-wrap: wrap;
        gap: 24rem;
    }
    .article_gallery_img {
        width: calc(50% - 12rem);
    }
    .article_box {
        margin-top: 24rem;
        display: flex;
        gap: 24rem;
    }
    .article_box_reverse {
        flex-direction: row-reverse;
    }
    .article_box_img {
        width: 440rem;
    }
    .article_box_inner {
        width: 336rem;
    }
    .article_comment {
        padding: 24rem;
        margin-top: 24rem;
    }
    .article_comment::before {
        border-width: 12rem;
    }
    .article_comment[data-position="top"]{
        margin-top: 25rem;
    }
    .article_comment[data-position="top"]::before {
        left: 48rem;
        bottom: 100%;
    }
    .article_comment[data-position="bottom"]{
        margin-bottom: 0rem;
    }
    .article_comment[data-position="bottom"]::before {
        top: calc(100% - 1px);
        left: 40rem;
        scale: 1 -1;
    }
    .article_comment[data-position="left"]::before {
        top: calc(50% - 12rem);
        right: calc(100% - 1px);
        scale: 1 -1;
    }
    .article_comment[data-position="right"]::before {
        top: calc(50% - 12rem);
        left: calc(100% - 1px);
        scale: -1 -1;
    }
    .article_comment.interviewer::before {
        rotate: -90deg;
        left: -24rem;
        bottom: calc(50% - 12rem);
    }
    .article_comment.interviewee::before {
        rotate: 180deg;
        left: 100%;
        bottom: calc(50% - 12rem);
    }
    .article_comment_ttl {
        font-size: 16rem;
        line-height: 1.7;
    }
    .article_comment_txt {
        font-size: 14rem;
    }
    .article_comment_ttl + .article_comment_txt {
        margin-top: 8rem;
    }
    .article_talk_item_inner {
        align-items: start;
        gap: 40rem;
    }
    .article_talk_icon > img {
        width: 160rem;
        min-width: 160rem;
        height: 160rem;
    }
    .article_talk_icon_txt {
        margin-top: 8rem;
        font-size: 12rem;
    }
    .article_talk_icon_txt_division {
        font-size: 11rem;
    }
    .article_talk_icon_txt_name {
        font-size: 12rem;
    }
    .article_talk_area {
        padding: 24rem;
    }
    .article_talk_area::before {
        border-width: 12rem;
    }
    .article_talk_area_ttl {
        font-size: 16rem;
        line-height:1.7;
    }
    .article_talk_area_txt {
        font-size: 14rem;
    }
    .article_talk_area_ttl + .article_talk_area_txt {
        margin-top:8rem;
    }
    .default_hr {
        margin-block: 64rem;
    }
    .article_col2_box {
        gap: 24rem;
    }
    * + .article_col2_box {
        margin-top: 24rem;
    }
    .article_col2_box_txt_side {
        flex:1;
    }
    .article_col2_box_img_side {
        width: 440rem;
    }
    .article_col2_box_txt_side_txt {
        font-size: 16rem;
        line-height: 2;
    }
    .article_body h4 {
        font-size: 20rem;
    }
    .article_body * + h4 {
        margin-top:24rem;
    }
}
@media (max-width: 640px) {
    .article_body_inner {
        margin-top: 40rem;
        padding: 0 24rem 40rem;
    }

    .article_lead {
        margin-top: 40rem;
        padding-inline: 24rem;
    }
    .article_lead_img {
        width: calc(100% + 48rem);
        margin-inline: -24rem;
    }
    .article_lead_txt {
        margin-top: 40rem;
        font-size: 14rem;
    }
    .article_lead_txt a {
        color: #0091e6;
    }

    .article_lead + .article_section,
    .article_section + .article_section {
        margin-top: 40rem;
    }
    .article_ttl,
    .article_body h2 {
        margin-top: 80rem;
        padding-bottom: 16rem;
        font-size: 24rem;
    }
    .article_ttl_sub,
    .article_body h3 {
        font-size: 20rem;
    }
    .article_ttl + .article_ttl_sub,
    .article_body h2 + h3 {
        margin-top: 24rem;
    }
    * + .article_ttl_sub,
    .article_body * + h3 {
        margin-top: 40rem;
    }
    .article_txt {
        font-size: 14rem;
    }
    * + .article_txt {
        margin-top: 24rem;
    }
    .article_img,
    .article_iframe {
        width: 100%;
        margin-top: 24rem;
        margin-inline: 0;
    }
    .article_caption {
        margin-top: 8rem;
        font-size: 10rem;
    }
    .article_blockquote {
        margin-top: 24rem;
        margin-left: 16rem;
        padding-block: 8rem;
        padding-left: 24rem;
        border-left-width: 4px;
    }
    .article_blockquote > .article_ttl_sub {
        margin-top: 0;
        font-size: 16rem;
    }
    .article_blockquote > .article_txt {
        margin-top: 16rem;
        font-size: 12rem;
    }
    .article_blockquote > .article_img {
        margin-top: 16rem;
    }
    .article_gallery,
    .article_gallery_img + .article_gallery_img {
        margin-top: 24rem;
    }
    .article_box {
        margin-top: 24rem;
    }
    .article_box_inner {
        margin-top: 24rem;
    }
    .article_comment {
        margin-top: 24rem;
        padding: 16rem;
    }
    .article_comment::before {
        border-width: 8rem;
    }
    .article_comment:has(+ img) {
        margin-bottom: 24rem;
    }
    .article_comment[data-position="top"]{
        margin-top: 18rem;
    }
    .article_comment[data-position="top"]::before {
        left: 48rem;
        bottom: 100%;
    }
    .article_comment[data-position="bottom"]{
        margin-bottom: -10rem;
    }
    .article_comment[data-position="bottom"]::before {
        top: calc(100% - 1px);
        left: 48rem;
        scale: 1 -1;
    }
    .article_comment[data-position="left"]::before {
        top: calc(50% - 12rem);
        right: calc(100% - 1px);
        scale: 1 -1;
    }
    .article_comment[data-position="right"]::before {
        top: calc(50% - 12rem);
        left: calc(100% - 1px);
        scale: -1 -1;
    }
    .article_comment.interviewer::before {
        rotate: -90deg;
        left: -15rem;
        bottom: calc(50% - 8rem);
    }
    .article_comment.interviewee::before {
        rotate: 180deg;
        left: calc(100% - 1px);
        bottom: calc(50% - 8rem);
    }

    .article_comment_ttl {
        font-size: 13rem;
        line-height: 1.5;
    }
    .article_comment_txt {
        font-size: 12rem;
    }
    .article_comment_ttl + .article_comment_txt {
        margin-top: 4rem;
    }
    .article_talk_item + .article_talk_item {
        margin-top: 8rem;
    }
    
    .article_talk_item_inner {
        align-items: flex-start;
        gap: 24rem;
    }
    .article_talk_icon > img {
        width: 120rem;
        min-width: 120rem;
        height: 120rem;
    }
    .article_talk_icon_txt {
        margin-top: 8rem;
        font-size: 10rem;
    }
    .article_talk_icon_txt_division {
        font-size: 12rem;
    }
    .article_talk_icon_txt_name {
        font-size: 13rem;
    }
    .article_talk_area {
        padding: 24rem;
    }
    .article_talk_area::before {
        border-width: 8rem;
        bottom: auto;
        top: 60rem;
    }
    .article_talk_area_ttl {
        font-size: 13rem;
        line-height: 1.5;
    }
    .article_talk_area_txt {
        font-size: 12rem;
        line-height: 1.7;
        margin-top:8rem;
    }
    .default_hr {
        margin-block: 48rem;
    }
    .article_col2_box {
        flex-direction: column;
        gap: 24rem;
    }
    * + .article_col2_box {
        margin-top: 24rem;
    }
    .article_col2_box_img_side {
        order: -1;
    }
    .article_col2_box_txt_side_txt {
        font-size: 16rem;
        line-height: 2;
    }
    .article_body h4 {
        font-size: 18rem;
    }
    .article_body * + h4 {
        margin-top: 24rem;
    }
}

/* article_area */
.article_area {
    background-color: #fff;
}
.article_area_ttl {
    font-weight: 700;
    line-height: 1.7;
}
.article_link_list_link {
    line-height: 1.7;
    text-decoration: none;
    color: #0091e6;
}
.article_character_list > li {
    display: flex;
    align-items: center;
    gap: 16rem;
}
.article_character_list_img {
    width: 64rem;
    border-radius: 50%;
}
.article_character_list_job {
    line-height: 1.7;
}
.article_character_list_name {
    font-weight: 700;
    line-height: 1.7;
}
@media (min-width: 641px) {
    .article_area {
        margin-top: 64rem;
        padding: 24rem 40rem;
        border-radius: 8rem;
    }
    .article_area + .article_area {
        margin-top: 24rem;
    }
    .article_body .article_area_ttl {
        font-size: 16rem;
        margin-top:0;
        padding-bottom: 0;
        margin-bottom: 0;
        border: none;
    }
    .article_link_list {
        margin-top: 16rem;
    }
    .article_link_list > li + li {
        margin-top: 8rem;
    }
    .article_link_list_link {
        font-size: 14rem;
    }

    .article_character_list {
        margin-top: 24rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 24rem;
    }
    .article_character_list > li {
        width: calc((100% - 24rem) / 2);
    }
    .article_character_list_job {
        font-size: 14rem;
    }
    .article_character_list_name {
        font-size: 16rem;
    }
}
@media (max-width: 640px) {
    .article_area {
        margin-top: 48rem;
        padding: 24rem;
        border-radius: 8rem;
    }
    .article_area + .article_area {
        margin-top: 24rem;
    }
    .article_body .article_area_ttl {
        font-size: 14rem;
        margin-top:0;
        padding-bottom: 0;
        margin-bottom: 0;
        border: none;
    }
    .article_link_list {
        margin-top: 16rem;
    }
    .article_link_list > li + li {
        margin-top: 16rem;
    }
    .article_link_list_link {
        font-size: 12rem;
    }

    .article_character_list {
        margin-top: 16rem;
    }
    .article_character_list > li + li {
        margin-top: 8rem;
    }
    .article_character_list_job {
        font-size: 12rem;
    }
    .article_character_list_name {
        font-size: 14rem;
    }
}

/* page_nav */
.page_nav_link {
    text-decoration: none;
    display: block;
    border: 1px solid;
}
.kaisya .page_nav_link {
    border-color: var(--color-kaisya);
    background-color: var(--color-kaisya);
}
.hito .page_nav_link {
    border-color: var(--color-hito);
    background-color: var(--color-hito);
}
.monokoto .page_nav_link {
    border-color: var(--color-monokoto);
    background-color: var(--color-monokoto);
}
.kizuna .page_nav_link {
    border-color: var(--color-kizuna);
    background-color: var(--color-kizuna);
}
.topics .page_nav_link {
    border-color: var(--color-topics);
    background-color: var(--color-topics);
}
.page_nav_link_inner {
    font-weight: 900;
    line-height: 1.25;
    color: #fff;
    border: 2px solid #fff;
    display: block;
}
.prev .page_nav_link_inner {
    justify-content: flex-end;
    flex-direction: row-reverse;
}
.prev .icon_arrow {
    rotate: 180deg;
}
.next .page_nav_link_inner {
    justify-content: space-between;
}
@media (min-width: 641px) {
    .page_nav {
        margin-top: 64rem;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 24rem;
    }
    .page_nav .is_hide {
        visibility: hidden;
    }
    .page_nav_link {
        width: 388rem;
        padding: 4rem;
        border-radius: 8rem;
    }
    .page_nav_link_inner {
        height: 72rem;
        padding-inline: 24rem;
        font-size: 16rem;
        border-radius: 4rem;
        display: flex;
        align-items: center;
    }
    .prev .page_nav_link_inner {
        gap: 24rem;
    }
    .page_nav_link_txt {
        max-width: 276rem;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
    }
    .icon_arrow {
        width: 32rem;
    }
}
@media (max-width: 640px) {
    .page_nav {
        margin-top: 48rem;
    }
    .page_nav .is_hide {
        display: none;
    }
    .page_nav > li + li {
        margin-top: 16rem;
    }
    .page_nav_link {
        padding: 4rem;
        border-radius: 8rem;
    }
    .page_nav_link_inner {
        padding: 16rem 24rem;
        font-size: 14rem;
        border-radius: 4rem;
        display: flex;
        align-items: center;
    }
    .prev .page_nav_link_inner {
        gap: 24rem;
    }
    .page_nav_link_txt {
        max-width: 214rem;
    }
    .icon_arrow {
        width: 32rem;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        a.page_nav_link {
            transition: background-color 0.5s;
        }
        a.page_nav_link:hover {
            background-color: #fff;
            opacity: 1;
        }
        .page_nav_link_inner {
            transition: color 0.5s, border-color 0.5s;
        }
        .page_nav_link:hover .page_nav_link_inner {
            color: var(--category-color);
            border-color: var(--category-color);
        }
        .page_nav_link .icon_arrow use {
            transition: fill 0.5s;
        }
        .page_nav_link:hover .icon_arrow use {
            fill: var(--category-color);
        }
    }
}

/* paginator */
.paginator_list {
    display: flex;
    align-items: center;
    justify-content: center;
}
.paginator_list > li.is_active {
    pointer-events: none;
}
.article_list > li.is_active {
    pointer-events: none;
}
.paginator_list_link {
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 50%;
    background-color: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.is_active .paginator_list_link {
    background-color: var(--category-color);
}
.paginator_list_arrow_path {
    fill: var(--category-color);
}
@media (min-width: 641px) {
    .paginator_list {
        margin-top: 24rem;
        gap: 16rem;
    }
    .paginator_list_link {
        width: 40rem;
        height: 40rem;
        font-size: 14rem;
    }
}
@media (max-width: 640px) {
    .paginator_list {
        margin-top: 40rem;
        gap: 8rem;
    }
    .paginator_list_link {
        width: 40rem;
        height: 40rem;
        font-size: 14rem;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        a.paginator_list_link {
            transition: background-color 0.5s;
        }
        a.paginator_list_link:hover {
            opacity: 1;
        }
        .paginator_list_link:hover {
            background-color: var(--category-color);
        }
        .paginator_list_arrow_path {
            transition: fill 0.5s;
        }
        a.paginator_list_arrow:hover {
            opacity: 1;
        }
        .paginator_list_arrow:hover .paginator_list_arrow_path {
            fill: #ccc;
        }
    }
}

/* share_list */
.share_list {
    display: flex;
    align-items: center;
    justify-content: center;
}
.share_list > li {
    position: relative;
}
.share_list_link {
    width: 40rem;
    display: block;
    cursor: pointer;
}
@media (min-width: 641px) {
    .share_list {
        margin-top: 64rem;
        gap: 16rem;
    }
}
@media (max-width: 640px) {
    .share_list {
        margin-top: 40rem;
        gap: 8rem;
    }
}

/* page_back */
.page_back {
    margin-inline: auto;
    line-height: 1.25;
    text-decoration: none;
    border: 2px solid;
    border-radius: 8rem;
    background-color: #fff;
    display: flex;
    align-items: center;
}
.page_back {
    color: var(--category-color);
    border-color: var(--category-color);
}
.page_back .icon_arrow use {
    fill: var(--category-color);
}
.page_back .icon_arrow {
    rotate: 180deg;
}
@media (min-width: 641px) {
    .page_back {
        width: 280rem;
        margin-top: 64rem;
        padding: 12rem 24rem;
        font-size: 16rem;
        gap: 24rem;
    }
}
@media (max-width: 640px) {
    .page_back {
        width: 240rem;
        margin-top: 40rem;
        padding: 12rem 24rem;
        font-size: 14rem;
        gap: 24rem;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        a.page_back {
            transition: color 0.5s, background-color 0.5s;
        }
        a.page_back:hover {
            opacity: 1;
        }
        .page_back:hover {
            color: #fff;
            background-color: var(--category-color);
        }
        .page_back .icon_arrow use {
            transition: fill 0.5s;
        }
        .page_back:hover .icon_arrow use {
            fill: #fff;
        }
    }
}

/* article_page_nav */
.article_page_nav_link {
    text-decoration: none;
    display: block;
    border: 1px solid;
    color: #fff;
    border-color: #fff;
}
.article_page_nav_link_inner {
    font-weight: 900;
    line-height: 1.25;
    border: 2px solid;
    display: block;
}
.article_page_nav_link,
.article_page_nav_link_inner {
    background-color: var(--category-color);
}
.article_page_nav .icon_arrow use {
    fill: #fff;
}
.prev .article_page_nav_link_inner {
    justify-content: flex-end;
    flex-direction: row-reverse;
}
.prev .icon_arrow {
    rotate: 180deg;
}
.next .article_page_nav_link_inner {
    justify-content: space-between;
}
.article_page_nav_info_txt,
.article_page_nav_info_ttl {
    display: block;
}
.article_page_nav_info_txt {
    font-weight: 700;
    line-height: 1.7;
    color: #333;
}
.article_page_nav_info_ttl {
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
@media (min-width: 641px) {
    .article_page_nav {
        margin-top: 64rem;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 24rem;
    }
    .article_page_nav .is_hide {
        visibility: hidden;
    }
    .article_page_nav_link {
        width: 388rem;
        padding: 4rem;
        border-radius: 8rem;
    }
    .article_page_nav_link_inner {
        padding-block: 18rem;
        padding-inline: 24rem;
        border-radius: 4rem;
        display: flex;
        align-items: center;
    }
    .article_page_nav_info_txt {
        font-size: 12rem;
    }
    .article_page_nav_info_ttl {
        font-size: 16rem;
    }
    .prev .article_page_nav_link_inner {
        gap: 24rem;
    }
    .article_page_nav_info {
        max-width: 276rem;
    }
}
@media (max-width: 640px) {
    .article_page_nav {
        margin-top: 64rem;
    }
    .article_page_nav .is_hide {
        display: none;
    }
    .article_page_nav > li + li {
        margin-top: 16rem;
    }
    .article_page_nav_link {
        padding: 4rem;
        border-radius: 8rem;
    }
    .article_page_nav_link_inner {
        padding-inline: 24rem;
        padding-block: 15rem;
        border-radius: 4rem;
        display: flex;
        align-items: center;
    }
    .article_page_nav_info_txt {
        font-size: 12rem;
    }
    .article_page_nav_info_ttl {
        margin-top: 4rem;
        font-size: 14rem;
    }
    .prev .article_page_nav_link_inner {
        gap: 24rem;
    }
    .article_page_nav_info {
        max-width: 214rem;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        a.article_page_nav_link {
            transition: background-color 0.5s;
        }
        .article_page_nav_link_inner {
            transition: color 0.5s, background-color 0.5s, border-color 0.5s;
        }
        .article_page_nav_info_txt {
            transition: color 0.5s;
        }
        a.article_page_nav_link:hover {
            opacity: 1;
        }
        .article_page_nav_link:hover .article_page_nav_info_txt {
            color: var(--category-color);
        }
        .article_page_nav_link:hover .article_page_nav_link_inner {
            color: var(--category-color);
            border-color: var(--category-color);
            background-color:#fff;
        }
        .article_page_nav_link:hover {
            background-color: #fff;
        }
        .article_page_nav_link .icon_arrow use {
            transition: fill 0.5s;
        }
        .article_page_nav_link:hover .icon_arrow use {
            fill: var(--category-color);
        }
    }
}


/* article_nav */
.article_nav_link {
    text-decoration: none;
    display: block;
    border: 1px solid;
    color: var(--category-color);
    border-color: var(--category-color);
}
.article_nav_link_inner {
    font-weight: 900;
    line-height: 1.25;
    border: 2px solid;
    display: block;
}
.article_nav_link,
.article_nav_link_inner {
    background-color: #fff;
}
.article_nav .icon_arrow use {
    fill: var(--category-color);
}
.prev .article_nav_link_inner {
    justify-content: flex-end;
    flex-direction: row-reverse;
}
.prev .icon_arrow {
    rotate: 180deg;
}
.next .article_nav_link_inner {
    justify-content: space-between;
}
.article_nav_info_txt,
.article_nav_info_ttl {
    display: block;
}
.article_nav_info_txt {
    font-weight: 700;
    line-height: 1.7;
    color: #333;
}
.article_nav_info_ttl {
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
@media (min-width: 641px) {
    .article_nav {
        margin-top: 64rem;
        display: flex;
        justify-content: space-between;
        flex-direction: row-reverse;
        gap: 24rem;
    }
    .article_nav .is_hide {
        visibility: hidden;
    }
    .article_nav_link {
        width: 388rem;
        height: 115rem;
        padding: 4rem;
        border-radius: 8rem;
    }
    .article_nav_link_inner {
        padding-block: 18rem;
        padding-inline: 24rem;
        border-radius: 4rem;
        display: flex;
        align-items: center;
        height: 100%;
    }
    .article_nav_info_txt {
        font-size: 12rem;
    }
    .article_nav_info_ttl {
        font-size: 16rem;
        margin-top: 5rem;
    }
    .prev .article_nav_link_inner {
        gap: 24rem;
    }
    .article_nav_info {
        max-width: 276rem;
    }
}
@media (max-width: 640px) {
    .article_nav {
        margin-top: 64rem;
    }
    .article_nav .is_hide {
        display: none;
    }
    .article_nav > li + li {
        margin-top: 16rem;
    }
    .article_nav_link {
        padding: 4rem;
        border-radius: 8rem;
    }
    .article_nav_link_inner {
        padding-inline: 24rem;
        padding-block: 15rem;
        border-radius: 4rem;
        display: flex;
        align-items: center;
    }
    .article_nav_info_txt {
        font-size: 12rem;
    }
    .article_nav_info_ttl {
        margin-top: 4rem;
        font-size: 14rem;
    }
    .prev .article_nav_link_inner {
        gap: 24rem;
    }
    .article_nav_info {
        max-width: 214rem;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        a.article_nav_link {
            transition: background-color 0.5s;
        }
        .article_nav_link_inner {
            transition: color 0.5s, background-color 0.5s, border-color 0.5s;
        }
        .article_nav_info_txt {
            transition: color 0.5s;
        }
        a.article_nav_link:hover {
            opacity: 1;
        }
        .article_nav_link:hover .article_nav_info_txt {
            color: #fff;
        }
        .article_nav_link:hover .article_nav_link_inner {
            color: #fff;
            border-color: #fff;
            background-color:var(--category-color);
        }
        .article_nav_link:hover {
            background-color: var(--category-color);
        }
        .article_nav_link .icon_arrow use {
            transition: fill 0.5s;
        }
        .article_nav_link:hover .icon_arrow use {
            fill: #fff;
        }
    }
}

/* category */
.article + .category {
	border-image-slice: 33%;
	border-image-repeat: repeat;
}
@media (min-width: 641px) {
    .article + .category {
        border-image-source: url(../img/common/line_pc.svg);
        border-image-width: 32rem 0 0;
    }
}
@media (max-width: 640px) {
    .article + .category {
        border-image-source: url(../img/common/line_sp.svg);
        border-image-width: 16rem 0 0;
    }
}

.article_page_body:nth-child(n + 2) {
    display: none;
}
.paginator_list .active .paginator_list_link {
    background-color: var(--category-color);
}

/* reaction */
.reaction_list {
    display:flex;
    justify-content: end;
}
.reaction_btn {
    cursor: pointer;
    border: none;
    padding:0;
}
.reaction_btn_txt {
    width: 200%;
    margin-left: -50%;
    text-align:center;
    font-weight: 700;
}
.reaction_btn_icon {
    position:relative;
}
.reaction_btn_icon_num {
    border-radius: 9999px;
    border:1px solid #000;
    background-color:#fff;
    color:#000;
    position:absolute;
}
.is_clicked .reaction_btn_txt {
    color:#E60012;
}
.is_clicked .reaction_btn_icon_num {
    color:#E60012;
    border-color:#E60012;
}
[data-initial-num="0"][now-num="0"] .reaction_btn_icon_num {
    opacity:0;
}
@media (min-width: 641px) {
    .reaction {
        margin-top:20rem;
    }
    .reaction_list {
        gap: 24rem;
    }
    .reaction_btn {
        width:28rem;
    }
    .reaction_btn_txt {
        font-size: 10rem;
        line-height: 1.7;
    }
    .reaction_btn_icon_num {
        top: -5rem;
        right: -10rem;
        font-size:10rem;
        line-height:1;
        padding: 1rem 3rem;
    }
}
@media (max-width: 640px) {
    .reaction {
        margin-top:20rem;
    }
    .reaction_list {
        gap: 24rem;
    }
    .reaction_btn {
        width:28rem;
    }
    .reaction_btn_txt {
        font-size: 10rem;
        line-height: 1.7;
    }
    .reaction_btn_icon_num {
        top: -5rem;
        right: -10rem;
        font-size:10rem;
        line-height:1;
        padding: 1rem 3rem;
    }
}

/* recommend */
.recommend {
    position: relative;
}
.recommend_list {
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
}
/* recommend entry */
#recommendEntryIds {
    display: none;
}

.article_list_link {
    position: relative;
    display: block;
    background-color: var(--type-color);
    color:#fff;
    text-decoration: none;
}
.article_list_ttl {
    overflow: hidden;
    font-weight: 700;
    line-height: 1.25;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.article_list_date {
    font-weight: 500;
    line-height: 1;
}
.article_list_link::after {
    content:"";
    width: 48rem;
    height:89rem;
    position:absolute;
    right:14rem;
    bottom:0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: 50% 100%;
}
[data-type="kaisya"] .article_list_link::after {
    background-image: url(../img/index/signs_kaisya.svg);
}
[data-type="monokoto"] .article_list_link::after {
    background-image: url(../img/index/signs_monokoto.svg);
}
[data-type="hito"] .article_list_link::after {
    background-image: url(../img/index/signs_hito.svg);
}
[data-type="kizuna"] .article_list_link::after {
    background-image: url(../img/index/signs_kizuna.svg);
}
[data-type="topics"] .article_list_link::after {
    background-image: url(../img/index/signs_topics.svg);
}
.article_list_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 641px) {
    .recommend {
        margin-top: 64rem;
    }
    .recommend_list {
        gap: 24rem;
    }
    .recommend_list > li {
        width: 388rem;
    }
    .recommend_list > li:nth-child(n + 3) {
        display: none;
    }
    .article_list_link {
        border-radius: 16rem;
        padding:16rem;
        height: 316rem;
    }
    .article_list_inner {
        margin-top: 16rem;
        padding-right: 55rem;
    }
    .article_list_ttl {
        font-size: 16rem;
        line-height: 1.25;
    }
    .article_list_date {
        font-size: 12rem;
        margin-top: 16rem;
        line-height: 1;
    }
}
@media (max-width: 640px) {
        .recommend {
        margin-top: 64rem;
    }
    .recommend_list {
        gap: 24rem;
    }
    .recommend_list > li {
        width: 388rem;
    }
    .recommend_list > li:nth-child(n + 3) {
        display: none;
    }
    .article_list_link {
        border-radius: 16rem;
        padding:16rem;
        height: 282rem;
    }
    .article_list_inner {
        margin-top: 16rem;
        padding-right: 55rem;
    }
    .article_list_ttl {
        font-size: 16rem;
        line-height: 1.25;
    }
    .article_list_date {
        font-size: 12rem;
        margin-top: 16rem;
        line-height: 1;
    }
}

/* modalリンク */
.article_body [data-modal-link]{
    position: relative;
}
.article_body [data-modal-link]::after{
    content:"";
    position: absolute;
    background: url(../img/common/icon_modal.svg) no-repeat 50% 50% / contain;
}
@media (min-width: 641px) {
    .article_body [data-modal-link]::after{
        bottom:10px;
        right:10px;
        width:24px;
        height:25px;
    }
}
@media (max-width: 640px) {
    .article_body [data-modal-link]::after{
        bottom:10px;
        right:10px;
        width:24px;
        height:25px;
    }
}
@media (min-width: 641px) {
    @media (hover:hover) {
        .article_body [data-modal-link] {
            transition: opacity 0.5s;
            cursor: pointer;
        }
        .article_body [data-modal-link]:hover {
            opacity: 0.7;
        }
    }
}

.article_txt div.float_img_box_outer::after {
    content:"";
    display:block;
    clear:both;
}
.float_img_box {
    display: block;
    margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
}
.float_img_box img {
    border: 2px solid #fff;
}
@media (min-width: 641px) {
    .float_img_box {
        width: 50%;
        float: right;
        --margin-top: 10rem;
        --margin-right: 0;
        --margin-bottom: 20rem;
        --margin-left: 20rem;
    }
    .float_img_box[data-direction="left"] {
        float: left;
        --margin-top: 10rem;
        --margin-right: 20rem;
        --margin-bottom: 20rem;
        --margin-left: 0;
    }
}
@media (max-width: 640px) {
    .float_img_box,
    .float_img_box[data-direction="left"] {
        width: 100%;
        --margin-top: 0;
        --margin-right: 0;
        --margin-bottom: 10rem;
        --margin-left: 0;
    }
}