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

/* POST SINGLE
シングルページ */

/*------------------------------*/
body {
	background-color: var(--color-main-thin);
}
.single-article {
	margin-top: calc(var(--section-inner-gutter) + var(--header-height));
	padding: 3.8em var(--gutter-var-lg);
	background-color: var(--color-base);
	border-radius: 8px;
}
/* ==================

header

*/
.single-header {
	width: var(--max-width--xxs);
	margin-inline: auto;
}
/* 投稿日 */
.post-single__date {
    font-family: var(--number);
    font-weight: 700;
    font-size: var(--txt-sm);
    color: var(--color-main-pale);
}
/* タイトル */
.post-single__headline {
    /* min: 20px, max: 35px */
	font-size: clamp(1.25rem, calc(0.875rem + 1.875vw), 2.188rem);
	font-weight: 700;
	color: var(--color-main);
	line-height: 1.35;

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

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: 3.8em;
	padding-top: 3.8em;

	border-top: 1px solid var(--color-main-pale);
}
.post-single__footer .button {
	font-family: var(--alphabet);
	font-weight: 700;
}


/* -------------
共通width */
.post-single__item,
.post-single__links,
.post-single__content > p,
.post-single__txt {
	max-width: var(--max-width--xxs);
	margin-inline: auto;
}

/* -------------
共通マージン */
.post-single__content > * + * {
    margin-block: 3.8em;
}

/* -------------
画像 */
.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: var(--max-width--xs) !important; */
	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;
}


/* -------------
テキスト */
.post-single__content > p,
.post-single__txt {
	font-size: var(--txt-reg);
	font-weight: normal;
	letter-spacing: .07em;
	line-height: 2;
	text-align: justify;
}


/* -------------
項目 */
.post-single__item .subhead {
	font-size: var(--txt-reg);
	font-weight: 700;
}
.post-single__item .subhead::before {
	content: "■";
	font-family: var(--sine);
	color: var(--color-main);
	margin-right: 0.3em;
}
.post-single__item p {
	line-height: 1.5;
	margin-top: 0.5em;
}


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

	-webkit-mask-image: url(../../svg/icon_exlink.svg);
	        mask-image: url(../../svg/icon_exlink.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-main-hover);
    }
    .post-single__content a[target="_blank"]:not(.button):hover::after {
        background-color: var(--color-main-hover);
    }
}