@charset "UTF-8";

/* media query : mobile */
@media screen and (max-width:768px) {}

/* media query : desktop */
@media screen and (min-width:769px) {}

/* media query : tablet */
@media screen and (min-width:769px) and (max-width:1024px) {}

/* movie
--------------------------------------------------------------*/
#opv-wrap {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.8s ease;
}

#opv-wrap.show {
	opacity: 1;
}

video#opv {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
#skip-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  color: var(--black);
  border: none;
  border-radius: 75rem;
  pointer-events: auto;
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
  font-weight: bold;
  left: calc(50% - 60rem);
  padding: 8rem 20rem 6rem;
  font-size: 18rem;
  width: 120rem;
  bottom: 120rem;
}
#skip-btn:hover {
  transform: scale(1.1);  /* 1.1倍に拡大 */
  opacity: 0.8;  /* 少し透明に（オプション） */
}
@media screen and (min-width: 769px) {
video#opv source.sp {
  display: none;
}
video#opv source.pc {
  display: block;
}
#skip-btn {
  left: calc(50% - 70rem);
  padding: 10rem 20rem 8rem;
  font-size: 22rem;
  width: 140rem;
  bottom: 50rem;
}
}


/* 2.0 header
--------------------------------------------------------------*/
.page-home .header-top {
	background: none;
	box-shadow: none;
}

/* topページ　共通
--------------------------------------------------------------*/
html,
body.page-home {
	margin: 0;
	padding: 0;
	pointer-events: auto;
}

html.loading {
	overflow: hidden;
}

body.page-home.no-scroll {
	overflow: hidden;
	height: 100vh;
}

.page-home main {
	padding-top: 0;
}

/* mv-animation
--------------------------------------------------------------*/
.mv-wrapper {
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.pizza-chart {
	position: fixed;
	top: 52%;
	left: 50%;
	width: 100vmin;
	height: 100vmin;
	transform-origin: center center;
  pointer-events: none !important;
}

.pizza-chart .center-logo {
	width: 24vmin;
	height: 25vmin;
	max-width: 260rem;
	max-height: 269rem;
	object-fit: contain;
	margin-top: -2vh;
	/* 位置に関するスタイル */
	position: absolute;
	top: 53%;
	left: 50%;
	transform: translate(-50%, -50%);
}
@media screen and (max-width: 768px) {
  .pizza-chart .center-logo {
    width: 100rem;   /* ← 現在の値より少し大きく */
    height: 100rem;  /* ← 同じ値で正円 */
  }
}
.pizza-chart .circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 28vmin;
	height: 28vmin;
	opacity: 0;
  pointer-events: auto;
  cursor: pointer;
}

.pizza-chart .circle img {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.pizza-chart .circle-link {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  transition: transform 0.3s ease;
  position: relative;
  pointer-events: auto;
  cursor: pointer;
}

.pizza-chart .circle-link:hover {
  transform: scale(1.05);
}
.pizza-chart .circle svg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}


/* 背景
--------------------------------------------------------------*/
.bg-layer {
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	opacity: 1;
	transition: opacity 0.5s ease-in-out;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
}

.bg-layer .bg {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity 0.8s ease;
}

.bg-layer .bg.is-active {
	opacity: 1;
}

.bg-layer .bg.is-active .obj {
	opacity: 1;
}

.bg-group {
  pointer-events: none;
	width: 100%;
	height: 100%;
	transform-origin: center center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
}

.obj {
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1;
	opacity: 0;
}

.circle-wrap {
	position: relative;
	display: inline-block;
}

.circle-wrap svg {
	position: relative;
	width: 100%;
	height: auto;
	overflow: visible;
}

.bg-circle {
	transform-box: fill-box;
	transform-origin: center center;
	pointer-events: none;
}

.obj-img {
	width: 100%;
	height: auto;
}

.obj svg {
	overflow: visible;
}

.obj svg path.bg-circle {
	width: auto;
	height: auto;
}

.bg-circle {
	transform-box: fill-box !important;
	transform-origin: center center !important;
	transform: scale(1);
	transition: transform 0.5s ease;
	pointer-events: none;
}
.bgSection1 .obj1 {
	width: 21vw;
	height: auto;
	z-index: 1;
}
.bgSection1 .obj2 {
	width: 140vw;
	height: auto;
	z-index: 2;
}
.bgSection1 .obj3 {
	width: 130vw;
	height: auto;
}
.bgSection2 .obj1 {
	width: 160vw;
	height: auto;
}
.bgSection2 .obj2 {
	width: 160vw;
	height: auto;
}
.bgSection2 .obj3 {
	width: 160vw;
	height: auto;
}
.bgSection3 .obj1 {
	width: 154vw;
	height: auto;
}
.bgSection3 .obj2 {
	width: 144vw;
	height: auto;
}
.bgSection3 .obj3 {
	width: 144vw;
	height: auto;
}
.bgSection4 .obj2 {
	width: 50vw;
	height: auto;
}
.bgSection4 .obj3 {
	width: 80vw;
	height: auto;
}
.bgSection5 .obj1 {
	width: 120vw;
	height: auto;
}
.bgSection5 .obj2 {
	width: 19vw;
	height: auto;
}
.bgSection5 .obj3 {
	width: 95vw;
	height: auto;
}
.obj path.bg-circle {
	top: 0;
	left: 0;
	transform: translate(0, 0) scale(1);
}

@media screen and (min-width:769px) {
.bgSection1 .obj1 {
	width: 21vw;
	height: auto;
}
.bgSection1 .obj2 {
	width: 80vw;
	height: auto;
}
.bgSection1 .obj3 {
	width: 71.8vw;
	height: auto;
}
.bgSection2 .obj1 {
	width: 114vw;
	height: auto;
}
.bgSection2 .obj2 {
	width: 114vw;
	height: auto;
}
.bgSection2 .obj3 {
	width: 114vw;
	height: auto;
}
.bgSection3 .obj1 {
	width: 83.4vw;
	height: auto;
}
.bgSection3 .obj2 {
	width: 83.4vw;
	height: auto;
}
.bgSection3 .obj3 {
	width: 83.4vw;
	height: auto;
}
.bgSection4 .obj2 {
	width: 28.2vw;
	height: auto;
}
.bgSection4 .obj3 {
	width: 46.3vw;
	height: auto;
}
.bgSection5 .obj1 {
	width: 100vw;
	height: auto;
}
.bgSection5 .obj2 {
	width: 19vw;
	height: auto;
}
.bgSection5 .obj3 {
	width: 89.4vw;
	height: auto;
}
.obj path.bg-circle {
	top: 0;
	left: 0;
	transform: translate(0, 0) scale(1);
}

}


.obj-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.5);
	transform-origin: 50% 50%;
	opacity: 0;
}

.transition-overlay {
	position: fixed;
	/* 常に画面全体に固定 */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	/* 中央寄せ */
	justify-content: center;
	align-items: center;
	/* すべての上 */
	overflow: hidden;
	pointer-events: none;
	/* スクロール操作は下に通す */
}




/* header
--------------------------------------------------------------*/
.page-home .header-top {
	padding-top: 20rem;
}

.page-home .header.is-hidden {
	opacity: 0;
	visibility: hidden;
}

.page-home .header {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease-in-out;
	pointer-events: painted;
}

/* scroll-down
--------------------------------------------------------------*/


.scroll-down {
	opacity: 0;
	visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
	position: fixed;
	bottom: 0;
  left: 16rem;
}
.scroll-down.is-show {
	opacity: 1;
	visibility: visible;
}
.scroll-down a {
	color: var(--black);
	text-decoration: none;
	text-transform: uppercase;
  line-height: 1;
  position: absolute;
	font-size: 18rem;
  transform: rotate(90deg) translate(0,4em);
  left: -50%;
  bottom: 6em;
  width: 8em;
  height: 14rem;
	font-size: 14rem;
}

.scroll-down:before {
	content: "";
	position: absolute;
	bottom: 0;
	left: -3px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--black);
	animation:
		circlemove 1.6s ease-in-out infinite,
		cirlemovehide 1.6s ease-out infinite;
}
.scroll-down:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 1px;
	height: 4vh;
	background: #000;
}
@media screen and (min-width:769px) {
.scroll-down {
	position: fixed;
	bottom: 0;
	left: 50%;
}
.scroll-down a {
	color: var(--black);
	text-decoration: none;
	text-transform: uppercase;
  line-height: 1;
  width: 130rem;
  height: 18rem;
	font-size: 18rem;
  position: absolute;
  transform: translateX(-50%);
	left: -50%;
	bottom: 4.5vh;
}

}
@media screen and (min-width:1025px) {

}
@keyframes circlemove {
	0% {
		bottom: 4vh;
	}

	100% {
		bottom: 0px;
	}
}

@keyframes cirlemovehide {
	0% {
		opacity: 0
	}

	50% {
		opacity: 1;
	}

	80% {
		opacity: 0.9;
	}

	100% {
		opacity: 0;
	}
}



/* section1~5
--------------------------------------------------------------*/
.vertical-wrapper {
	width: 100vw;
	height: 100vh;
	position: fixed;
	pointer-events: auto;  /* スクロール可能に */
}

.section.front-sec {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	height: 100vh;
	margin-top: 0;
	margin-bottom: 0;
	overflow: hidden;
	position: inherit;
	opacity: 0;
	transition: opacity 0.1s;
	visibility: hidden;
	pointer-events: auto;
}

.page-home .section.front-sec.is-active {
	opacity: 1;
	transform: scale(1);
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease;
}

.page-home .pager {
    position: absolute;
    bottom: 50%;
    left: -50%;
    transform: rotate(90deg) translate(0, -7.5em);
    width: 16em;
    height: 1.5em;
    font-size: 14rem;
}

.page-home .front-sec .container {
  flex-direction: column;
  justify-content: center;
  align-items: unset;
  row-gap: 4vh;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 20rem 10rem 20rem;

}

.front-sec .flex-left {
  flex: none;
	padding-left: 30rem;
	position: relative;
}

.page-home .front-sec .number {
max-width: 100rem;
    aspect-ratio: 212 / 218;
    position: absolute;
    bottom: 75%;
    left: -5rem;
}

.page-home .front-sec .title-area {
	display: flex;
	flex-direction: column;
}

.page-home .front-sec .page-title.jp {
	display: inline-block;
	width: max-content;
	margin: 10rem 0 15rem;
	padding: 4rem 10rem 0;
	border-radius: 5rem;
	color: var(--text-black);
	background: var(--white);
	font-weight: 500;
	font-size: 18rem;
  line-height: 1.7;

}

.page-home .front-sec .page-title.en {
	display: block;
	color: var(--white);
	font-size: 54rem;
	font-weight: 600;
	line-height: 1.1;
}

.page-home .button-round.w-home {
	margin-left: 0;
	margin-right: auto;
	position: relative;
	width: 140rem;
	height: 36rem;
	margin-top: 0;
	font-size: 16rem;
}
.page-home .main .button-round.w-home.arrow::before {
    border-top: 2rem solid var(--white);
    border-right: 2rem solid var(--white);
    right: 15rem;
}

.page-home .button-round.text-white a,
.page-home .button-round.text-white a:link,
.page-home .button-round.text-white a:visited {
	color: var(--white);
	background: var(--text-black);
  padding-right: 5rem;
}

.front-sec .flex-right {
	display: flex;
	justify-content: flex-end;
}

.front-sec .cnt-img {
	max-width: 290rem;
  width: 34vh;
  aspect-ratio: 522 / 538;
}



@media screen and (min-width: 769px) {
.page-home .pager {
  line-height: 1;
	position: absolute;
  bottom: 4.5vh;
	left: 0;
  transform: rotate(0deg);
  font-size: 18rem;
}
.page-home .front-sec .container {
	flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: flex-end;
  height: fit-content;
  padding: 0 60rem;
}
.front-sec .flex-left {
  flex: 0 0 430rem;
  padding-left: 30rem;
}
.page-home .front-sec .number {
  max-width: 150rem;
	bottom: 80%;
  left: -60rem;
}
.page-home .front-sec .page-title.jp {
	margin: 20rem 0 40rem;
	font-size: 30rem;
	line-height: 1.3;
}
.page-home .front-sec .page-title.en {
	font-size: 80rem;
}
.page-home .button-round.w-home {
	width: 200rem;
	height: 45rem;
	font-size: 20rem;
}
.page-home .button-round.w-home.arrow::before {
    right: 20rem;
}
.front-sec .cnt-img {
	max-width: 400rem;
  width: auto;
}

}

@media screen and (min-width: 1025px) {
.page-home .pager {
  margin-left: 10rem;
  bottom: 4vh;
}
.page-home .front-sec .number {
  max-width: 212rem;
	bottom: 70%;
}
.page-home .front-sec .page-title.jp {
	margin: 30rem 0 60rem;
	font-size: 40rem;
}
.page-home .front-sec .page-title.en {
	font-size: 110rem;
}
.page-home .button-round.w-home {
	width: 220rem;
	height: 60rem;
	font-size: 25rem;
}
.front-sec .cnt-img {
	max-width: 522rem;
}
}


/* section6~section8
--------------------------------------------------------------*/
.section6,
.section7,
.section8 {
	visibility: hidden;
	opacity: 0;
}

/* section6
--------------------------------------------------------------*/
.section6 {
	width: 100%;
	height: 100vh;
	min-height: 100vh;
	overflow: hidden;
	pointer-events: none;
	transition: none;
	position: relative;
	top: 0;
	left: 0;
}

.section6 .horizontal-wrapper {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	overflow: visible;
	position: relative;
}

/* 1. 日本語タイトル */
.section6 .title-area {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	opacity: 1;
	visibility: visible;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

}

.section6 .title-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-direction: column;
	height: 100%;
	transform: translateY(-15%);
}

.section6 .title-area .title-jp {
	display: block;
	width: 100%;
	height: 60rem;
	color: var(--text-black);
	font-size: 50rem;
	font-weight: 400;
	text-align: center;
	clip-path: inset(130% 0% 0% 0%);
}
.section6 .title-area .title-en {
  display: block;
  writing-mode: vertical-lr;  /* 縦書き */
  position: absolute;
  left: 0;
  top: 55%;
  transform: translateY(-50%);
  font-size: 120rem;
  line-height: 0.65;
  letter-spacing: 0.05em;
  opacity: 0;
}

/* 横スクロールする本体 */
.section6 .strength-scroll {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
  gap: 0;
	width: max-content;
	height: 75%;
  height: 100vh;
	background: var(--white);
	transform: translate(100vw,10vh);
	/* ★初期状態: 画面外（右） */
	overflow: visible;
	position: relative;
}

.section6 .strength-group {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	flex: 0 0 120vw;
	/* 各グループが1.2画面分の幅を持つ */
	box-sizing: border-box;
}

@media screen and (min-width:769px) {
.section6 .title-wrap {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	flex-direction: column;
	height: 100%;
	transform: translateY(0);
}
.section6 .title-area .title-en {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
  writing-mode: horizontal-tb;
	height: 100%;
	font-size: 240rem;
	line-height: 0.65;
	position: absolute;
  top: unset;
  left: unset;
	bottom: 0;
	opacity: 0;
	transform: translateY(50px);
}
/* 横スクロールする本体 */
.section6 .strength-scroll {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-wrap: nowrap;
	width: max-content;
	height: 54%;
	background: var(--white);
	transform: translateX(100vw);
	/* ★初期状態: 画面外（右） */
	overflow: visible;
	position: relative;
}
.section6 .strength-group {
	flex: 0 0 100vw;
  padding-right: 0;
	/* 各グループが1.2画面分の幅を持つ */
}
}

.reason-card-item {
	flex: 0 0 auto;
	width: 320rem;
	max-width: fit-content;
	margin-right: 40rem;
	opacity: 0;
	visibility: hidden;
	position: relative;
	transform: translateY(50rem);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reason-card-item.fadeUp {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.reason-card-item:nth-of-type(3) {
  margin-right: 6vw;
}
.reason-card-item .number {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	position: absolute;
	top: -45rem;
	z-index: 1;
    width: 76rem;
    height: 76rem;
	font-size: 50rem;
	left: calc(50% - 38rem);
}
.reason-card-item .card-text {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 320rem;
	height: auto;
  aspect-ratio: 412/180;
	padding: 60rem 30rem 30rem;
	text-align: center;
	font-weight: 500;
	border-top-left-radius: 30rem;
	border-top-right-radius: 30rem;
	overflow: hidden;
}
.reason-card-item .card-img {
	width: 320rem;
	height: auto;
  aspect-ratio: 412/290;
	border-bottom-left-radius: 30rem;
	border-bottom-right-radius: 30rem;
	overflow: hidden;
}
@media screen and (min-width:769px) {
.reason-card-item {
  flex: 0 0 auto;
  width: 400rem;
  margin-right: 80rem;
}
.reason-card-item:nth-of-type(3) {
  margin-right: 2vw;
}
.reason-card-item .number {
	width: 90rem;
	height: 90rem;
	font-size: 50rem;
	left: calc(50% - 45rem);
}
.reason-card-item .card-text {
	width: 412rem;
	height: 180rem;
	padding: 60rem 30rem 30rem;
}
.reason-card-item .card-img {
	width: 412rem;
}

}
.information-item {
	display: flex;
	justify-content: flex-end;
	flex: 0 0 120vw;
	width: 120vw;
	height: 100vh;
	text-align: center;
	position: relative;
	opacity: 0;
	transition: opacity 0.6s ease;
	will-change: transform;
}

.information-item.fadeIn {
	opacity: 1;
	transition: opacity 2.5s ease-out;
}

.information-item .information-item-inner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: 120vw;
	height: 100%;
	margin-left: 70rem;
	position: relative;
	will-change: transform;
  overflow: hidden;
	/* 横移動は中身だけ動かす */
}

.information-item .information-image {
	width: 120vw;
  max-width: none;
	height: 100vh;
	aspect-ratio: 8 / 5;
	border-top-left-radius: 500rem;
	border-bottom-left-radius: 500rem;
	transition: border-radius 0.6s ease;
	overflow: hidden;
	position: absolute;
	left: 0;
}

.information-item .information-image.no-radius {
	border-top-left-radius: 0rem;
	border-bottom-left-radius: 0rem;
	transition: border-radius 2.5s ease;
}

.information-item .information-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.information-item .cnt-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: auto;
	margin-right: -5%;
	margin-top: 35vh;
	position: relative;
}

.information-item .bg-image {
	display: block;
	width: 50%;
	height: auto;
  margin-top: 120rem;
  margin-left: 60vw;
	opacity: 0.3;
}

.information-item .cnt-area {
	position: absolute;
}

.information-item .cnt-area .title2 {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	flex-direction: column;
	text-align: left;
}

.information-item .cnt-area .title2 .title-en {
	margin-bottom: 20rem;
	font-size: 50rem;
	line-height: 0.9;
}

.information-item .cnt-area .title2-text {
  margin-bottom: 25rem;
	font-size: 20rem;
	font-weight: 400;
	line-height: 1.1;
  text-align: left;
}

@media screen and (min-width:769px) {
.information-item {
	flex: 0 0 100vw;
	width: 100vw;
}
.information-item .information-item-inner {
  width: 100vw;
  margin-left: 0;
}
.information-item .information-image {
  width: 100vw;
  left: 0;
}
.information-item .cnt-wrap {
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 526rem;
	height: 549rem;
	margin-right: -5%;
	margin-top: 35vh;
	position: relative;
}
.information-item .cnt-area .title2-text {
	font-size: 50rem;
}
.information-item .bg-image {
	width: 100%;
  margin-top: 0;
  margin-left: 0;
}

}
.section6 .sun-trigger {
	position: absolute;
	top: 0;
	right: 0;
	/* ← 情報エリアの右端 */
	width: 1px;
	height: 100%;
	pointer-events: none;
	opacity: 0;
}

.section6 .sun {
	width: 120vw;
	height: 120vw;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	position: fixed !important;
	bottom: 0;
	left: 50% !important;
	will-change: transform, opacity;
}


@media screen and (min-width: 769px) {
.section6 .title-area .title-jp {
	display: block;
	width: 480rem;
	height: 100rem;
	color: var(--text-black);
	font-size: 80rem;
	font-weight: 400;
	text-align: center;
	clip-path: inset(130% 0% 0% 0%);
}


}
@media screen and (min-width: 1025px) {

}






/* section7
--------------------------------------------------------------*/
.section.section7 {
	width: 100vw;
	height: 100vh;
	padding-top: 50rem;
	padding-bottom: 50rem;
	overflow: hidden;
	pointer-events: auto !important;
	visibility: visible;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	transform: translate(0px, 0px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.section7 .container {
  justify-content: flex-end;
	flex-direction: column;
	width: 100%;
	height: 100%;
  padding-left: 30rem;
  padding-right: 30rem;
}
.section7 .container.flex-box {
  text-align: left;
}
.section7 .flex-left {
  position: relative;
  z-index: 1;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex: none;
	width: 100%;
}
.section7 .flex-right {
	position: relative;
  z-index: 0;
	display: flex;
  justify-content: center;
	align-items: center;
	flex: none;
	width: 100%;
	height: 100%;

}
.section7 .title-area {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
  row-gap: 10rem;
}
.section7 .title-area .title {
	font-size: 50rem;
  line-height: 1;
}
.section7 .title-area .title-text {
	font-size: 16rem;
	font-weight: 400;
	line-height: 1.3;
}

@media screen and (min-width: 769px) {
.section7 .container {
  justify-content: center;
	flex-direction: row;
	width: 100%;
	height: 100%;
  padding-left: 0;
  padding-right: 0;
}
.section7 .container.flex-box {
  text-align: left;
  padding-left: 80rem;
  padding-right: 0;
}
.section7 .flex-left {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 3.5 1 0%;
  min-width: 284rem;
  margin-bottom: 10vh;
}
.section7 .flex-right {
	display: flex;
	align-items: center;
  justify-self: center;
	flex: 6.5 1 0%;
	margin-right: -60rem;
}

.section7 .title-area {
row-gap: 20rem;
}
.section7 .title-area .title {
  font-size: 80rem;
}
.section7 .title-area .title-text {
  font-size: 38rem;
}
}

@media screen and (min-width: 1025px) {
.section7 .container.container {
  padding-left: 80rem;
  padding-right: 0;
}
.section7 .flex-left {
	/* flex: 3.5 1 0%;
  min-width: 284rem; */
  margin-bottom: 20vh;
}
.section7 .title-area .title {
  font-size: 100rem;
}
.section7 .title-area .title-text {
  font-size: 50rem;
}

}

/* flex-right スライドコンテナー -------------*/
.page-home .slide-container {
	width: 100%;
	height: 63%;
}
.page-home .slide {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.8s ease-in-out;
	position: absolute;
	top: 0;
	left: 0;
}
.page-home .slide.show {
	opacity: 1;
}

.section7 .swiper-slide {
  padding: 2rem;
}



.recruit-card-item {
	display: flex;
	justify-content: center;
  align-items: flex-end;
	flex-direction: column;
	width: 100%;
	margin-right: -10rem;
}
.recruit-card-item .item-left,
.recruit-card-item .item-right {
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 70%;
	max-width: 230rem;
}
.recruit-card-item .item-left {
	background: var(--black);
	margin-right: 0;
  margin-bottom: -40rem;
}
.recruit-card-item .item-right {
	margin-left: 0;
  z-index: -1;
}
.recruit-card-item .card-img {
	width: 100%;
	height: 100%;
	position: relative;
}
.slide[data-slide="1"] .recruit-card-item .card-img {
  display: flex;
  align-items: flex-start;
  height: auto;
  width: 200rem;
  margin-top: 10rem;
}
.recruit-card-item .card-img .slide01-img {
    position: relative;
    display: block;
    width: 100%;
    height: 200rem;
    opacity: 40%;
}
.recruit-card-item .card-title {
	font-size: 28rem;
	font-weight: 400;
	line-height: 1;
}
.recruit-card-item .card-text {
	font-size: 16rem;
}


@media screen and (min-width: 769px) {
.recruit-card-item {
  align-items: flex-start;
	flex-direction: row;
	margin-right: -10rem;
}
.recruit-card-item .item-left,
.recruit-card-item .item-right {
	width: 100%;
	max-width: 498rem;
}
.recruit-card-item .item-left {
	margin-right: -30rem;
}
.recruit-card-item .item-right {
	margin-left: -30rem;
}
.recruit-card-item .card-img {
	width: 100%;
	position: relative;
}
.slide[data-slide="1"] .recruit-card-item .card-img {
  display: flex;
  align-items: flex-start;
  height: auto;
  width: 100%;
  margin-top: 0;
}
.recruit-card-item .card-img .slide01-img {
    height: 470rem;
}
.recruit-card-item .card-title {
	font-size: 60rem;
}
.recruit-card-item .card-text {
	font-size: 32rem;
}
}
@media screen and (min-width: 1025px) {
.recruit-card-item {
    width: 100%;
    margin-right: -10rem;
}
.recruit-card-item .card-title {
	font-size: 60rem;
}
.recruit-card-item .card-text {
	font-size: 32rem;
}
}

/* 背景装飾 -------------*/
.slide .slide-obj {
  position: absolute;
  z-index: -1;
  opacity: 30%;
}
.slide[data-slide="2"] .logo01 {
  opacity: 40%;
    width: 230rem;
    left: -25%;
    bottom: -40%;
}
.slide[data-slide="2"] .logo02 {
    width: 180rem;
    right: 10%;
    top: -70%;
}
.slide[data-slide="2"] .logo03 {
  width: 0;
  right: 10%;
  bottom: -38%;
}
.slide[data-slide="3"] .logo01 {
  width: 0;
  left: -75%;
  top: -60%;
}
.slide[data-slide="3"] .logo02 {
  width: 230rem;
  bottom: -65%;
  right: -5%;
}
.slide[data-slide="3"] .logo03 {
  width: 130rem;
  bottom: 80%;
  right: -25%;
}
.slide[data-slide="3"] .logo04 {
  width: 160rem;
  bottom: -20%;
  left: -15%;
}
.slide[data-slide="4"] .logo01 {
  width: 200rem;
  top: -86%;
  right: 0;
}
.slide[data-slide="4"] .logo02 {
  opacity: 40%;
  width: 160rem;
  top: 4%;
  left: 0%;
}
.slide[data-slide="4"] .logo03 {
  width: 200rem;
  bottom: -30%;
  right: 30%;
}
.slide[data-slide="4"] .logo04 {
  width: 190rem;
  bottom: -50%;
  left: -60%;
}

@media screen and (min-width: 769px) {
.slide .slide-obj {
  position: absolute;
  z-index: -1;
  opacity: 30%;
}
.slide[data-slide="2"] .logo01 {
  opacity: 40%;
  width: 500rem;
  left: -55%;
  bottom: -90%;
}
.slide[data-slide="2"] .logo02 {
  width: 220rem;
  right: 35%;
  top: -38%;
}
.slide[data-slide="2"] .logo03 {
  width: 110rem;
  right: 10%;
  bottom: -38%;
}
.slide[data-slide="3"] .logo01 {
  width: 480rem;
  left: -75%;
  top: -60%;
}
.slide[data-slide="3"] .logo02 {
  width: 450rem;
  bottom: -65%;
  right: -5%;
}
.slide[data-slide="3"] .logo03 {
  width: 190rem;
  top: -48%;
  right: 30%;
}
.slide[data-slide="3"] .logo04 {
  width: 160rem;
  bottom: -20%;
  left: -15%;
}
.slide[data-slide="4"] .logo01 {
  width: 400rem;
  top: -86%;
  right: 0;
}
.slide[data-slide="4"] .logo02 {
  opacity: 40%;
  width: 330rem;
  top: -36%;
  left: -20%;
}
.slide[data-slide="4"] .logo03 {
  width: 200rem;
  bottom: -30%;
  right: 30%;
}
.slide[data-slide="4"] .logo04 {
  width: 190rem;
  bottom: -50%;
  left: -60%;
}

}


/* section8　黒オーバーレイ
--------------------------------------------------------------*/
.black-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	pointer-events: none;
}

/* section8
--------------------------------------------------------------*/
.section.section8 {
	width: 100vw;
	height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
	overflow: hidden;
	pointer-events: auto !important;
	visibility: visible;
	opacity: 0;
	position: fixed;
	top: 0;
	left: 0;
	transform: translate(0px, 0px);
  flex-wrap: nowrap;
}

.section8 > .container {
  flex-direction: column-reverse;
	justify-content: center;
  flex-wrap: nowrap;
  row-gap: 30rem;
	width: 100%;
	height: 100%;
  margin-top: 5vh;
}

.section8 .flex-left {
	display: flex;
	justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  flex: none;
  flex-direction: column;
}
.section8 .home-cv > .container {
  display: flex;
  flex-direction: column;
	justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding: 0 0 30rem;
}
.section8 .title-area {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
}
.section8 .footer-nav > .container {
  padding: 0;
}
.section8 .flex-right.home-nav {
	display: flex;
  justify-content: center;
  align-items: center;
	flex-direction: column;
  height: auto;
	margin-bottom: 0;
  flex: none;
}
.section8 .footer-wrap {
  align-items: stretch;
  border-top: none;
}
@media screen and (min-width: 769px) {
.section8>.container {
  flex-direction: row;
	justify-content: space-between;
}
.section8 .flex-left {
	flex: 6 1 0%;
}
.section8 .flex-right.home-nav {
	flex: 4 1 0%;
  min-width: 420rem;
  height: 100vh;
	margin-bottom: 50rem;
}
.section8 .home-cv > .container {
  padding: 0 0 10vh;
}
.section8 .footer-nav > .container {
  padding: 0 0 0 40rem;
}

}
@media screen and (min-width: 1025px) {
.section8 .flex-right.home-nav {
  min-width: 540rem;
}
.section8 .home-cv > .container {
  padding: 0 100rem 20vh;
}

}

/* .home-cv
--------------------------------------------------------------*/
.page-home .home-cv {
  width: 100%;
}
.page-home .home-cv .home-cv__link {
	display: flex;
  flex-direction: row;
	justify-content: center;
	gap: 20rem;
  width: 100%;
  margin-top: 20rem;
	font-size: 25rem;
}
.page-home .home-cv .home-cv__link .button-round {
	width: 100%;
  font-size: 14rem;
}
.page-home .home-cv .home-cv__link .button-round.arrow a:link {
	background: var(--solba-yellow);
	color: var(--black);
}
.page-home .home-cv .home-cv__link .button-round.arrow a:visited {
	color: var(--black);
}
.section8 .svg-logo__symbol {
  opacity: 0.2;
	position: absolute;
  height: auto;
	width: 680rem;
	left: -150rem;
	top: -30%;
}
.section8 .title-area .title {
  margin-bottom: 0;
	font-size: 45rem;
	line-height: 1;
	overflow: hidden;
}
.section8 .title-area .title-text {
	font-size: 16rem;
	font-weight: 400;
	line-height: 1.6;
}
@media screen and (min-width: 769px) {
.section8 .svg-logo__symbol {
  width: 490rem;
  left: 30rem;
  top: 0;
  bottom: 0;
}
.section8 .title-area .title {
  margin-bottom: 20rem;
  font-size: 70rem;
}
.section8 .title-area .title-text {
  font-size: 22rem;
}
.page-home .home-cv {
  width: 340rem;
}
.page-home .home-cv .home-cv__link {
	display: grid;
	gap: 20rem;
  justify-content: flex-start;
  margin-top: 10rem;
	font-size: 25rem;
	grid-template-columns: repeat(1, 330rem);
}
.page-home .home-cv .home-cv__link .button-round {
	height: 45rem;
	font-size: 20rem;
}
}
@media screen and (min-width: 1025px) {
.section8 .svg-logo__symbol {
  width: 720rem;
  left: 60rem;
  top: 0;
  bottom: 0;
}
.section8 .title-area .title {
	font-size: 90rem;
}
.section8 .title-area .title-text {
  font-size: 28rem;
}
.page-home .home-cv {
  display: flex;
  justify-content: center;
  width: 100%;
}
.page-home .home-cv .home-cv__link {
	grid-template-columns: repeat(1, 400rem);
	font-size: 22rem;
}
.page-home .home-cv .home-cv__link .button-round {
	height: 60rem;
	font-size: 25rem;
}
}

/* section8 nav
--------------------------------------------------------------*/
/* 企業情報と事業内容の並べ方 */
.section8 .footer-menu .menu-block1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom:0;
}
/* 事業内容の並べ方 */
.section8 .footer-menu .menu-block1 .menu-block-child {
  display: flex;
  flex-direction: column;
  column-gap: 0;
}
/* エネルギーソリューション・ビジネスソリューション・設計ソリューション 並べ方 */
.section8 .footer-menu .menu-block1 .menu-wrap4-container .menu {
  display: flex;
  flex-direction: column;
}
/* タイトルとコンテンツ 縦並び */
.section8 .footer-menu .menu-block1 .menu-left,
.section8 .footer-menu .menu-block1 .menu-right,
.section8 .footer-menu .menu-block2 {
  display: flex;
  flex-direction: column;
}

/* 各ページ並べ方
---------------------------------*/
/* 企業情報の各ページ 並べ方 */
.section8 .footer-menu .menu-block1 .menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
/* 建設ソリューションと住環境ソリューションの各ページ 並べ方 */
.section8 .footer-menu .menu-block1 .sub-menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
/* 採用情報の各ページ並べ方 */
.section8 .footer-menu .menu-block2 .menu {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
@media screen and (min-width: 769px) {
  /* 企業情報と事業内容の並べ方 */
  .section8 .footer-menu .menu-block1 {
    flex-direction: column;
    column-gap: 0;
  }
  /* 事業内容 横並び */
  .section8 .footer-menu .menu-block1 .menu-block-child {
    flex-direction: column;
  }
  /* エネルギーソリューション・ビジネスソリューション・設計ソリューション 並べ方 */
  .section8 .footer-menu .menu-block1 .menu-wrap4-container .menu {
    flex-direction: column;
  }

  /* 各ページ並べ方
  ---------------------------------*/
  /* 企業情報の各ページ 並べ方 */
  .section8 .footer-menu .menu-block1 .menu {
    flex-direction: row;
  }
  /* 建設ソリューションと住環境ソリューションの各ページ 並べ方 */
  .section8 .footer-menu .menu-block1 .sub-menu {
    flex-direction: row;
  }
  /* 採用情報の各ページ並べ方 */
  .section8 .footer-menu .menu-block2 .menu {
    flex-direction: row;
  }
}
@media screen and (min-width: 1025px) {
  /* 企業情報と事業内容の並べ方 */
  .section8 .footer-menu .menu-block1 {
    /* flex-direction: row; */
    column-gap: 35rem;
    margin-bottom: 0;
  }
  /* 採用情報 タイトルとコンテンツ 縦並び */
  .section8 .footer-menu .menu-block2 {
    /* flex-direction: row; */
    padding-top: 0;
    border-top: 1px solid var(--black);
  }
  /* 各ページ並べ方
  ---------------------------------*/
  /* 事業内容の並べ方 */
  .section8 .footer-menu .menu-block1 .menu-block-child {
    /* flex-direction: row; */
    column-gap: 35rem;
  }
  /* 企業情報の各ページ 並べ方 */
  .section8 .footer-menu .menu-block1 .menu {
    display: flex;
    /* flex-direction: column; */
  }
  .section8 .footer-menu .menu-block1 .sub-menu {
    display: flex;
    /* flex-direction: column; */
  }
  /* 採用情報の各ページ 並べ方 */
  .section8 .footer-menu .menu-block2 .menu{
    /* flex-direction: row; */
    gap: 0 35rem;
  }
}


/* 3.3 footer-nav　フォントサイズとマージン
--------------------------------------------------------------*/
/* カテゴリごとのマージン */
  #menu-wrap1-1,
  #menu-wrap2-1,
  #menu-wrap3-1,
  #menu-wrap6-1 {
  margin-bottom:12rem;
}
  #menu-wrap4-1,
  #menu-wrap5-1 {
  margin-bottom:0;
}
/* 事業カテゴリー */
.section8 .footer-menu .menu-block1 .menu,
.section8 .footer-menu .menu-block1 .sub-menu,
.section8 .footer-menu .menu-block2 .menu {
  column-gap: 15rem;
  row-gap: 5rem;
}
/* 大見出し */
.section8 .footer-menu .nav-cate-head {
  color: var(--white);
  margin-bottom: 3rem;
  font-size: 16rem;
}
/* 小見出し */
.section8 .footer-menu .menu-item.solution-head {
  color: var(--white);
  font-size: 14rem;
}
.section8 .footer-menu .menu-item.solution-head > a {
  display: inline-block;
  margin-bottom: 5rem;
}
.section8 .footer-menu .menu-item {
  /* .menu-itemでmarginは設定しない様に！ */
  color: var(--white);
  width: auto;
  font-size: 12rem;
}

@media screen and (min-width: 769px) {
  #menu-wrap1-1,
  #menu-wrap2-1,
  #menu-wrap3-1,
  #menu-wrap6-1 {
    flex-wrap: wrap;
    margin-bottom: 20rem;
  }

  .footer-nav {
    width: 100%;
  }
  .section8 .footer-menu .menu-block1 .menu,
  .section8 .footer-menu .menu-block1 .sub-menu,
  .section8 .footer-menu .menu-block2 .menu {
    row-gap: 5rem;
  }

  .section8 .footer-menu .nav-cate-head {
    margin-right: 30rem;
    margin-bottom: 8rem;
    font-size: 16rem;
  }
  .section8 .footer-menu .menu-item.solution-head {
    margin-bottom: 0;
  }
  .section8 .footer-menu .menu-item {
  /* .menu-itemでmarginは設定しない様に！ */
    width: auto;
    font-size: 13rem;
  }
}
@media screen and (min-width: 1025px) {
  /* #menu-wrap1-1,
  #menu-wrap2-1,
  #menu-wrap3-1,
  #menu-wrap4-1 {
    flex-wrap: wrap;
    row-gap: 5rem;
  }
  #menu-wrap4-1 {
    row-gap: 0;
  }
  .section8 .footer-menu .menu-block1 .sub-menu {
    row-gap: 5rem;
  }
  .section8 .footer-menu .menu > li {
    margin-bottom: 0;
  } */
  .section8 .footer-menu .nav-cate-head {
    font-size: 24rem;
  }
  .section8 .footer-menu .menu-item.solution-head {
   font-size: 18rem;
  }
  .section8 .footer-menu .menu-item {
    font-size: 17rem;
  }
}

/* footer-terms
--------------------------------------------------------------*/
.page-home .home-terms.sp {
	display: flex;
	justify-content: center;
  margin-top: 0;
  margin-bottom: 10rem;
  margin-right: 0;
  width: 100%;
}

.page-home .home-terms.sp .home-copyright {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	height: auto;
}

.page-home .home-terms.sp .menu {
	display: flex;
	gap: 30rem;
	margin-bottom: 15rem;
}
.page-home .home-terms.sp .menu-item {
  font-size: 13rem;
}
.page-home .home-terms.sp .home-copyright .copy {
	font-size: 12rem;
  text-align: center;
}


@media screen and (min-width: 769px) {
.page-home .home-terms.pc {
	display: flex;
	justify-content: center;
  margin-top: 40rem;
  margin-top: 5vh;
  margin-right: 0;
}
.page-home .home-terms.pc .home-copyright {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	height: 40rem;
}
.page-home .home-terms.pc .menu {
	display: flex;
	gap: 30rem;
	margin-bottom: 10rem;
}
.page-home .home-terms.pc .menu-item {
  font-size: 13rem;
}
.page-home .home-terms.pc .home-copyright .copy {
	font-size: 12rem;
}

}
@media screen and (min-width: 1025px) {

.page-home .home-terms.pc .menu-item {
    font-size: 16rem;
}
}










/* section7ヘッダー -------------*/
body[data-theme="section7"] .header .svg-logo svg .yellow,
body[data-theme="section7"] .header .svg-logo svg .green,
body[data-theme="section7"] .header .svg-logo svg .black {
	fill: var(--white);
}
body[data-theme="section7"] .header.active .svg-logo svg .yellow{
	fill: #FFAF00;
}
body[data-theme="section7"] .header.active .svg-logo svg .green {
	fill: #239B69;
}
body[data-theme="section7"] .header.active .svg-logo svg .black {
	fill: var(--black);
}


/* section8ヘッダー -------------*/
body[data-theme="section8"] .header .svg-logo svg .yellow,
body[data-theme="section8"] .header .svg-logo svg .green,
body[data-theme="section8"] .header .svg-logo svg .black {
	fill: var(--white);
}
body[data-theme="section8"] .header .header-nav-button {
	background: var(--white);
}
body[data-theme="section8"] .header .meatball {
	background: var(--black);
}
body[data-theme="section8"] .header.active .svg-logo .yellow {
	fill: #FFAF00;
}
body[data-theme="section8"] .header.active .svg-logo .green {
	fill: #239B69;
}
body[data-theme="section8"] .header.active .svg-logo .black {
	fill: var(--black);
}
body[data-theme="section8"] .header.active .header-nav-button {
	background: var(--black);
}
body[data-theme="section8"] .header.active .meatball {
	background: var(--white);
}



/* ============================================================
data-section による z-index 一元管理
home.css に追記してください（前回のものと置き換え）

JS は body[data-section] を付与するだけ。
z-index の値はすべてここで管理します。

階層設計（50以内）:
  50 : footer（section8表示時のみ / scrub が制御）
  40 : section8（同上）
  30 : section7 / section6（遷移アニメーション中）
  15 : pin-spacer（section6 アクティブ時のみ）
  11 : pizza-chartの親要素bg-layer
  10 : vertical-wrapper / sections 1-5（デフォルト）
  1 : 後退させた vertical-wrapper
  -1 : 非表示要素のデフォルト
   ============================================================ */
/* 動画 */
#opv-wrap {
	z-index: 20;
}
#skip-btn {
  z-index: 1;
}

/* ピザチャート */
body[data-section="mv"] .bg-layer {
  /* vertical-wrapperより上に */
	z-index: 11!important;
}
.bg-layer {
  /* vertical-wrapperより上に */
	z-index: -1;
}
.pizza-chart {
  z-index: 1;
}
.pizza-chart .circle {
  z-index: 1;
}
.pizza-chart .circle-link {
  z-index: 1;
}

/* 共通 */
.scroll-down {
	z-index: 50;
}
.page-home .pager {
    z-index: 1;
}
/*==============================================================
section1~5　縦スクロール
==============================================================*/
.transition-overlay {
	z-index: 20;
}
.vertical-wrapper {
	z-index: 10;
}
.section.front-sec {
	z-index: 0;
}
.section .button-round,
.section6 .button-round {
  z-index: 1;
}

body[data-section="section1"].home .section1,
body[data-section="section2"].home .section2,
body[data-section="section3"].home .section3,
body[data-section="section4"].home .section4,
body[data-section="section5"].home .section5,
body[data-section="section6"].home .section6 {
  z-index: 10 !important;
}
body[data-section="section1"].home .footer:not(.second),
body[data-section="section2"].home .footer:not(.second),
body[data-section="section3"].home .footer:not(.second),
body[data-section="section4"].home .footer:not(.second),
body[data-section="section5"].home .footer:not(.second),
body[data-section="section6"].home .footer:not(.second),
body[data-section="section7"].home .footer:not(.second) {
  z-index: -1 !important;
}
/*==============================================================
section6　横スクロール
==============================================================*/
.section6 .title-area {
	z-index: 2;
}
.section6 .strength-scroll {
	z-index: 5;
}
/* --- section6 アクティブ時 ⚪︎⚪︎を後退 --- */
body[data-section="section6"] .vertical-wrapper:not(.second) {
  z-index: -1 !important;
}
/* --- section6 アクティブ時 ---
   pin-spacer を前面へ --- */
body[data-section="section6"] .pin-spacer {
  z-index: 15 !important;
  pointer-events: auto !important;
}
/* --- pin-spacer: デフォルトは背面 --- */
.pin-spacer {
  z-index: -1 !important;
  pointer-events: none !important;
}
body[data-section="section6"] .section6 {
  z-index: 1;
}
/*==============================================================
section7.8　縦スクロール
==============================================================*/
/* --- section7.8 アクティブ時 ⚪︎⚪︎を後退 --- */
body[data-section="section7"] .vertical-wrapper:not(.second),
body[data-section="section8"] .vertical-wrapper:not(.second) {
  z-index: 1 !important;
}
.section.section7 {
	z-index: -1;
}


.black-overlay {
	z-index: 9;
}
.section.section8 {
	z-index: -2;
}