@charset "utf-8";

/* ------------------------------
 column（一覧：記事カード＋サイドメニュー）
------------------------------ */

.column-lead {
    margin-bottom: 8rem;
}

.column-contents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: left;
}

.column-main {
    flex: 1;
    min-width: 0;
}

.column-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4rem;
}

.column-item {
    width: calc(50% - 2rem); /* 760px のとき 352px（1025px まで2列を維持） */
    max-width: 352px;
}

.column-empty {
    text-align: center;
}

.column-side {
    flex-shrink: 0;
    width: 240px;
    padding: 0 2rem;
}

.column-side-box + .column-side-box {
    margin-top: 2rem;
}

.column-side-label {
    display: block;
    color: var(--c-main);
    font-family: var(--ff-en);
    font-size: 1.8rem;
    font-weight: 700;
}

.column-side-list {
    padding: 2rem;
    margin-top: .6rem;
    background-color: var(--c-white);
    border: 2px solid var(--c-main);
    border-radius: 1.6rem;
}

.column-side-list li {
    border-bottom: 1px dashed var(--c-main);
}

.column-side-list li + li {
    margin-top: 1rem;
}

.column-side-list a {
    display: block;
    font-weight: 700;
}

.column-side-list .is-current a {
    color: var(--c-main);
}

.column-side-select {
    margin-top: .6rem;
}

.column-side-select-input {
    display: block;
    width: 100%;
    padding: .6rem 4rem .6rem 2rem;
    color: var(--c-main);
    font-family: inherit;
    font-weight: 700;
    background: var(--c-white) url(../images/common/common_icon05.svg) no-repeat right 2rem center / 14px 8px;
    border: 2px solid var(--c-main);
    border-radius: 1.2rem;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    cursor: pointer;
}

/* ------------------------------
 column-detail（記事ページ）
------------------------------ */

.column-detail {
    padding: 16rem 0 12rem;
    background-color: var(--c-main-pale);
}

.column-detail-inner {
    width: 1156px;
    max-width: var(--section-inner-default);
    padding: 8rem;
    margin: 0 auto;
    background-color: var(--c-white);
    border-radius: 3rem;
    -webkit-box-shadow: var(--shadow-default);
            box-shadow: var(--shadow-default);
}

.column-detail-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 4rem;
}

.column-detail-pic {
    flex-shrink: 0;
    width: 496px;
    max-width: 50%;
}

.column-detail-pht {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: 2.8rem;
}

.column-detail-body {
    flex: 1;
    min-width: 0;
    padding: 2rem 0;
}

.column-detail-category {
    display: inline-block;
    padding: .4rem 1rem;
    color: var(--c-main);
    font-family: var(--ff-heading);
    font-size: 1.8rem;
    font-weight: 700;
    background-color: var(--c-main-pale);
    border-radius: var(--radius-pill);
}

.column-detail-title {
    font-family: var(--ff-heading);
    font-size: 2.4rem;
    line-height: 1.8;
}

.column-detail-date {
    margin-top: 2rem;
    font-weight: 400;
}

.column-detail-date span + span {
    margin-left: 3rem;
}

/* 本文（本文フィールドの出力。「段落」メニューの 見出し大＝H2・中＝H3・小＝H4） */
.column-body {
    margin-top: 4rem;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .05em;
    text-align: left;
}

.column-body * {
    letter-spacing: .05em; /* base.css が全要素に letter-spacing: 0 を当てているので、継承ではなく各要素に指定する */
}

.column-body > * + * {
    margin-top: 4rem;
}

.column-body > p + p {
    margin-top: 2rem;
}

.column-body > h2 + *,
.column-body > h3 + *,
.column-body > h4 + * {
    margin-top: 1rem;
}

.column-body h2 {
    padding: 0 2rem .4rem;
    color: var(--c-white);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.8;
    background-color: var(--c-main);
    border-radius: .4rem;
}

.column-body h3 {
    padding: 0 2rem .4rem;
    color: var(--c-main);
    font-size: 2.2rem;
    font-weight: 700;
    line-height: 1.8;
    border-bottom: 2px solid var(--c-main);
}

.column-body h4 {
    padding-left: 2rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    border-left: 5px solid var(--c-main);
}

.column-body a {
    color: var(--c-link);
    text-decoration: underline;
}

.column-body ul,
.column-body ol {
    padding-left: 2rem;
}

.column-body ul {
    list-style: disc;
}

.column-body ol {
    list-style: decimal;
}

.column-body img {
    max-width: 100%;
    height: auto;
}

.column-body strong {
    font-weight: 700;
}

.column-share {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    gap: 2rem;
    margin-top: 4rem;
}

.column-share-item {
    display: block;
    padding: .4rem 1rem .4rem 3.6rem; /* 左にアイコン（幅 20px ＋ 余白 6px） */
    color: var(--c-white);
    font-family: inherit;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .05em;
    background-repeat: no-repeat;
    background-position: 1rem center;
    border: 0;
    border-radius: .4rem;
    -webkit-box-shadow: var(--shadow-sm);
            box-shadow: var(--shadow-sm);
    cursor: pointer;
}

.column-share-x {
    background-color: var(--c-default);
    background-image: url(../images/column/column_icon01.svg);
    background-size: 20px 18px;
}

.column-share-facebook {
    padding-left: 4rem;
    background-color: var(--c-facebook);
    background-image: url(../images/column/column_icon02.svg);
    background-size: 24px 24px;
}

.column-share-line {
    padding-left: 3.9rem;
    background-color: var(--c-line);
    background-image: url(../images/column/column_icon03.svg);
    background-size: 23px 23px;
}

.column-share-copy {
    padding: .4rem 3.6rem .4rem 1rem; /* 右にアイコン */
    color: var(--c-main);
    background-color: var(--c-main-pale);
    background-image: url(../images/column/column_icon04.svg);
    background-position: right 1rem center;
    background-size: 20px 20px;
}

/* ------------------------------
 column-recommend（関連おすすめ記事）
------------------------------ */

.column-recommend {
    padding: 8rem 0;
}

.column-recommend-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 4rem;
    text-align: left;
}

.column-recommend-item {
    width: 352px;
}

/* ------ max-width:1024px ------ */
@media (max-width:1024px) {
    /* column */
    .column-items {
        gap: 2rem;
    }

    .column-item {
        width: calc(50% - 1rem);
    }
}

/* ------ max-width:767px ------ */
@media (max-width:767px) {
    /* column */
    .column-lead {
        margin-bottom: 4rem;
    }

    .column-contents {
        display: block;
    }

    .column-items {
        gap: 1rem;
    }

    .column-item {
        width: calc(50% - .5rem);
    }

    .column-item .blog-item,
    .column-recommend-item .blog-item {
        border-radius: .9rem .9rem 0 0;
    }

    .column-item .blog-item-body,
    .column-recommend-item .blog-item-body {
        padding: 1rem;
    }

    .column-item .blog-item-meta,
    .column-recommend-item .blog-item-meta {
        display: block;
    }

    .column-item .blog-item-category,
    .column-recommend-item .blog-item-category {
        margin-top: .4rem;
    }

    .column-item .blog-item-category li,
    .column-recommend-item .blog-item-category li {
        font-size: 1.2rem;
    }

    .column-item .blog-item-title,
    .column-recommend-item .blog-item-title {
        margin-top: .4rem;
        font-size: 1.4rem;
    }

    .column-side {
        width: auto;
        padding: 0;
        margin-top: 2rem;
    }

    .column-side-label {
        font-size: 1.6rem;
    }

    .column-side-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        gap: 1rem;
    }

    .column-side-list li {
        width: calc(50% - .5rem);
        font-size: 1.4rem;
    }

    .column-side-list li + li {
        margin-top: 0;
    }

    .column-side-select-input {
        font-size: 1.4rem;
    }

    /* column-detail */
    .column-detail {
        padding: 14rem 0 8rem; /* デザインは 100px だが、パンくず（2行になる）を入れる分 40px 下げる */
    }

    .column-detail-inner {
        width: var(--section-inner-width-default);
        max-width: none;
        padding: 2rem;
        border-radius: 1.6rem;
    }

    .column-detail-header {
        display: block;
    }

    .column-detail-pic {
        width: auto;
        max-width: none;
    }

    .column-detail-pht {
        border-radius: 1.6rem;
    }

    .column-detail-body {
        padding: 1rem 0 0;
    }

    .column-detail-category {
        font-size: 1.6rem;
    }

    .column-detail-title {
        font-size: 1.6rem;
    }

    .column-detail-date {
        margin-top: 1rem;
        font-size: 1.4rem;
    }

    .column-detail-date span + span {
        margin-left: 1rem;
    }

    .column-body {
        margin-top: 2rem;
    }

    .column-body > * + * {
        margin-top: 2rem;
    }

    .column-body h2 {
        font-size: 2rem;
    }

    .column-body h3 {
        font-size: 1.8rem;
    }

    .column-body h4 {
        font-size: 1.6rem;
    }

    .column-share {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
    }

    .column-share-item {
        padding: .4rem 1rem .4rem 3.4rem;
        font-size: 1.6rem;
    }

    .column-share-x {
        background-size: 18px 17px;
    }

    .column-share-facebook {
        padding-left: 3.4rem;
        background-size: 18px 18px;
    }

    .column-share-line {
        padding-left: 3.4rem;
        background-size: 18px 18px;
    }

    .column-share-copy {
        padding: .4rem 3.2rem .4rem 1rem;
        background-size: 16px 16px;
    }

    /* column-recommend */
    .column-recommend {
        padding: 4rem 0;
    }

    .column-recommend-list {
        gap: 1rem;
    }

    .column-recommend-item {
        width: calc(50% - .5rem);
    }
}