/*メインビジュアル*/
.section-project-management {margin-top: 2em;background-image: url("../images/quality/process/bg-1.webp"); background-repeat: no-repeat; background-size:cover; background-position: right 50% top 50%;margin-inline: -1rem;padding-bottom: 2rem;}
.project-management-image {position: relative;overflow: hidden;height: 20rem;}
.project-management-image-pic {aspect-ratio: 1 / 1;object-fit: cover;position: absolute;bottom: 0;}
.project-management-body{background-color: hsla(0, 0%, 100%,0.75);-webkit-backdrop-filter: blur(0.5rem);backdrop-filter:blur(0.5rem);padding: 1.5rem 1rem;border-left: 0.5rem solid var(--c-primary);width: 90vw;box-shadow: 0 0 2rem hsla(211, 100%, 32%, 0.15);margin-top: -4rem;margin-left: 5vw;}
.project-management-title {margin-top: 0;line-height: 1.4;font-size: 1.6em;font-family: var(--ff-ja);}
.project-management-description {margin-top: 1em;font-size: 1.2em;}

/*右に画像*/
.quality-section-1 {padding-block: 2rem 2rem;}
.quality-section-1-image {position: relative;}
.quality-section-1-image-pic {max-width: unset;width: 100%;}
.quality-section-1-image-pic-plan ,
.quality-section-1-image-pic-do ,
.quality-section-1-image-pic-check ,
.quality-section-1-image-pic-action {position: absolute;max-width: unset;opacity: 0;width: 100%;}
.quality-section-1-image-pic-plan {width: 28%;left: 42%;top:2%;}
.quality-section-1-image-pic-do {width: 26%;left: 66%;top: 21%;}
.quality-section-1-image-pic-check {width: 24%;left: 43%;top: 54%;}
.quality-section-1-image-pic-action {width: 22%;left: 20.5%;top: 23%;}
.quality-section-1-content {}
.quality-section-1-title {margin-top:1em;line-height: 1.4;font-size: 1.6em;font-family: var(--ff-ja);}
.quality-section-1-description {margin-top: 1em;font-size: 1.0em;}

/*アイコンと説明*/
.quality-section {padding-block: 2rem 2rem;}
.quality-section-heading {}
.quality-section-content {margin-top: 2em;display: flex;gap: 2em;flex-direction: column;}
.quality-article {border-bottom: 1px solid var(--c-primary);padding-bottom: 2em;display: grid;grid-template-rows: 1.5em 4.5em auto;grid-template-columns: 3fr 2fr;gap:1em 1em;}
.quality-article-stage {color: var(--c-accent);font-family:var(--ff-en);font-size: 2.6em;grid-area: 1 / 1 / 2 / 2;line-height: 1;white-space: nowrap;}
.quality-article-title {font-family: var(--ff-ja);font-size: 1.6em;grid-area: 2 / 1 / 3 / 2;color: var(--c-primary);}
.quality-article-figure {grid-area: 1 / 2 / 3 / 3;}
.quality-article-image {margin: -1em;}
.quality-article-description {grid-area: 3 / 1 / 4 / 3;font-size: 0.9em;line-height: 1.4;}


/*工程管理の見える化*/
.quality-section-4 {padding-block: 2rem 2rem;}
.quality-section-4-figure{}
.quality-section-4-figure-image{}
.quality-section-4-content {}
.quality-section-4-title {margin-top:1em;line-height: 1.4;font-size: 1.6em;font-family: var(--ff-ja);}
.quality-section-4-description {margin-top: 1em;font-size: 1.0em;}



/*2カラムで画像、タイトル、本文*/
.quality-section-2 {padding-block: 2rem 2rem;display: flex;gap: 3em; flex-direction: column;}
.quality-section-2-article {border-inline: 1px solid var(--c-primary);padding: 1em;position: relative;}
.quality-section-2-heading {}
.quality-section-2-subtitle {background-color: var(--c-primary);color: #FFF;border-radius:0 0 0  0.0em ;line-height: 1;display: inline-block;padding: 0.8em 0.3em;font-weight: normal;font-size: 0.8em;display: block;width: fit-content;margin-left: auto;-webkit-font-feature-settings: normal;font-feature-settings: normal;-ms-writing-mode: tb-rl; writing-mode: vertical-rl;text-orientation: upright;position: absolute;right: 0;top: 0;z-index: 1;letter-spacing: 0.1em;}
.quality-section-2-title {font-size: 1.2em;display: block;margin-top: 0em;line-height: 1.3;}
.quality-section-2-figure {margin-top: 1em;height: 16rem;overflow: hidden;position: relative;}
.quality-section-2-image {aspect-ratio: 10 / 9;position: absolute;bottom: 0;}
.quality-section-2-description {margin: 1em 0 0;line-height: 1.4;}

/*安全対策フォトギャラリー*/
.quality-section-3-content {display: flex;gap:1em;flex-wrap: wrap;margin-top: 1em;}
.quality-section-3-article {width: calc(50% - (1em * 1/2));}
.quality-section-3-figure {overflow: hidden;height: 7rem;}
.quality-section-3-image {aspect-ratio: 40 / 25;}
.quality-section-3-caption {line-height: 1.4;font-size: 0.8em;padding: 1em 0;}



@media (min-width: 500px) {
/*メインビジュアル*/
.section-project-management{margin-inline: calc(50% - 50vw);display: flex;position: relative;padding-bottom: 6rem;background-position: right 50% top 100%;}
.project-management-image {margin-inline:0;height: 26rem;width: 60%;margin-left: auto;flex-shrink: 0;}
.project-management-image-pic {aspect-ratio: 40 / 26;}
.project-management-body{position:absolute;background-color: hsla(0, 0%, 100%,0.75);-webkit-backdrop-filter: blur(0.5rem);backdrop-filter:blur(0.5rem);padding: 2.5rem 3rem;border-left: 0.8rem solid var(--c-primary);width: 40%;top: 50%;transform: translate(0%,-50%);left: 9rem;margin-top: 0;margin-left: 0;}
.project-management-title {margin-top: 0;font-size: 1.8em;}
.project-management-description {font-size: 1.1em;}

/*右に画像*/
.quality-section-1 {display: flex;gap:3rem;padding: 4rem 0 0;}
.quality-section-1-image {flex-shrink: 0;width: calc(50% - (3em * 1/2));order:2}
.quality-section-1-image-pic {}
.quality-section-1-content {order:1}
.quality-section-1-title {margin-top: 0;}
.quality-section-1-description {}


/*工程管理の見える化*/
.quality-section-4 {display: flex;gap:3rem;padding: 4rem 0 0;}
.quality-section-4-figure{flex-shrink: 0;width: calc(50% - (3em * 1/2));}
.quality-section-4-figure-image{}
.quality-section-4-content {}
.quality-section-4-title {margin-top: 0;}
.quality-section-4-description {}


/*アイコンと説明*/
.quality-section-heading{}
.quality-section-content {flex-direction: row;}
.quality-article {display: flex;flex-direction: column;gap:0rem;flex:1 1 0;border-left: 1px solid var(--c-primary);border-bottom: none;padding-left: 1.5rem;padding-bottom: 0;}
.quality-article-stage {order: 2;padding-top: 2.5rem;}
.quality-article-title {order: 3;font-size: 1.6em;}
.quality-article-figure {order: 1;width: 7rem;}
.quality-article-image {}
.quality-article-description {order: 4;padding-top:0.1em;}

/*安全対策フォトギャラリー*/
.quality-section-3-content {margin-top: 2em;gap:2em}
.quality-section-3-article {width: calc(50% - (2em * 1/2));}
.quality-section-3-caption {font-size: 0.9em;}
.quality-section-3-figure {height: 17rem;}


/*2カラムで画像、タイトル、本文*/
.quality-section-2 {padding: 4rem 0;}
.quality-section-2-article {padding: 0rem 0 0rem 3rem;display: grid;grid-template-rows: auto auto;grid-template-columns: auto 20rem;gap:1em 3em;position: relative;align-content: center;border-right: none;}
.quality-section-2-subtitle {position: absolute;right: 0;top: 0;margin-right: 0;top: 0;z-index: 1;height: 100%;}
.quality-section-2-heading {position: static;display: grid;align-items:end;}
.quality-section-2-title {margin-top: 0;font-size: 1.4em;}
.quality-section-2-figure {grid-area: 1 / 2 / 3 / 3;position: relative;overflow: hidden;height: 18rem;margin-top: 0;}
.quality-section-2-image {aspect-ratio: 4 / 4;position: absolute;}
.quality-section-2-description {margin: 0;}


}