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

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

/*------------------------------*/
.single-article {
	margin-top: calc(var(--section-inner-gutter) + var(--header-height));
}
@media (max-width:559px) {
   .single-article {
	    margin-top: calc(var(--section-inner-gutter) + calc(var(--header-height) / 2));
    }
}
/* ==================

header

*/
/* 投稿日 */
.post-single__date {
    font-family: var(--number);
    font-weight: 400;
    font-size: var(--txt-sm);
    color: var(--color-main-soft);
}
/* タイトル */
.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-bk);
	line-height: 1.35;

    margin-top: 0.7em;

	padding-bottom: 0.9em;
	position: relative;

	--post-single-headline-border: 1.1em;
}
.post-single__headline::before,
.post-single__headline::after {
	content: "";
	display: block;
	width: var(--post-single-headline-border);
	height: 5px;

	position: absolute;
}
.post-single__headline::before {
	background-color: var(--color-main);
	left: 0;
	bottom: 0;
}
.post-single__headline::after {
	background-color: var(--color-accent);
	left: var(--post-single-headline-border);
	bottom: 5px;
}
/* ==================

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: 5.8em;
}
@media (max-width: 559px) {
    .post-single__footer {
        margin-top: 3.8em;
    }
}
.post-single__back-button {
	--button-gup: min(10vw, var(--txt-md));
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	gap: 0 var(--button-gup);

    font-family: var(--alphabet);
    font-weight: 800;
	font-size: var(--txt-md);
    color: var(--color-white);
    letter-spacing: 0.1em;
	line-height: 1.1;

	width: calc(448rem / 16);
	max-width: 100%;
	min-height: calc(60rem / 16);
	padding-block: 0.5em;
	padding-inline: var(--button-gup);
	background-color: transparent;

	position: relative;
	z-index: 1;
}
.post-single__back-button::before,
.post-single__back-button::after {
	content: "";
	display: inline-block;
	background-color: var(--color-main-pale);

	position: absolute;
	width: 100%;
	left: 0;
}
.post-single__back-button::before {
	top: 0;
	height: 100%;
	z-index: -1;
}
.post-single__back-button::after {
	bottom: 0;
	height: 2px;
	z-index: -2;
}
@media(any-hover: hover) {
	.post-single__back-button {
		-webkit-transition: color .2s var(--easeInSine);
		transition: color .2s var(--easeInSine);
	}
	.post-single__back-button::before {
		-webkit-transition: -webkit-transform .2s var(--easeInQuad);
		transition: -webkit-transform .2s var(--easeInQuad);
		transition: transform .2s var(--easeInQuad);
		transition: transform .2s var(--easeInQuad), -webkit-transform .2s var(--easeInQuad);
		-webkit-transform-origin: left top;
		        transform-origin: left top;
	}
	.post-single__back-button:hover::before ,
	.post-single__back-button:focus-visible::before {
		-webkit-transform: scaleX(0);
		        transform: scaleX(0);
		-webkit-transform-origin: right bottom;
		        transform-origin: right bottom;
	}
	.post-single__back-button:hover ,
	.post-single__back-button:focus-visible {
        color: var(--color-main-pale);
	}
}


/* ==================
共通マージン */
.post-single__content > * + *:not(.post-single__footer-lead-wrapper) {
    margin-block: 2.2em;
}
/* 一番最初の要素のマージン */
.post-single__content > *:first-child {
    /* min: 35px, max: 100px */
    margin-top: clamp(2.188rem, calc(0.563rem + 8.125vw), 6.25rem);
}
/* 画像 */
.post-single__photo--lg:not(:first-child),
.post-single__photo--md:not(:first-child),
.post-single__photo--sm:not(:first-child),
.post-single__photo--xs:not(:first-child),
.post-single__photo--xxs:not(:first-child) {
    margin-block: 3.8em;
}
/* スライダー
assets>css>post>slider-post-single.cssを参照
 */
.js-post-single-slider {
    /* min: 35px, max: 100px */
    margin-block: clamp(2.188rem, calc(0.563rem + 8.125vw), 6.25rem);
}
@media (max-width: 559px) {
	.post-single__photo--lg:not(:first-child),
	.post-single__photo--md:not(:first-child),
	.post-single__photo--sm:not(:first-child),
	.post-single__photo--xs:not(:first-child),
	.post-single__photo--xxs:not(:first-child) {
		margin-block: 2.2em;
	}
}


/* ==================
画像 */
.post-single__content figure:not(.splide__slide) img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	margin: auto;
	-o-object-fit: cover;
	   object-fit: cover;
	line-height: 1;
}
.post-single__photo--lg:not(:first-child),
.post-single__photo--md:not(:first-child),
.post-single__photo--sm:not(:first-child),
.post-single__photo--xs:not(:first-child),
.post-single__photo--xxs:not(:first-child) {
	display: block;
	width: 100%;
}
.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;
}
.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:not([class]),
.post-single__txt {
	font-size: var(--txt-reg);
	font-weight: normal;
	letter-spacing: .07em;
	line-height: 1.56;
	text-align: justify;
}


/* ==================
リンクテキスト */
.post-single__content a {
	color: var(--color-link);
}
.post-single__content a[target="_blank"] {
    color: var(--color-link);
    text-decoration: underline;

    display: -webkit-inline-box;

    display: -ms-inline-flexbox;

    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0.5em;
}
.post-single__content a[target="_blank"]::after {
    content: "";
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    line-height: 1;
    background-color: var(--color-link);

	-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,
    .post-single__content a[target="_blank"] {
        -webkit-transition: color .2s var(--easeInQuad);
        transition: color .2s var(--easeInQuad);
    }
    .post-single__content a[target="_blank"]::after {
        -webkit-transition: background-color .2s var(--easeInQuad);
        transition: background-color .2s var(--easeInQuad);
    }
	.post-single__content a:hover,
    .post-single__content a[target="_blank"]:hover {
        color: var(--color-link--hover);
    }
    .post-single__content a[target="_blank"]:hover::after {
        background-color: var(--color-link--hover);
    }
}

/* ==================
フッターリード */
/* 施工事例のリード */
.post-single__footer-lead-wrapper {
    margin-top: 3.8em;
    padding-top: 3.8em;

    border-top: 1px solid var(--color-main-pale);
}
.post-single__footer-lead {
    font-weight: 700;
}
.post-single__footer-txt-wrapper {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
    gap: 1em;
}
.post-single__footer-txt {
	font-size: var(--txt-reg);
	font-weight: normal;
	letter-spacing: .07em;
	line-height: 1.5;
	text-align: justify;

    margin-top: 0.25em;
}
@media (max-width:559px) {
    .post-single__footer-lead-wrapper {
        margin-top: 3.1em;
        padding-top: 3.1em;
    }
}