@charset "UTF-8";
/* CSS Document */
/* ===============================

SINGLE
投稿記事ページ

=============================== */
:root {
    --single-gutter : 3.8em;
}
@media (max-width: 559px) {
    :root {
        --single-gutter : 1.9em;
    }
}
/* ==================

header

*/
.single-header {
	margin-inline: auto;
    margin-top: calc(var(--header-height) + var(--section-gutter));
}
/* 投稿日 */
.post-single__date {
    font-family: var(--number);
    font-weight: 700;
    font-size: var(--txt-sm);
    color: var(--color-main-pale);
}
/* ターム */
.post-single__tram {
    font-family: var(--alphabet);
    font-weight: 700;
    font-size: var(--txt-md);
    color: var(--color-main);
}
.post-single__trams {
    display: flex;
    flex-wrap: wrap;
    gap: 1em 0.5em;
    margin-top: 1.7em;
}
.post-single__tram--case a {
    --tag-txt-size: clamp(0.5rem, calc(0.4rem + 0.5vw), 0.75rem); /* min: 8px, max: 12px */
    display: inline-block;
    font-size: var(--tag-txt-size);
    font-weight: 500;
    line-height: 1;
    color: var(--color-white);
    border-radius: calc(calc(var(--tag-txt-size) + 1em + 0.25em) / 2);
    border: 1px solid var(--color-main);

    padding: 0.5em 1.25em;
    background-color: var(--color-main);
}
@media (any-hover: hover) {
    .post-single__tram--case a {
        -webkit-transition: color .2s var(--easeInSine),
        background-color .2s var(--easeInQuad);
        transition: color .2s var(--easeInSine),
        background-color .2s var(--easeInQuad);
    }
    .post-single__tram--case a:hover,
    .post-single__tram--case a:focus-visible {
        color: var(--color-main);
        background-color: var(--color-white);
    }
}
/* タイトル */
.post-single__ttl {
	font-size: var(--txt-lg);
	font-weight: 700;
	line-height: 1.35;

    margin-top: 0.7em;
}
/* ==================

footer

*/
.post-single__footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    margin-top: var(--section-inner-gutter);
}
.post-single__footer .button {
	font-family: var(--alphabet);
	font-weight: 700;
}


/* ==================

コンテンツ

*/
.post-single__content {
    margin-top: var(--single-gutter);
}

/* -------------
共通マージン */
.post-single__content > *:not(:is(.post-single__flex-photos,.post-single__flex-desc)) + * {
    margin-block: 3.8em;
}
.post-single__inner > * + *,
.post-single__inner > div > * + * {
    margin-top: 1.9em;
}

/* ---------
画像 */
/* 基本設定 */
.post-single__content > img,
.post-single__content > figure,
.post-single__content > figure > img {
    display: block;
    width: 100%;
    height: auto;
    margin-inline: auto;
}
.post-single__photo--lg,
.post-single__photo--md,
.post-single__photo--sm,
.post-single__photo--xs,
.post-single__photo--xxs {
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}
.post-single__photo--lg {
	width: 100%;
}
.post-single__photo--md {
	width: var(--max-width--xxs) !important;
}
.post-single__photo--sm {
	width: calc(560rem / 16) !important;
}
.post-single__photo--xs {
	width: calc(448rem / 16) !important;
}
.post-single__photo--xxs {
	width: calc(336rem / 16) !important;
}
.post-single__photo--lg img,
.post-single__photo--md img,
.post-single__photo--sm img {
	width: 100% !important;
	height: auto !important;
}
.post-single__content *:has(figure:is(.aligncenter, .alignleft, .alignright)) {
	clear: both;
	overflow: hidden;
}

/* -------------
2カラムのセクション */
/* 画像セクション */
.post-single__flex-photos > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.9em var(--gutter-var-common-reg);
}
.post-single__flex-photos > *:has(> :nth-last-child(odd):first-child)::after {
    /* フレックスアイテム（孫要素）が奇数個の場合のみ ::after を有効にする */
    content: "";
    display: inline-block;
    height: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(224rem / 16),
        calc(calc(100% / 2) - var(--gutter-var-common-reg))
    );
}
.post-single__flex-photos > * > * {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(224rem / 16),
        calc(calc(100% / 2) - var(--gutter-var-common-reg))
    );
}
.post-single__flex-photos img {
    width: 100%;
    height: auto;
}
/* -------------------------
説明のセクション */
.post-single__flex-desc > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.9em var(--gutter-var-common-reg);
}
.post-single__flex-desc > *:has(> :nth-last-child(odd):first-child)::after {
    /* フレックスアイテム（孫要素）が奇数個の場合のみ ::after を有効にする */
    content: "";
    display: inline-block;
    height: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(224rem / 16),
        calc(calc(100% / 2) - var(--gutter-var-common-reg))
    );
}
.post-single__flex-desc-inner {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(224rem / 16),
        calc(calc(100% / 2) - var(--gutter-var-common-reg))
    );
}
.post-single__flex-desc-inner > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0.8em;
}
.post-single__flex-desc img {
    width: 100%;
    height: auto;
}
.post-single__flex-desc-heading {
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
}
.post-single__flex-desc-heading::before {
    content: "■";
    font-family: var(--sine);
    color: var(--color-main);
    margin-right: 0.2em;
}
.post-single__flex-desc-inner p {
    margin-top: 0.5em;
    line-height: 1.65;
    text-align: justify;
}
/* -------------------------
説明と画像セクション */
.post-single__flex-desc-and-photo > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 1.9em var(--gutter-var-common-reg);
}
.post-single__flex-desc-and-photo-inner {
    width: 100%;
}
.post-single__flex-desc-and-photo-inner > * {
    display: flex;
    flex-wrap: wrap;
    gap: 1.9em var(--gutter-var-common-reg);
}
.post-single__flex-desc-and-photo-inner > *:has(> :nth-last-child(odd):first-child)::after {
    /* フレックスアイテム（孫要素）が奇数個の場合のみ ::after を有効にする */
    content: "";
    display: inline-block;
    height: 0;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(224rem / 16),
        calc(calc(100% / 2) - var(--gutter-var-common-reg))
    );
}
.post-single__flex-desc-and-photo-inner > * > * {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: max(
        calc(224rem / 16),
        calc(calc(100% / 2) - var(--gutter-var-common-reg))
    );
}
.post-single__flex-desc-and-photo img {
    width: 100%;
    height: auto;
}
.post-single__flex-desc-and-photo-inner p {
    line-height: 1.65;
    text-align: justify;
}
.post-single__flex-desc-and-photo-strapline {
    width: 100%;
    font-size: var(--txt-reg);
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
}
.post-single__flex-desc-and-photo-strapline::before {
    content: "■";
    font-family: var(--sine);
    color: var(--color-main);
    margin-right: 0.2em;
}


/* -------------
テキスト設定 */
/* 見出し */
.post-single__headline {
    font-size: var(--txt-md);
    font-weight: 500;
    padding: 0.5em 1em;
    color: var(--color-white);
    background-color: var(--color-main);
    border-radius: 4px;
}
/* 小見出し */
.post-single__subhead {
    font-size: var(--txt-md);
    font-weight: 500;
    padding-left: 1em;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;
    position: relative;
}
.post-single__subhead::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 100%;
    background-color: var(--color-main);

    position: absolute;
    left: 0;
}
/* 一番小さい見出し */
.post-single__strapline {
    font-size: var(--txt-reg);
    font-weight: 700;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
}
.post-single__strapline::before {
    content: "■";
    font-family: var(--sine);
    color: var(--color-main);
    margin-right: 0.2em;
}
/* テキスト */
.post-single__content > p,
.post-single__txt {
	font-size: var(--txt-reg);
	font-weight: normal;
	letter-spacing: .06em;
	line-height: 2;
	text-align: justify;
}


/* -------------
リスト設定 */
.post-single__list li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    text-align: justify;
}
.post-single__list li::before {
    content: "\02022";
    font-family: var(--sine);
    margin-right: 0.2em;
}
.post-single__list li + li {
    margin-top: 0.5em;
}
/* 数字付き */
.post-single__list.number-list {
    counter-reset: number-list;
}
.post-single__list.number-list li::before {
    content: counter(number-list)".";
    counter-increment: number-list;
}



/* -------------
リンクテキスト */
.post-single__content a:not(.button) {
	color: var(--color-link);
	text-decoration: underline;
	word-break: break-all;
}
.post-single__content a[target="_blank"]:not(.button)::after {
    content: "";
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    line-height: 1;
    background-color: var(--color-link);
	margin-left: 0.5em;

	-webkit-mask-image: url(../../svg/exlink_clip.svg);
	        mask-image: url(../../svg/exlink_clip.svg);
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	        mask-size: cover;
}
@media (any-hover: hover) {
	.post-single__content a:not(.button),
    .post-single__content a[target="_blank"]:not(.button) {
        -webkit-transition: color .2s var(--easeInQuad);
        transition: color .2s var(--easeInQuad);
    }
    .post-single__content a[target="_blank"]:not(.button)::after {
        -webkit-transition: background-color .2s var(--easeInQuad);
        transition: background-color .2s var(--easeInQuad);
    }
	.post-single__content a:not(.button):hover,
    .post-single__content a[target="_blank"]:not(.button):hover {
        color: var(--color-link--hover);
    }
    .post-single__content a[target="_blank"]:not(.button):hover::after {
        background-color: var(--color-link--hover);
    }
}


/* -------------
テーブル */
.post-single__table {
    width: 100%;
}
.post-single__table caption,
.post-single__table figcaption {
    font-size: var(--txt-reg);
    font-weight: 700;
    margin-bottom: 1em;
}
.post-single__table caption::before,
.post-single__table figcaption::before {
    content: "■";
    font-family: var(--sine);
    color: var(--color-main);
    margin-right: 0.2em;
}
.post-single__table thead th {
    background-color: var(--color-main) !important;
    color: var(--color-white);
    font-weight: normal;
}
.post-single__table tr {
    border-bottom: 1px solid var(--color-main-pale);
}
.post-single__table tr:first-child {
    border-top: 1px solid var(--color-main-pale);
}
.post-single__table tr:nth-child(odd) {
    background-color: var(--color-main-thinner);
}
.post-single__table th,
.post-single__table td {
    font-size: var(--txt-reg);
    padding: 1em min(7.5vw , 1em);
}
.post-single__table th {
    text-align: center;
    /* 念の為、widthを指定する場合は以下をアクティブに */
	/* width: min(12em, 196px); */
}
.post-single__table td {
    /* 念の為、文字の折り返し対策 */
    overflow-wrap: anywhere;
}
@media (max-width: 559px) {
    .post-single__table tr {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .post-single__table thead {
        display: none;
    }
    .post-single__table th {
        width: 100%;
        padding-bottom: 0.25em;
        text-align: left !important;
    }
    .post-single__table td {
        padding-top: 0.25em;
        text-align: left !important;
    }
    .post-single__table td + td {
        margin-top: -1em;
    }
}