@charset "utf-8";



html {
	overflow-x: unset !important;
	overflow-y: unset !important;
}

#wrapper {
	overflow: unset !important;
}

/* 上下の縦スクロールコンテンツ */
.vertical-section {
	padding: 160px 10%;
	background-color: #fcfcfc;
	position: relative;
	z-index: 10;
}

.vertical-section:first-of-type {
	margin-top: 100px;
}

.vertical-section h2 {
	font-size: 2.5rem;
	margin-bottom: 40px;
	font-weight: 700;
}

.vertical-section p {
	font-size: 1.1rem;
	line-height: 2;
	color: #666;
	max-width: 800px;
}

/* 横スクロール全体のアウター */
.horizontal-scroll-container {
	position: relative;
	width: 100%;
	background-color: #ffffff;
}

/* 固定（Sticky）セクション */
.sticky-pin-section {
	position: sticky;
	top: 100px;
	height: calc(100vh - 100px);
	width: 100%;
	overflow: hidden;
}

/* 背景の青い円（bg-circle-1 のみ残し） */
.bg-circle {
	position: absolute;
	border: 140px solid var(--blue);
	border-radius: 50%;
	pointer-events: none;
	z-index: 1;
	opacity: 0.8;
	transition: transform 0.1s linear, opacity 0.1s linear;
	will-change: transform, opacity;
}

.bg-circle-1 {
	width: 650px;
	height: 650px;
	left: -330px;
	bottom: -330px;
}

/* 横に動くメインのラッパー */
.scroll-wrapper {
	display: flex;
	align-items: center;
	height: 100%;
	width: max-content;
	/* padding: 0 20vw; */
	padding: 0 0 0 20vw;
	position: relative;
	z-index: 2;
	will-change: transform;
}

/* タイトルブロック */
.horizontal-scroll-container .section-page-ttl {
	/* width: 320px; */
	margin-right: 400px;
	margin-left: 200px;
	flex-shrink: 0;
	position: relative;
	z-index: 10;
}

/* .title-block h3 {
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 1;
	color: #111111;
	letter-spacing: 0.05em;
	margin-bottom: 20px;
}

.title-block p {
	font-size: 1.2rem;
	color: #006ec1;
	font-weight: 500;
	letter-spacing: 0.1em;
} */

/* ギャラリー全体のコンテナ */
.gallery-block {
	display: flex;
	align-items: center;
	gap: 120px;
	flex-shrink: 0;
	margin-right: 240px;
	position: relative;
}

.image-item {
	position: relative;
	background-color: #f0f0f0;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
	/* border-radius: 6px; */
	flex-shrink: 0;
	overflow: hidden;
	will-change: transform;
}

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

/* PC時の写真サイズとレイアウト */
.item-1 {
	width: 300px;
	height: 420px;
	transform: translateY(-40px);
}

.item-2 {
	width: 460px;
	height: 300px;
	transform: translateY(100px);
}

.item-3 {
	width: 280px;
	height: 380px;
	transform: translateY(0px);
}

.item-4 {
	width: 320px;
	height: 220px;
	transform: translateY(140px);
}

.item-5 {
	width: 480px;
	height: 480px;
	transform: translateY(-20px);
}

/* 右側テキストブロック */
.content-block {
	display: flex;
	align-items: center;
	/* width: 750px; */
	width: 100vw;
	height: 100vh;
	background: #0075BA;
	flex-shrink: 0;
	/* padding-right: 2vw; */
	/* 右側に余裕を持たせる記述 */
	position: relative;
	z-index: 10;
}

.content-block {
	display: flex;
	justify-content: center;
	align-items: center;
	/* width: 750px; */
	width: 100vw;
	height: 100vh;
	background: url(../img/horizontal-scroll-container-area_bg.jpg) no-repeat;
	background-size: cover;
	flex-shrink: 0;
	/* padding-right: 2vw; */
	/* 右側に余裕を持たせる記述 */
	position: relative;
	z-index: 10;
}

.content-block .txt-box {
	padding: 64px;
	width: 1100px;
	/* background: #fff; */
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.content-block .txt-box .col2 {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: 0 0 24px;
}

.content-block .txt-box .col2 .img {
	width: 350px;
	flex-shrink: 0;
}

/* ===========================================
	スマートフォン環境（画面幅767px以下）用の調整
=========================================== */
@media screen and (max-width: 767px) {

	.vertical-section:first-of-type {
		margin-top: 70px;
	}

	.sticky-pin-section {
		top: 60px;
		height: calc(100vh - 130px);
	}

	.vertical-section {
		padding: 80px 6%;
	}

	.vertical-section h2 {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}

	/* 横スクロール枠の調整 */
	.scroll-wrapper {
		padding: 0 0 0 6vw;
	}

	.horizontal-scroll-container .section-page-ttl {
		/* width: 240px; */
		margin-right: 100px;
		margin-left: 100px;
	}

	/* .title-block h3 {
		font-size: 3rem;
	}

	.title-block p {
		font-size: 1rem;
	} */

	/* ギャラリー幅と写真サイズの縮小（SPに最適なサイズ感へ） */
	.gallery-block {
		gap: 30px;
		/* SP用に余白を少しタイトに調整（均一さは維持） */
		margin-right: 80px;
	}

	.item-1 {
		width: 180px;
		height: 260px;
		transform: translateY(-20px);
	}

	.item-2 {
		width: 260px;
		height: 180px;
		transform: translateY(50px);
	}

	.item-3 {
		width: 170px;
		height: 230px;
		transform: translateY(-100px) !important;
	}

	.item-4 {
		width: 200px;
		height: 140px;
		transform: translateY(70px);
	}

	.item-5 {
		width: 220px;
		height: 220px;
		transform: translateY(-60px) !important;
	}

	/* ★ご要望：SPの際に、画面幅にきれいに収まるスタイル指定 */
	.content-block {
		/* width: calc(100vw - 12vw); */
		/* 左右のパディング（6vw × 2）を引いた完全な画面ぴったり幅 */
		padding: 20px;
		height: unset;
	}

	.content-block .txt-box {
		padding: 20px;
		width: 100%;
	}

	.content-block .txt-box .col2 {
		flex-direction: column;
		gap: 20px;
		margin: 0 0 16px;
	}

	.content-block .txt-box .col2 .img {
		width: 50%;
		height: 100px;
	}
	.content-block .txt-box .col2 img {
		object-fit: cover;
		height: 100%;
	}

	.bg-circle-1 {
		width: 300px;
		height: 300px;
		left: -160px;
		bottom: -130px;
		border-width: 60px;
	}

}

/* -----------------------------------------------------------
	off-grid-area
-------------------------------------------------------------- */
.off-grid-area {
	position: relative;
	padding: 100px 0;
	background: var(--light-purple);
}

.off-grid-area .col2 {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 64px;
	margin: 0 0 40px;
}

.off-grid-area .col2 .img {
	width: 600px;
	flex-shrink: 0;
}

.off-grid-area .col2 img {
	object-fit: cover;
	height: 100%;
}

@media screen and (max-width: 768px) {

	.off-grid-area {
		padding: 40px 0;
	}

	.off-grid-area .col2 {
		flex-direction: column;
		gap: 20px;
		margin: 0 0 24px;
	}

	.off-grid-area .col2 .img {
		width: 100%;
		height: 250px;
	}

}


/* -----------------------------------------------------------
	取り組み
-------------------------------------------------------------- */
.attempt-area{
    position: relative;
    width: 100%;
    min-height: 100%;
    padding: 120px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 02 Photo Shutter */
.photo-shutter{
    height: 100%;
}
.photo-bg{
    position:absolute;
    inset:0;
    background:
        linear-gradient(rgba(255,255,255,.3),rgba(255,255,255,.3)),
        url("../img/horizontal-scroll-container-area_bg.jpg");
    background-size:cover;
    background-position:center;

    transform:scale(1.15);
    filter:saturate(1.1) contrast(1.05);

    /* 初期状態 */
    clip-path: inset(0 0 100% 0);
}

.photo-shutter.is-active .photo-bg{
    animation:
        photoReveal 1.5s ease forwards,
        photoZoom 5s ease forwards;
}
.shutters{
    position:absolute;
    inset:0;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(8,1fr);
}
.shutters span{
    background:#fff;
    transform-origin:top;
}
.photo-shutter.is-active .shutters span{
    animation:shutterOpen 1.1s cubic-bezier(.65,0,.15,1) forwards;
}
.shutters span:nth-child(2){animation-delay:.06s}
.shutters span:nth-child(3){animation-delay:.12s}
.shutters span:nth-child(4){animation-delay:.18s}
.shutters span:nth-child(5){animation-delay:.24s}
.shutters span:nth-child(6){animation-delay:.30s}
.shutters span:nth-child(7){animation-delay:.36s}
.shutters span:nth-child(8){animation-delay:.42s}

@keyframes shutterOpen{to{transform:scaleY(0)}}

@keyframes photoReveal{
    to{
        clip-path: inset(0 0 0 0);
    }
}
@keyframes photoZoom{
    from{
        transform:scale(1.15);
    }
    to{
        transform:scale(1);
    }
}

.attempt-block {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	/*height: 100vh;*/
	position: relative;
	z-index: 10;
    margin: 0 auto;
}

.attempt-block .txt-box {
	padding: 60px;
	width: 900px;
	/* background: #fff; */
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.attempt-block .txt-box .col2 {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: 0 0 24px;
}
.attempt-block .txt-box .col2 .mv-img {
	width: 320px;
	flex-shrink: 0;
}
.attempt-block .txt-box .col2 .mv-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.attempt-block .txt-box .ttl-l {
    font-size: 3.2rem;
}


@media screen and (max-width: 768px) {

    .attempt-area{
        width: 100%;
        min-height: 100%;
        overflow: inherit;
        display: block;
        padding: 0;
    }
    .photo-shutter{
    }
    .photo-bg,
    .shutters{
        display: none;
    }
    
    .attempt-block {
        display: block;
        padding: 40px 20px 0;
		height: unset;
    }

    .attempt-block .txt-box {
        padding: 0;
        width: 100%;
        background: #fff;
        backdrop-filter: none;
    }


	.attempt-block .txt-box .col2 {
		flex-direction: column;
		gap: 20px;
		margin: 0 0 12px;
	}

    .attempt-block .txt-box .col2 .mv-img {
        width: 100%;
    }
    .attempt-block .txt-box .col2 .mv-img img {
        height: 250px!important;
    }
    
    .attempt-block .txt-box .ttl-l {
        font-size: 2.4rem;
    }

}


/* -----------------------------------------------------------
	SDGs-area
-------------------------------------------------------------- */
.SDGs-area {
	padding: 100px 0 120px;
}

/* SDGsへの取り組み */
.SDGs-area .topic {
	margin: 40px 0 0;
	padding: 32px;
	background: #fff;
}

.SDGs-main .SDGs-detail {
	margin: 40px 0 0;
	padding: 40px 0 0;
	border-top: solid 1px #d2e0e9;
}

.SDGs-main .SDGs-detail .col2 {
	display: flex;
	align-items: center;
	gap: 40px;
	margin: unset;
}

.SDGs-main .SDGs-detail .col2 .img {
	width: 350px;
	height: 250px;
	background: #ccc;
	flex-shrink: 0;
}

.SDGs-main .SDGs-detail .SDGs-theme-box {
	display: flex;
	gap: 12px;
	margin: 0 0 12px;
}

.SDGs-main .SDGs-detail .SDGs-theme {
	padding: 2px 8px;
	color: #fff;
	font-size: 1.2rem;
	font-weight: 600;
	background: #888;
}

.SDGs-main .SDGs-detail .SDGs-theme.color07 {
	background: #FABD00;
}
.SDGs-main .SDGs-detail .SDGs-theme.color08 {
	background: #970A31;
}
.SDGs-main .SDGs-detail .SDGs-theme.color11 {
	background: #F5A20B;
}
.SDGs-main .SDGs-detail .SDGs-theme.color12 {
	background: #D39206;
}
.SDGs-main .SDGs-detail .SDGs-theme.color13 {
	background: #407936;
}
.SDGs-main .SDGs-detail .SDGs-theme.color14 {
	background: #0075BA;
}
.SDGs-main .SDGs-detail .SDGs-theme.color15 {
	background: #28A838;
}
.SDGs-main .SDGs-detail .SDGs-theme.color17 {
	background: #023067;
}

@media screen and (max-width: 768px) {

	.SDGs-area {
		padding: 0 0 40px;
	}

	.SDGs-area .mv-img {
		margin: 24px 0;
	}

	.SDGs-area .topic {
		margin: 32px 0 0;
		padding: 20px;
	}

	.SDGs-main .SDGs-detail {
		margin: 32px 0 0;
		padding: 32px 0 0;
	}

	.SDGs-main .SDGs-detail .col2 {
		flex-direction: column;
		gap: 24px;
		margin: 0 0 32px;
	}

	.SDGs-main .SDGs-detail .col2 .img {
		width: 100%;
		height: 200px;
	}

	.SDGs-main .SDGs-detail .SDGs-theme-box {
		flex-direction: column;
		align-items: flex-start;
	}

}


/* 通常フォーマット */
.SDGs-main {
	padding: 56px;
	background: var(--light-blue);
}

.SDGs-main + .SDGs-main {
	margin: 64px 0 0;
}

.SDGs-main .mv-img {
	width: 450px;
	height: 300px;
	flex-shrink: 0;
}

.SDGs-main img {
	object-fit: cover;
	height: 100%;
}

.SDGs-main .col2 {
	display: flex;
	gap: 32px;
	margin: 32px 0 0;
}

.SDGs-main .col2.reverse {
	flex-direction: row-reverse;
}

@media screen and (max-width: 768px) {

	.SDGs-main {
		margin: 40px 0 0;
		padding: 20px;
	}

	.SDGs-main + .SDGs-main {
		margin: 20px 0 0;
	}

	.SDGs-main .mv-img {
		margin: 0 0 24px;
		width: 100%;
		height: 200px;
	}

	.SDGs-main .col2 {
		flex-direction: column;
		gap: unset;
		margin: 24px 0 0;
	}

	.SDGs-main .col2.reverse {
		flex-direction: column;
	}

}



/* SDGsへの取り組み */
.SDGs-cont {
	margin: 64px 0 0;
}

.SDGs-list-wrap {
	margin: 24px 0 0;
}

.SDGs-list-ttl {
	margin: 0 0 12px;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.7;
}

.SDGs-list {
	display: flex;
	gap: 16px;
}

.SDGs-list .SDGs-list_item {
	width: calc(100% / 6);
}

@media screen and (max-width: 768px) {

	.SDGs-cont {
		margin: 40px 0 0;
	}

	.SDGs-list {
		flex-wrap: wrap;
		gap: 10px;
	}

	.SDGs-list .SDGs-list_item {
		width: calc((100% / 3) - 7px);
	}

}



/* -----------------------------------------------------------
	system-area
-------------------------------------------------------------- */
.future-area {
	position: relative;
	padding: 100px 0;
	/* background: var(--light-purple); */
	background: url(../img/sustainability_future-area_bg.jpg) no-repeat bottom;
	background-size: cover;
	background-attachment: fixed;
}

.future-area .inner {
	position: relative;
}

.future-area .txt-box {
	position: relative;
	margin-inline: auto;
	padding: 80px 64px;
	width: 1000px;
	background: rgba(255, 255, 255, 0.9);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.future-area .section-page-ttl,
.future-area .ttl-l {
	margin-inline: auto;
	text-align: center;
}

.future-area .ttl-l {
	margin: 0 0 32px;
}

.future-area .img-wrap .img {
	position: absolute;
}

.future-area .img-wrap .img01 {
	top: 60px;
	left: 20px;
	width: 220px;
}

.future-area .img-wrap .img02 {
	top: -40px;
	right: 20px;
	width: 170px;
}

.future-area .img-wrap .img03 {
	top: 800px;
	right: 40px;
	width: 200px;
}

.future-area .img-wrap img {
	object-fit: cover;
	height: 100%;
}


/* CVエリア */
.future-area .cv-block {
	margin: 80px 0 0;
}

.future-area .cv-block .cv-list {
	display: flex;
	gap: 40px;
}

.future-area .cv-block .cv-list_item {
	padding: 28px 40px;
	width: calc(100% / 2);
	background: #fff;
	text-align: center;
	box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.02);
}

.future-area .cv-block .cv-list_item .txt {
	font-size: 1.8rem;
	font-weight: 700;
}

.future-area .cv-block .cv-list_item .txt.tel {
	position: relative;
	top: 4px;
}

/* TEL */
.future-area .cv-block .cv-list_item .tel-box .flex {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 3px 0 0;
}

.future-area .cv-block .cv-list_item .tel-box .flex .img {
	position: relative;
	top: 13px;
	width: 60px;
}

.future-area .cv-block .cv-list_item .tel-box .num {
	font-size: 4.2rem;
	font-weight: 600;
	font-family: var(--Montserrat);
	line-height: 1.5;
}

.future-area .cv-block .cv-list_item .tel-box .tel-txt {
	position: relative;
	font-size: 1.5rem;
}

.future-area .cv-block .cv-list_item .cv-btn-base {
	margin: 8px auto 0;
	width: unset;
}

/* メール */
.future-area .cv-block .cv-list_item .cv-btn-base a {
	margin-inline: auto;
	font-size: 2rem;
	width: 400px;
}

@media screen and (max-width: 768px) {

	.future-area {
		padding: 40px 0;
		text-align: unset;
	}

	.future-area .txt-box {
		margin-inline: unset;
		width: 100%;
		padding: 40px 20px;
	}

	.future-area .section-page-ttl,
	.future-area .ttl-l {
		margin-inline: unset;
		text-align: unset;
	}

	.future-area .img-wrap .img {
		position: relative;
	}

	.future-area .img-wrap img {
		margin: 0 0 24px;
		object-fit: cover;
		height: 100%;
	}

	.future-area .cv-block {
		margin: 24px 0 0;
	}

	.future-area .cv-block .cv-list {
		flex-direction: column;
		gap: 20px;
	}

	.future-area .cv-block .cv-list_item {
		padding: 20px;
		width: 100%;
	}

	.future-area .cv-block .cv-list_item .txt {
		font-size: 1.6rem;
	}

	/* TEL */
	.future-area .cv-block .cv-list_item .tel-box .flex {
		justify-content: center;
		margin: unset;
	}

	.future-area .cv-block .cv-list_item .tel-box {
		margin: unset;
	}

	.future-area .cv-block .cv-list_item .tel-box .flex .img {
		top: 6px;
		width: 40px;
	}

	.future-area .cv-block .cv-list_item .tel-box .num {
		font-size: 3.2rem;
		line-height: 1.5;
	}

	.future-area .cv-block .cv-list_item .tel-box .tel-txt {
		font-size: 1.3rem;
		font-family: var(--notoSerifJP);
	}

	/* メール */
	.future-area .cv-block .cv-list_item .cv-btn-base a {
		font-size: 1.8rem;
		width: 100%;
		height: 60px;
	}

}