/*メイン*/
.pick-up-1 {margin-top: 2em;}
.pick-up-1-figure {position: relative;overflow: hidden;height: 14rem;margin-left: -1rem;
margin-right: -1rem;}
.pick-up-1-image {position: absolute;bottom: 0;}
.pick-up-1-heading {font-size: 1.6em;margin-top: 1em;color: var(--c-primary)}
.pick-up-1-description {margin-top: 1em;}

/**/
.pick-up-2 {margin-top: 4em;display: grid;gap:1em;grid-template-columns: auto;}
.pick-up-2-heading {font-size: 1.4em;}
.pick-up-2-figure {position: relative;height: 10rem;overflow: hidden;}
.pick-up-2-figure-static{height: unset;}
.pick-up-2-image {position: absolute;height: 120%;bottom: 0;}
.pick-up-2-image-static{aspect-ratio: unset;position: static;height: auto;}
.pick-up-2-description {}
.pick-up-2-figure-parallel{display: flex;height: 100%;}
.pick-up-2-figure-parallel .pick-up-2-figure-parallel-item{flex: 1 1 0;width: 50%;height: 100%;overflow: hidden;position: relative;}
.pick-up-1-figcaption{position: absolute;right: 0;color:var(--c-text);z-index: 2;bottom: 0;font-size: 0.7em;mix-blend-mode:unset;background-color: hsla(0, 0%, 100%,0.50);line-height: 1;padding:0.1em 0.5em;width: fit-content;text-align: right;
}

/*ビフォーアフター*/
.article-before-after{padding-block: 4rem;}
.before-after-scroll {margin-top: 4em;}
.before-after-scroll-title {line-height: 1.2;font-size:1.2em;font-family: var(--ff-ja);position: relative;}
.before-after-scroll-title::after {content: "";background-color: var(--c-text);width: 1px;height: 7.6rem;left: 0;top: 0;position: absolute;left:-0.5rem}
.before-after-scroll-figure {margin-top: 1.5em;position: relative;padding: 2rem;background-color: #fff;display: grid;grid-template-rows: auto;grid-template-columns: auto;gap:1em 1em;}
.before-after-scroll-image-before,
.before-after-scroll-image-after {aspect-ratio: 4 / 4;object-fit: cover;}
.before-after-scroll-image-before {grid-area: 1 / 1 / 2 / 2;}
.before-after-scroll-image-after {grid-area: 1 / 1 / 2 / 2;;}
.before-after-scroll-caption-before,
.before-after-scroll-caption-after {font-family:var(--ff-en);font-weight: bold;color: #FFF;position: absolute;font-size: 2em;line-height: 1;mix-blend-mode: difference;white-space: nowrap;letter-spacing: 1em;}
.before-after-scroll-caption-after{color:var(--c-primary);mix-blend-mode:multiply;}
.before-after-scroll-caption-before {top: 1rem;left:0;}
.before-after-scroll-caption-after {bottom: 1rem;right: 0}

/*QA*/
.article-qa {margin-top: 4em;background-color: #e7f2ff;margin-inline: calc(50% - 50vw);padding: 4em 0;}
/**/
.pick-up-qa {display: grid;gap: 2em;margin-top: 2em;}
.pick-up-qa-item {background-color: #fff;}
.pick-up-qa-figure {width: 100%;height: 14rem;overflow: hidden;position: relative;}
.pick-up-qa-figure::after {content: "";position: absolute;left: 0;top: 0;bottom: 0;right: 0;background-color: var(--c-primary);opacity: 0.5;mix-blend-mode:multiply;}
.pick-up-qa-image {position: absolute;bottom: 0;width: 100%;height: 120%;}
.pick-up-qa-title {z-index: 1;position: absolute;left: 1rem;bottom: 1rem}
.pick-up-qa-title-prefix {font-family: var(--ff-en);color: var(--c-accent) !important;display: block;font-size: 3em;position: relative;}
.pick-up-qa-title-prefix::after {content: "";background-color: var(--c-accent);height: 1px;width: 1.5em;position: absolute;left: 1em;top: 0.9em;}
.pick-up-qa-title-content {font-family: var(--ff-ja);font-weight: bold;color: #FFF;font-size: 1.6em;line-height: 1.4;display: block;letter-spacing: 0.05em;}
.pick-up-qa-description {padding: 1rem;font-size: 0.9em;line-height: 1.4;}

/*施工実績*/
.article-results{padding: 4rem 0;}
.article-results-list {margin-top: 2em;display: grid;gap:3em}
.article-results-list-item {display: grid;gap:0.5em}
.article-results-list-item-figure {}
.article-results-list-item-image {aspect-ratio: 16 / 9;object-fit: cover}
.article-results-list-item-caption {text-align: center;letter-spacing: 0.05em;}

/*5段階の*/
.pick-up-3 {padding: 4rem 0 0;}
.pick-up-3-title {font-size: 1.4em;}
.pick-up-3-description {margin-top: 1em;}
.pick-up-3-note {color: var(--c-primary);font-weight: bold;font-size: 1.2em;margin-top: 1em;line-height: 1.4;}
.pick-up-3-list {display: grid;gap: 1rem;grid-template-columns:repeat(2,1fr);margin-top: 1em;}
.pick-up-3-item {position: relative;border: 1px solid var(--bdc-gray);border-radius: 0.0em;overflow: hidden;padding: 0.4em;}
.pick-up-3-item-number {background-color: var(--c-accent);width: 3rem;height: 3rem;display: flex;border-radius: 50%;font-family: var(--ff-en);align-items: center;justify-content: center;font-weight: bold;position: absolute;left: -0.5rem;top: -0.5rem;font-size: 0.8em;font-weight: bold;}
.pick-up-3-figure {overflow: hidden;border-radius: 0.0em;}
.pick-up-3-image {aspect-ratio: 4 / 3; object-fit: cover;}
.pick-up-3-subtitle {color: var(--c-primary);margin-top: 0.3em;line-height: 1.2;}
.pick-up-3-detail {line-height: 1.4;font-size: 0.9em;margin-top: 0.3em;}

@media (min-width: 500px) {
/*メイン*/
.pick-up-1 {display: grid;grid-template-rows: auto auto auto;grid-template-columns: 1fr 1fr;row-gap: 1rem;column-gap:0;margin-left: calc(50% - 50vw);margin-right: calc(50% - 50vw)}
.pick-up-1-figure{height: 26rem;margin: 0;}
.pick-up-1-figure:nth-of-type(1) {grid-area: 1 / 1 / 2 / 2;}
.pick-up-1-figure:nth-of-type(2) {grid-area: 1 / 2 / 2 / 3;margin-right:0;margin-left: 0;margin-top: 0;}
.pick-up-1-image {margin-left: 0;height: 120%;object-fit: cover;}
.pick-up-1-heading {grid-area: 2 / 1 / 3 / 3;margin-top: 0;padding-top: 1em;font-size: 1.8em;max-width:calc(60rem) ;margin-inline: auto;width: 100%;padding-inline: 1rem;}
.pick-up-1-description {grid-area: 3 / 1 / 4 / 3;margin-top: 0;padding-top: 0;max-width: calc(60rem);margin-inline: auto;width: 100%;padding-inline: 1rem;font-size: 1.0em;}

/**/
.pick-up-2 {gap:1em 3em;grid-template-rows: 1fr auto;grid-template-columns: 2fr 3fr;align-items: end;}
.pick-up-2-heading {grid-area:1 / 1 / 2 / 2}
.pick-up-2-figure {grid-area: 1 / 2 / 3 / 3;height: 20rem;}
.pick-up-2-figure-static {height: auto;}
.pick-up-2-description {grid-area:2 / 1 / 3 / 2}
/**/
.pick-up-2-alt {grid-template-rows:auto;grid-template-columns: 1fr 3fr}
.pick-up-2-alt .pick-up-2-figure{grid-area:1 / 1 / 2 / 3}
.pick-up-2-alt .pick-up-2-description{grid-area:2 / 1 / 3 / 3}

/**/
.pick-up-2-reversal {grid-template-columns: 3fr 2fr;}
.pick-up-2-reversal .pick-up-2-heading {grid-area:1 / 2 / 2 / 3}
.pick-up-2-reversal .pick-up-2-figure {grid-area: 1 / 1 / 3 / 2;}
.pick-up-2-reversal .pick-up-2-description {grid-area:2 / 2 / 3 / 3}

/*QA*/
.pick-up-qa{grid-template-columns: repeat(2,1fr);}
.pick-up-qa-figure {height: 15rem;}
.pick-up-qa-description {padding: 1rem 1.5rem;}
.pick-up-qa-title {left: 1.5rem;}
.article-results-list-outer {overflow: visible;}

/*ビフォーアフター*/
.before-after-scroll-title {margin-left:1rem;padding-left: 0.5em;letter-spacing: 0.05em;}
.before-after-scroll-image-before,
.before-after-scroll-image-after  {aspect-ratio:unset;object-fit: cover;height: calc(100dvh - 10rem); }

/*施工実績*/
.article-results-list {gap:3rem;display: inline-flex;}
.article-results-list-item {width: auto;}
.article-results-list-item-image {aspect-ratio: 16 / 10;width: auto;height: 100dvh;max-height: 50dvh;max-width: unset;}

/*5段階の*/
.pick-up-3-note {font-size: 1.4em;}
.pick-up-3-list{grid-template-columns:repeat(3,1fr);}
.pick-up-3-subtitle {margin-top: 0.6em;font-size: 1.2em;}
.pick-up-3-item {padding: 0.8em;}


}