@charset "UTF-8";
/********************************************************************************

page-report.css　記事css

********************************************************************************/
/*============================================================
 一覧
*============================================================*/
/* ページヘッダー
---------------------------------------- */
#page-report-list #page-header {
    margin-bottom: 40px;
}
#page-report-list #page-header .post-cnt {
    font-weight: 700;
    font-size: 14px;
    line-height: 140%;
    width: fit-content;
    margin-left: auto;
}

/*============================================================
 詳細
*============================================================*/
/* ページヘッダー
---------------------------------------- */
#page-report #page-header {
    margin-bottom: 40px;
}
/* タイトル */
#page-report #page-header .page-title {
    font-weight: 700;
    font-size: 30px;
    line-height: 180%;
    margin-bottom: 16px;
}
/* 投稿日 */
#page-report #page-header .posted-date {
    font-size: 14px;
    line-height: 140%;
    margin-bottom: 40px;
}
/* アイキャッチ */
#page-report #page-header .eyecatch {
    border-radius: 16px;
    overflow: hidden;
}
#page-report #page-header .eyecatch img {
    width: 100%;
}

/* メタ情報
---------------------------------------- */
#page-report [id^="sec-meta"] {
}
#page-report [id^="sec-meta"] .block-report-meta {
    gap: 8px 40px;
    margin-bottom: 24px;
}
/* タグ情報 */
#page-report [id^="sec-meta"] .label {
    font-weight: 700;
    font-size: 12px;
    line-height: 140%;
    margin-bottom: 16px;
}
#page-report [id^="sec-meta"] .block-report-tag .item {
    font-weight: 700;
}

/* 抜粋
---------------------------------------- */
#page-report #sec-excerpt  {
}

/* SNS
---------------------------------------- */
#page-report [id^="sec-sns"] {
}
#page-report [id^="sec-sns"] .sns-list {
    gap: 16px;
    width: fit-content;
    margin: 0 auto;
}

/* 本文　基本
---------------------------------------- */
#page-report #sec-post {
    overflow-x: hidden;
    margin-bottom: 72px;
}
#page-report #sec-post img {
    width: 100%;
}

/* ライター紹介
---------------------------------------- */
#page-report #sec-writer {
}
#page-report #sec-writer .sec-header {
    padding-bottom: 8px;
    position: relative;
    border-bottom: solid 1px var(--common-color-text);
    margin-bottom: 16px;
}
#page-report #sec-writer .sec-header::before {
    content: "この記事を書いた人";
    display: block;
    font-weight: 700;
    font-size: 12px;
    line-height: 140%;
    color: #BCB3B3;
    position: absolute;
    top: 8px;
    right: 0;
}
#page-report #sec-writer .sec-header .sec-title {
    width: fit-content;
    padding: 0 40px;
    font-weight: 700;
    font-size: 20px;
    line-height: 180%;
    background-image: url(../images/common/icon-fuji.svg), url(../images/common/icon-fuji.svg);
    background-repeat: no-repeat;
    background-position: center left, center right;
    background-size: 24px auto, 24px auto;

}
#page-report #sec-writer .parts-boxes {
    gap: 0 16px;
}
#page-report #sec-writer .image .writer-avatar {
}
#page-report #sec-writer .info {
    flex: 1;
    font-weight: 700;
    font-size: 14px;
    line-height: 180%;
}
#page-report #sec-writer .info .writer-name {
    margin-bottom: 16px;
}
#page-report #sec-writer .info .writer-description {
}

/* おすすめ記事
---------------------------------------- */
#page-report #sec-recommend {
	margin-bottom: 64px;
}
#page-report #sec-recommend .sec-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 180%;
    text-align: center;
    margin-bottom: 24px;
}
#page-report #sec-recommend .block-report-list {
    --gap: 16px;
    --col-cnt: 3;
}
#page-report #sec-recommend .block-report-list .item {
    width: 256px;
}

/* この記事の関連記事
---------------------------------------- */
#page-report #sec-related .sec-title {
    font-weight: 700;
    font-size: 20px;
    line-height: 180%;
    text-align: center;
    margin-bottom: 24px;
}
#page-report #sec-related .block-report-list {
    --gap: 16px;
    --col-cnt: 3;
}
#page-report #sec-related .block-report-list .item {
    width: 256px;
}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1279px) {
    /*============================================================
     詳細
    *============================================================*/
    /* パンくず
    ---------------------------------------- */
    #page-report #breadcrumb .inner {
        max-width: calc(1024px + var(--inner-padding) + var(--inner-padding));
    }

    /* レイアウト
    ---------------------------------------- */
    #page-report #page-layout #main-contents {
        max-width: 1024px;
        margin: 0 auto;
    }

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
    /*============================================================
     一覧
    *============================================================*/
    .report-list .item {
        width: auto;
    }

    /*============================================================
     詳細
    *============================================================*/
    /* SNS
    ---------------------------------------- */
    @media screen and (max-width: 480px) {
    #page-report [id^="sec-sns"] .sns-list .item {
        width: 100px;
    }
    }

    /* ページヘッダー
    ---------------------------------------- */
    /* タイトル */
    #page-report #page-header .page-title {
        font-size: 20px;
    }

}