@charset "utf-8";

:root {
	--blue:       #1A3A5C;
	--blue-mid:   #2A5480;
	--blue-light: #E8EFF6;
	--blue-pale:  #F2F6FA;
	--green:      #2E7D32;
	--green-pale: #EBF5EC;
	--line:       #D0DCE8;
	--text:       #1a1a1a;
	--text-sub:   #5a6472;
	--white:      #ffffff;
	--off-white:  #F7F8FA;
	--yellow:     #F5A623;
}

@keyframes bar {
	to { left: 100%; }
}

/*************************************************
 page common
*************************************************/
#new-office {
	margin-bottom: 220px;

	@media only screen and (max-width: 767px) {
		margin-bottom: 80px;
	}
}

.pageAnc {
	position: absolute;
	top: 180px;
	left: 0;
	height: 0;
	width: 0;

	@media only screen and (max-width: 767px) {
		top: 0;
	}
}

.inner {
	max-width: 1000px;
	margin: 0 auto;
	width: 100%;
}

.ttl-sec {
	display: flex;
	border-bottom: 1px solid #cecece;
	justify-content: space-between;
	margin-bottom: 70px;

	.ja {
		padding-bottom: 23px;
		border-bottom: 2px solid #245596;
		margin-bottom: -1px;
		display: inline-block;
		font-weight: 700;
		font-size: 30px;
		line-height: 1;
	}

    img {
        margin-bottom: -12px;
    }

	@media only screen and (max-width: 991px) {
		margin-bottom: 50px;

		.ja {
			font-size: 24px;
			line-height: 1.45;
		}
	}

	@media only screen and (max-width: 767px) {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 15px;
		margin-bottom: 30px;

		.ja {
			padding-bottom: 13px;
			font-size: 18px;
			line-height: 1.55;
		}

		img {
            width: auto;
            height: 25px;
			margin-bottom: 0;
		}
	}
}

/* anime */
.sectionTitles {
	opacity: 0;
	transition-duration: 0.7s;
	transform: translateY(30px);

	.num {
		opacity: 0;
		transform: translateX(-20px);
		transition-duration: 0.7s;
		transition-delay: 0.5s;
	}

	.title,
	.lead {
		opacity: 0;
		transform: translateY(20px);
		transition-duration: 0.7s;
		transition-delay: 1.2s;
	}

	.lead {
		transition-delay: 1.4s;
	}

	.texts {
		&:before {
			transition-duration: 0.7s;
			transition-delay: 0.5s;
		}
	}
}

.visible .is-shown {
	.sectionTitles {
		opacity: 1;
		transform: translate(0, 0);

		.title,
		.lead,
		.num {
			opacity: 1;
			transform: translate(0, 0);
		}

		.texts {
			&:before {
				height: 100%;
			}
		}
	}
}

/* pageTextBlock */
.pageTextBlock {
	position: relative;

	& + & {
		margin-top: 75px;
	}

	p {
		color: #767676;
		line-height: 2;
	}

	.disc {
		margin-top: 25px;
		padding: 25px;
		background-color: #F7F7F7;
		border: #EBEBEB solid 1px;

		dt {
			font-weight: 700;
		}

		@media only screen and (max-width: 767px) {
			padding: 20px;
		}
	}

	.disc02 {
		margin-top: 25px;
		display: table;
		width: 100%;

		> * {
			display: table-cell;
			vertical-align: top;
		}

		dt {
			width: 6em;
		}
	}
}

/* pageBdrTitle */
.pageBdrTitle {
	position: relative;
	margin-bottom: 25px;
	padding-top: 10px;
	font-size: 22px;
	font-weight: 700;

	&:before {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		content: '';
		width: 55px;
		height: 2px;
		background-color: #05569B;
	}

	@media only screen and (max-width: 767px) {
		padding-top: 15px;
		font-size: 18px;

		&:before {
			width: 50px;
		}
	}
}

/* pageGrayArea */
.pageGrayArea {
	position: relative;
	max-width: 1366px;
	margin: 100px auto 0;
	padding: 80px 0 100px;

	&:after {
		display: block;
		clear: both;
		height: 0;
		content: '';
	}

	> * {
		position: relative;
		z-index: 2;
	}

	&:before {
		position: absolute;
		top: 0;
		left: 50%;
		display: block;
		content: '';
		width: 100vw;
		height: 100%;
		margin-left: -550px;
		background-color: #F7F7F7;
		z-index: 1;
	}

	.profile {
		float: right;
		padding: 0 0 50px 50px;

		.texts {
			position: relative;
			margin: -40px 0 0 40px;
			padding: 25px 30px 30px;

			> * {
				position: relative;
				z-index: 2;
			}

			&:before {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				content: '';
				width: 100vw;
				height: 100%;
				background-color: #fff;
				opacity: 0.8;
				z-index: 1;
			}
		}

		.pos {
			margin-bottom: 10px;
			font-size: 18px;
			font-weight: 700;
			line-height: 1.4;
		}

		.name {
			> * {
				display: inline-block;
			}

			span {
				margin-right: 10px;
				font-size: 18px;
			}

			small {
				color: #B3B3B3;
				font-size: 15px;
			}
		}
	}

	.inBlock {
		max-width: 1000px;
		margin: 0 auto;
		padding: 0 20px;
		color: #05569B;

		& + & {
			margin-top: 75px;
		}

		p + p {
			margin-top: 1.6em;
		}
	}

	.title {
		margin-bottom: 25px;
		font-size: 22px;
		font-weight: 700;
	}

	p {
		line-height: 2;
	}

	.btn {
		max-width: 1000px;
		margin: 80px auto 0;
		padding: 0 20px;

		a {
			position: relative;
			display: block;
			padding: 25px 0;
			color: #fff;
			font-weight: 500;
			text-align: center;
			text-decoration: none;
			background-color: #05569B;

			&:before {
				position: absolute;
				top: 0;
				left: 0;
				display: block;
				content: '';
				width: 100%;
				height: 100%;
				background-color: #fff;
				-webkit-backface-visibility: hidden;
				backface-visibility: hidden;
				-webkit-transform-origin: left center;
				-ms-transform-origin: left center;
				transform-origin: left center;
				-webkit-transform: scale(0, 1);
				-ms-transform: scale(0, 1);
				transform: scale(0, 1);
				-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.2, 0.05, 1);
				transition: -webkit-transform 0.5s cubic-bezier(0.4, 0.2, 0.05, 1);
				-o-transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.05, 1);
				transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.05, 1);
				transition: transform 0.5s cubic-bezier(0.4, 0.2, 0.05, 1), -webkit-transform 0.5s cubic-bezier(0.4, 0.2, 0.05, 1);
				z-index: 1;
			}

			span {
				position: relative;
				display: inline-block;
				padding-right: 20px;
				z-index: 2;

				&:before {
					position: absolute;
					top: 50%;
					right: 0;
					display: block;
					content: '';
					transform: translateY(-50%);
					border-style: solid;
					border-color: transparent transparent transparent #fff;
					border-width: 4px 0 4px 6px;
					transition: 0.3s;
				}
			}
		}
	}

	@media only screen and (max-width: 1100px) {
		&:before {
			left: 0;
			margin-left: 0;
		}

		.profile {
			width: 55.555%;
		}
	}

	@media only screen and (max-width: 767px) {
		margin-top: 70px;
		padding: 40px 0 80px;

		.profile {
			float: none;
			width: auto;
			margin-bottom: 50px;
			padding: 0 0 0 20px;

			img {
				width: 100%;
			}

			.texts {
				position: relative;
				margin: -20px 20px 0 0;
				padding: 25px 30px;

				> * {
					position: relative;
					z-index: 2;
				}

				&:before {
					width: 100%;
				}
			}

			.pos {
				margin-bottom: 7px;
				font-size: 13px;
			}

			.name {
				span {
					margin-right: 10px;
					font-size: 13px;
				}

				small {
					font-size: 11px;
				}
			}
		}

		.inBlock + .inBlock {
			margin-top: 60px;
		}

		.title {
			margin-bottom: 20px;
			font-size: 17px;
		}

		.btn {
			margin-top: 50px;
		}
	}
}

.noT .pageGrayArea .btn a {
	&:hover {
		color: #05569B;

		&:before {
			-webkit-transform-origin: right center;
			-ms-transform-origin: right center;
			transform-origin: right center;
			-webkit-transform: scale(1, 1);
			-ms-transform: scale(1, 1);
			transform: scale(1, 1);
		}

		span {
			&:before {
				border-left-color: #05569B;
			}
		}
	}
}

/*************************************************
 breadcrumb
*************************************************/
.breadcrumb {
	margin-bottom: 25px;

	@media only screen and (max-width: 767px) {
		margin-bottom: 15px;
	}
}

/*************************************************
 pageTitle
*************************************************/
.pageTitle {
	margin: 0 0 0 130px;

	* {
		color: #fff;
	}

	.table {
		box-sizing: border-box;
		position: relative;
		display: table;
		width: 100%;
		height: 480px;
		padding: 0 100px 0 50px;
		background: url(../images/new-office/main.jpg) no-repeat center center;
		background-size: cover;
		z-index: 2;
	}



	.cell {
		display: table-cell;
		vertical-align: middle;
	}

	.inner {
		max-width: 1100px;
		margin: 0 auto;
	}

	.title {
		margin-bottom: 10px;
		line-height: 0;

		.img {
			width: 682px;
		}
	}

	.lead {
		position: relative;
		margin-top: 30px;
		padding-top: 30px;
		font-size: 20px;
		font-weight: 700;

		&:before {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			content: '';
			width: 0;
			height: 2px;
			background-color: #fff;
			transition-duration: 0.3s;
			transition-delay: 0.6s;
		}
	}

	@media only screen and (max-width: 991px) {
		margin-left: 70px;

		.table {
			padding: 0 0 0 30px;
		}

		.inner {
			margin-left: 0;
		}
	}

	@media only screen and (max-width: 767px) {
		margin: 0 0 35px 20px;

		.table {
			height: 430px;
			padding-left: 25px;
			background-image: url(../images/new-office/main-sp.jpg);
		}

		img {
			height: 30px;
		}

		.title {
			margin-bottom: 15px;
			line-height: 0;

			.img {
				width: 93%;
			}
		}

		.lead {
			font-size: 23px;
		}
	}
}

.visible .pageTitle .lead {
	&:before {
		width: 50px;
	}
}































/*************************************************
 why
*************************************************/
.sec-why {
	position: relative;
    padding: 130px 15px 160px;

	.elem {
		display: flex;
		gap: 35px;
        align-items: center;

		p {
			flex: 1;
            font-size: 16px;
            letter-spacing: .1em;
            line-height: 2;
            text-align: justify;

            .name {
                display: block;
                text-align: right;
            }
		}

		.mov {
			flex-shrink: 0;
			width: 480px;
			max-width: 100%;

            iframe {
                width: 100% !important;
                height: 270px !important;
            }

			img {
				display: block;
				width: 100%;
				height: auto;
			}

            video {
				display: block;
				width: 100%;
				height: auto;
                cursor: pointer;
            }
		}
	}

	.list-why {
		list-style: none;
		margin: 70px 0 0;
		padding: 0;
		display: flex;
		align-items: stretch;
		gap: 15px;

		li {
			position: relative;
			flex: 1;
			margin: 0;
			padding: 52px 28px 36px;
			border: 1px solid #245596;
			background-color: #fff;
			text-align: center;
			box-sizing: border-box;

			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 80px;
				height: 80px;
				background-color: #245596;
				clip-path: polygon(0 0, 100% 0, 0 100%);
				z-index: 1;
			}

			&:not(:last-child)::after {
				content: '';
				position: absolute;
				top: 50%;
				right: -12px;
				transform: translateY(-50%);
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 5px 0 5px 6px;
				border-color: transparent transparent transparent #245596;
				z-index: 2;
			}

			.num {
				position: absolute;
				top: 14px;
				left: 12px;
				z-index: 2;
				width: auto;
				height: auto;
				padding: 0;
				background: none;
				clip-path: none;
				color: #fff;
				font-size: 18px;
				font-weight: 700;
				line-height: 1;
				letter-spacing: .025em;
				white-space: nowrap;
				transform: rotate(-45deg);
				transform-origin: center center;
			}

			figure {
				margin: 0 auto;
				line-height: 0;
                height: 110px;

				img {
					display: inline-block;
					max-width: 100%;
					height: auto;
					vertical-align: top;
				}
			}

			h3 {
				margin: 0 0 18px;

				.en {
					display: block;
					margin-bottom: 12px;
					color: #245596;
					font-size: 18px;
					font-weight: 700;
					letter-spacing: .15em;
					line-height: 1;
				}

				.ja {
					display: block;
					color: #333333;
					font-size: 20px;
					font-weight: 700;
					line-height: 1.4;
				}
			}

			p {
				margin: 0;
				color: #767676;
				font-size: 16px;
				line-height: 1.75;
				text-align: left;
                text-align: justify;
			}
		}

		@media only screen and (max-width: 991px) {
			gap: 36px;

			li {
				padding: 48px 20px 32px;

				h3 .en {
					font-size: 16px;
				}

				h3 .ja {
					font-size: 16px;
				}

				p {
					font-size: 14px;
				}

				&:not(:last-child)::after {
					right: -24px;
					border-width: 6px 0 6px 10px;
				}
			}
		}

		@media only screen and (max-width: 767px) {
			flex-direction: column;
			gap: 40px;
			margin-top: 50px;

			li {
				padding: 48px 24px 32px;

				figure {
					height: 90px;
				}

				h3 .en {
					font-size: 15px;
				}

				h3 .ja {
					font-size: 18px;
				}

				&:not(:last-child)::after {
					top: auto;
					bottom: -26px;
					right: auto;
					left: 50%;
					transform: translateX(-50%) rotate(90deg);
				}
			}
		}
	}

	@media only screen and (max-width: 991px) {
		padding: 100px 15px 120px;

		.elem {
			flex-direction: column;
			align-items: stretch;
			gap: 28px;

			p {
				font-size: 15px;
				letter-spacing: .08em;
			}

			.mov {
				width: 100%;
				max-width: 560px;
				margin: 0 auto;
			}
		}
	}

	@media only screen and (max-width: 767px) {
		padding: 30px 15px 72px;

		.elem {
			gap: 24px;

			p {
				font-size: 14px;
				letter-spacing: .05em;
				line-height: 1.95;
			}

			.mov {
				max-width: none;
			}
		}
	}
}







/*************************************************
 how
*************************************************/
.sec-how {
    padding: 98px 15px 160px;
    background-color: #f7f7f7;

    .photo-grid {
        display: grid;
        grid-template-columns: 4.6fr 2fr;
        grid-template-rows: 1fr 1fr;
        gap: 3px;
        height: 470px;
        margin-bottom: 52px;

        @media only screen and (max-width: 767px) {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 2fr 1fr;
            gap: 3px;
            height: 400px;
            margin-bottom: 40px;
        }

        .photo-main {
            grid-row: span 2;
            background: url(../images/new-office/img_how1.jpg) center/cover;
            position: relative;

            @media only screen and (max-width: 767px) {
                grid-column-start: 1;
                grid-column-end: 3;
                grid-row-start: 1;
                grid-row-end: 2;
            }
        }

        .photo-sub1 {
            background: url(../images/new-office/img_how2.jpg) center/cover;

            @media only screen and (max-width: 767px) {
                grid-column-start: 1;
                grid-column-end: 2;
                grid-row-start: 2;
                grid-row-end: 4;
            }
        }

        .photo-sub2 {
            background: url(../images/new-office/img_how3.jpg) center/cover;

            @media only screen and (max-width: 767px) {
                grid-column-start: 2;
                grid-column-end: 4;
                grid-row-start: 2;
                grid-row-end: 4;
            }
        }

        .photo-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 16px 20px;
            background: linear-gradient(transparent, rgba(26, 58, 92, .75));
            color: rgba(255, 255, 255, .85);
            font-size: 12px;
            display: none;
        }
    }

    .feature-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-bottom: 80px;

        .feature-item {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
            gap: 12px 27px;
            align-items: center;
            padding: 36px 0;
            background: none;
            border-top: 1px solid #e0e0e0;

            &:last-child {
                border-bottom: 1px solid #e0e0e0;
            }

            .feature-num {
                grid-column: 1;
                grid-row: 1;
                margin-bottom: 0;
                color: #2865a1;
                font-size: 20px;
                font-weight: 700;
                letter-spacing: .15em;
                line-height: 1;
            }

            .feature-head {
                grid-column: 1;
                grid-row: 2;
                margin-bottom: 0;
                color: #333;
                font-size: 20px;
                font-weight: 700;
                line-height: 1.4;
                letter-spacing: .075em;
            }

            .feature-body {
                grid-column: 2;
                grid-row: 1 / span 2;
                margin: 0;
                color: #767676;
                font-size: 16px;
                line-height: 1.75;
                text-align: left;
                text-align: justify;
            }
        }

        @media only screen and (max-width: 991px) {
            .feature-item {
                gap: 10px 32px;
                padding: 32px 0;

                .feature-num {
                    font-size: 18px;
                }

                .feature-head {
                    font-size: 18px;
                }

                .feature-body {
                    font-size: 14px;
                }
            }
        }

        @media only screen and (max-width: 767px) {
            margin-bottom: 56px;

            .feature-item {
                grid-template-columns: 1fr;
                gap: 0;
                align-items: start;
                padding: 28px 0;

                .feature-num {
                    grid-column: auto;
                    grid-row: auto;
                    margin-bottom: 10px;
                    font-size: 16px;
                }

                .feature-head {
                    grid-column: auto;
                    grid-row: auto;
                    margin-bottom: 14px;
                    font-size: 16px;
                }

                .feature-body {
                    grid-column: auto;
                    grid-row: auto;
                    font-size: 13px;
                    line-height: 1.85;
                }
            }
        }
    }

    .mov {
        margin: 0 auto;
        text-align: center;
        max-width: 720px;

        iframe {
            width: 100% !important;
            height: 405px !important;
        }

        video {
            display: block;
            width: 100%;
            height: auto;
            cursor: pointer;
        }
    }
}



.sec-para {
    height: 240px;

    .para {
		background: url(../images/new-office/bg_para.jpg) no-repeat center center;
		background-size: cover;
        background-position: center center !important;
        background-attachment: fixed;
        height: 100%;
    }

    @media only screen and (max-width: 767px) {
        .para {
            background: url(../images/new-office/bg_para-sp.jpg) no-repeat center center;
            background-size: cover;
            background-position: center right !important;
            background-attachment: fixed;
            height: 100%;
        }
    }
}




/*************************************************
 what
*************************************************/
.sec-what {
    padding: 160px 15px 160px;

    .box-what {
        .list-what {
            list-style: none;
            margin: 0 0 18px;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;

            .item {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 0;
                padding: 60px 30px 45px;
                border: 1px solid #2865a1;
                background-color: #fff;
                text-align: center;
                box-sizing: border-box;

                .num {
                    margin: 0 auto;
                    height: 110px;
                    line-height: 0;

                    img {
                        display: inline-block;
                        max-width: 100%;
                        height: auto;
                        vertical-align: top;
                    }
                }

                .desc {
                    flex: 1;
                    width: 100%;
                    margin: 0 0 25px;
                    color: #767676;
                    font-size: 16px;
                    line-height: 1.75;
                    text-align: left;
                    text-align: justify;
                }

                .sdg {
                    margin: 0;
                    line-height: 0;

                    img {
                        display: inline-block;
                        width: 92px;
                        height: auto;
                        vertical-align: top;
                    }
                }
            }

            @media only screen and (max-width: 991px) {
                gap: 16px;

                .item {
                    padding: 32px 20px 28px;

                    .desc {
                        font-size: 13px;
                    }
                }
            }

            @media only screen and (max-width: 767px) {
                grid-template-columns: 1fr;
                gap: 20px;
                margin-bottom: 20px;
            }
        }

        .panel-lca {
            border: 1px solid #2865a1;
            background-color: #fff;
            box-sizing: border-box;
        }

        .panel-lca__inner {
            display: block;
            /* grid-template-columns: minmax(0, 1fr) minmax(200px, 260px);
            gap: 56px; */
            /* align-items: center; */
            padding: 50px 40px 0;
            margin-bottom: 100px;
        }

        .panel-lca__body {
            min-width: 0;

            .ttl {
                position: relative;
                margin: 0 0 22px;
                padding-bottom: 16px;
                color: #2865a1;
                font-size: 20px;
                font-weight: 700;
                line-height: 1.5;

                &::before {
                    content: '';
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 11.9em;
                    height: 2px;
                    background-color: #2865a1;
                }
            }

            .txt {
                p {
                    margin: 0 0 1.5em;
                    color: #767676;
                    font-size: 16px;
                    line-height: 1.75;
                    letter-spacing: .15em;
                    text-align: justify;

                    &:last-child {
                        margin-bottom: 0;
                        line-height: 1.35;
                    }
                }

                .note {
                    color: #767676;
                    font-size: 14px;
                    line-height: 1.75;
                    letter-spacing: .15em;
                }
            }
        }

        .panel-lca__num {
            margin: 0;
            padding: 0;
            text-align: center;

            img {
                display: block;
                width: 100%;
                max-width: 172px;
                height: auto;
                margin: 0 auto;
            }

            figcaption {
                margin-top: 14px;
                color: #2865a1;
                text-align: center;
                line-height: 1.6;

                .sub {
                    display: block;
                    margin-bottom: 6px;
                    font-size: 14px;
                }

                .detail {
                    display: block;
                    font-size: 14px;
                    line-height: 1.3;
                    letter-spacing: .15em;
                }
            }
        }

        .btn {
            margin: 0 auto 90px;
            width: 400px;

            a {
                &:hover span span span:before {
                    border-left-color: #05569B;
                    opacity: 1;
                }
            }

            span:after, span:before {
                content: none;
            }

            span span span {
                position: relative;

                &:before {
                    position: absolute;
                    top: 52%;
                    right: -2em;
                    display: block;
                    content: '';
                    border-left: #fff solid 7px;
                    border-top: transparent solid 5px;
                    border-bottom: transparent solid 5px;
                    transform: translateY(-50%);
                    transition: 0.3s;
                 }
            }
        }

        @media only screen and (max-width: 991px) {
            .btn {
                margin: 0 auto 40px;
                width: 90%;

                a {
                    &:hover span span span:before {
                        border-left-color: #05569B;
                        opacity: 1;
                    }
                }

                span:after, span:before {
                    content: none;
                }

                span span span {
                    position: relative;

                    &:before {
                        position: absolute;
                        top: 52%;
                        right: -2em;
                        display: block;
                        content: '';
                        border-left: #fff solid 7px;
                        border-top: transparent solid 5px;
                        border-bottom: transparent solid 5px;
                        transform: translateY(-50%);
                        transition: 0.3s;
                    }
                }
            }
        }


        .panel-lca__sdgs {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: nowrap;
            gap: 28px;
            margin: 0;
            padding: 50px 40px;
            display: none;

            .label {
                flex-shrink: 0;
                margin: 0;
                color: #2865a1;
                font-size: 14px;
                line-height: 1;
                letter-spacing: .15em;
                white-space: nowrap;
            }

            .icons {
                display: flex;
                flex: 1;
                flex-wrap: nowrap;
                align-items: center;
                gap: 10px;
                list-style: none;
                margin: 0;
                padding: 0;

                li {
                    flex-shrink: 0;
                    margin: 0;
                    line-height: 0;

                    img {
                        display: block;
                        width: 92px;
                        height: 92px;
                        object-fit: contain;
                    }
                }
            }
        }

        @media only screen and (max-width: 991px) {
            .panel-lca__inner {
                grid-template-columns: minmax(0, 1fr) minmax(160px, 220px);
                gap: 32px;
                padding: 36px 32px 0;
                margin-bottom: 40px;
            }

            .panel-lca__body {
                .ttl {
                    font-size: 18px;
                    margin-bottom: 24px;
                }

                .txt p {
                    font-size: 13px;
                }
            }

            .panel-lca__num {
                img {
                    max-width: 200px;
                }

                figcaption {
                    .sub {
                        font-size: 13px;
                    }

                    .detail {
                        font-size: 11px;
                    }
                }
            }

            .panel-lca__sdgs {
                gap: 20px;
                padding: 32px 32px 36px;

                .icons {
                    gap: 10px;

                    li img {
                        width: 56px;
                        height: 56px;
                    }
                }
            }
        }

        @media only screen and (max-width: 767px) {
            .panel-lca__inner {
                grid-template-columns: 1fr;
                gap: 28px;
                padding: 32px 24px 0;
            }

            .panel-lca__num {
                order: -1;

                img {
                    max-width: 180px;
                }
            }

            .panel-lca__sdgs {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
                padding: 28px 24px 32px;

                .icons {
                    flex-wrap: wrap;
                    width: 100%;
                    gap: 10px;

                    li img {
                        width: 52px;
                        height: 52px;
                    }
                }
            }
        }
    }

    @media only screen and (max-width: 767px) {
        padding: 60px 15px 100px;
    }
}




/*************************************************
 voice
*************************************************/
.sec-voice {
    padding: 80px 0;
    background-color: #2865a1;

    .ttl-voice {
        margin: 0 0 55px;
        color: #fff;
        text-align: center;

        .ja {
            display: block;
            margin-bottom: 18px;
            font-size: 30px;
            font-weight: 700;
            line-height: 1;
        }

        .en {
            display: block;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.15em;
            line-height: 1;
        }
    }

    .box-slide {
        position: relative;
        max-width: 100%;
        margin: 0 auto;

        * {
            outline: none;
        }

        .slick-track {
            display: flex !important;
            align-items: stretch;
        }

        .slick-slide {
            display: flex !important;
            height: auto !important;

            > div {
                display: flex;
                width: 100%;
            }
        }

        .item {
            max-width: 800px;
            width: 100%;
            margin: 0 95px;
            padding: 36px 40px 32px;
            background-color: #fff;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: flex-start;

            .ttl {
                display: inline-block;
                margin-bottom: 24px;
                padding: 7px 14px;
                border: 1px solid #2865a1;
                color: #2865a1;
                font-size: 13px;
                font-weight: 700;
                line-height: 1.4;
                width: auto;
            }

            p {
                margin: 0 0 24px;
                color: #333;
                font-size: 14px;
                line-height: 2;
            }

            .line {
                display: block;
                width: 40px;
                height: 2px;
                margin-bottom: 16px;
                background-color: #2865a1;
            }

            .prof {
                margin: 0;
                color: #2865a1;
                font-size: 13px;
                font-weight: 700;
                line-height: 1.6;
            }
        }

        .slick-arrow {
            position: absolute;
            top: calc(50% - 30px);
            z-index: 10;
            width: 18px;
            height: 24.5px;
            margin-top: 0;
            padding: 0;
            border: none;
            background: transparent url(../images/new-office/icon_prev.svg) no-repeat center / contain;
            cursor: pointer;
            appearance: none;
            transform: none;
            text-indent: -9999px;
            overflow: hidden;

            &::before,
            &::after {
                display: none;
            }
        }

        .slick-prev {
            left: calc(50% - (800px / 2 + 190px / 2));
            transform: translateX(-50%);
        }

        .slick-next {
            left: calc(50% + (800px / 2 + 190px / 2));
            right: auto;
            transform: translateX(-50%) scaleX(-1);
        }

        .slick-dots {
            position: relative;
            bottom: auto;
            margin: 44px 0 0;
            padding: 0;
            line-height: 0;
            text-align: center;
            display: flex;
            justify-content: center;

            li {
                width: auto;
                height: auto;
                margin: 0 8px;

                button {
                    width: 10px;
                    height: 10px;
                    padding: 0;
                    border: 2px solid transparent;
                    border-radius: 50%;
                    background-color: #fff;
                    box-sizing: border-box;
                    opacity: 1;
                    text-indent: -9999px;
                    overflow: hidden;
                    transition: background-color 0.2s, border-color 0.2s;

                    &::before {
                        display: none;
                    }
                }

                &.slick-active button {
                    background-color: transparent;
                    border-color: #fff;
                }
            }
        }
    }

    @media only screen and (max-width: 1200px) {
        .box-slide {
            .slick-prev,
            .slick-next {
                right: auto;
            }
        }
    }

    @media only screen and (max-width: 767px) {
        padding: 64px 0 72px;

        .ttl-voice {
            margin-bottom: 36px;

            .ja {
                font-size: 22px;
            }

            .en {
                font-size: 12px;
            }
        }

        .box-slide {
            .item {
                width: auto;
                margin: 0 20px;
                padding: 28px 24px 24px;

                p {
                    font-size: 13px;
                    line-height: 1.95;
                }
            }

            .slick-arrow {
                width: 14px;
                height: 19px;
                top: calc(50% - 24px);
            }

            .slick-prev {
                left: 12px;
                right: auto;
                transform: none;
            }

            .slick-next {
                left: auto;
                right: 12px;
                transform: scaleX(-1);
            }

            .slick-dots {
                margin-top: 32px;
            }
        }
    }
}








/*************************************************
 Relations
*************************************************/
.sec-rela {
    overflow: hidden;
    padding: 120px 0 0;
    background-color: #f7f7f7;

    .inner {
        max-width: 1430px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .sec-rela__head {
        position: relative;
        z-index: 2;
    }

    .ttl-rela {
        position: relative;
        margin: 0;
        padding-bottom: 30px;

        .en {
            display: block;
            margin-bottom: 16px;
            color: #2865a1;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.12em;
            line-height: 1;
        }

        .ja {
            display: block;
            color: #1a1a1a;
            font-size: 30px;
            font-weight: 700;
            line-height: 1.55;
        }

        &::before {
            position: absolute;
            bottom: 0;
            left: 0;
            display: block;
            width: 25em;
            height: 2px;
            background-color: #2865a1;
            content: '';
        }
    }

    .lead {
        max-width: 520px;
        margin: 28px 0 0;
        color: #767676;
        font-size: 16px;
        line-height: 2;
    }

    .sec-rela__body {
        position: relative;
        display: flow-root;
        padding-bottom: 0;

        &::after {
            display: block;
            clear: both;
            content: '';
        }
    }

    .image {
        position: relative;
        float: right;
        max-width: 46.3%;
        margin-top: -328px;
        z-index: 1;

        figure {
            margin: 0;
        }

        img {
            display: block;
            width: 100%;
            height: auto;
        }
    }

    .caseBox {
        position: relative;
        margin-top: 90px;
        z-index: 2;

        p {
            font-size: 16px;
        }
    }

    .caseBox .bg {
        box-sizing: border-box;
        max-width: 585px;
        padding: 50px 70px 160px;
        background-color: #fff;
        box-shadow: 0 8px 32px rgba(26, 58, 92, 0.06);
    }

    .caseBox .box + .box {
        margin-top: 60px;
        padding-top: 60px;
        border-top: 1px solid #e0e0e0;

        &.last {
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 60px;
        }
    }

    .caseBox .box-intro {
        margin-top: 0;
        padding-top: 0;
        border-top: none;

        .boxTitle {
            margin-bottom: 24px;
        }

        .boxTitle span {
            color: #2865a1;
            font-size: 20px;
            font-weight: 700;
            line-height: 1.6;
        }
    }

    .caseBox .box-intro + .box {
        margin-top: 48px;
        padding-top: 48px;
        border-top: 1px solid #e0e0e0;
    }

    .caseBox .boxTitle {
        margin-bottom: 28px;
    }

    .caseBox .boxTitle * {
        display: block;
    }

    .caseBox .boxTitle small {
        margin-bottom: 8px;
        color: #2865a1;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .caseBox .boxTitle span {
        color: #1a1a1a;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.4;
    }

    .caseBox .box .ttl {
        position: relative;
        margin: 24px 0 10px;
        padding-left: 1em;
        color: #1a1a1a;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.6;

        &::before {
            position: absolute;
            top: 50%;
            left: 0;
            display: block;
            width: 5px;
            height: 5px;
            background-color: #2865a1;
            content: '';
            transform: translateY(-50%) rotate(45deg);
        }

        &:first-of-type {
            margin-top: 0;
        }
    }

    .caseBox .box .text {
        color: #767676;
        font-size: 14px;
        line-height: 1.9;

        p {
            margin: 0;
        }
    }

    .photos {
        position: absolute;
        top: 90px;
        right: 0;
        bottom: 0;
        width: 46%;
        max-width: 560px;
        pointer-events: none;

        .photo {
            position: absolute;
            margin: 0;

            img {
                display: block;
                width: 100%;
                height: auto;
            }
        }

        .photo--1 {
            top: 20%;
            right: 15%;
            width: 44%;
        }

        .photo--2 {
            top: 35%;
            left: 5%;
            right: auto;
            width: 80%;
        }

        .photo--3 {
            top: 51.5%;
            right: 0;
            width: 68%;
        }

        .photo--4 {
            top: 68%;
            right: 4%;
            width: 80%;
        }

        .photo--5 {
            bottom: 4%;
            left: 4%;
            right: auto;
            width: 71%;
        }
    }

    @media only screen and (max-width: 1200px) {
        .photos {
            width: 40%;
            max-width: 420px;

            .photo--1 {
                width: 48%;
            }

            .photo--2 {
                width: 90%;
            }

            .photo--3 {
                width: 74%;
            }

            .photo--4 {
                width: 82%;
            }

            .photo--5 {
                width: 64%;
            }
        }

        .image {
            max-width: 44%;
        }
    }

    @media only screen and (max-width: 991px) {
        padding: 100px 0 120px;

        .sec-rela__body {
            padding-bottom: 0;
        }

        .photos {
            position: relative;
            top: auto;
            right: auto;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            width: 100%;
            max-width: none;
            height: auto;
            margin-top: 40px;
            padding: 0 20px;
            pointer-events: auto;

            .photo {
                position: relative;
                top: auto !important;
                right: auto !important;
                width: auto !important;
            }

            .photo--2 {
                grid-column: span 2;
            }

            .photo--4 {
                grid-column: span 2;
            }
        }
    }

    @media only screen and (max-width: 767px) {
        padding: 60px 15px 72px;

        .inner {
            padding: 0;
        }

        .ttl-rela {
            padding-bottom: 25px;

            .ja {
                font-size: 22px;
            }

            &::before {
                width: 23em;
            }
        }

        .sec-rela__head {
            padding: 0;
        }

        .lead {
            margin-top: 22px;
            font-size: 13px;
            line-height: 1.95;
        }

        .image {
            float: none;
            max-width: none;
            margin: 30px 0 0 0;
            z-index: 2;

            img {
                width: 100%;
            }
        }

        .caseBox {
            margin-top: 20px;
            z-index: 1;
            padding: 0;

            &::before {
                position: absolute;
                right: 0;
                bottom: 0;
                display: block;
                width: 100%;
                height: 100%;
                padding-bottom: 70px;
                background-color: #fff;
                content: '';
                z-index: 1;
            }

            p {
                font-size: 14px;
            }
        }

        .caseBox .bg {
            position: relative;
            max-width: none;
            padding: 50px 15px 70px 15px;
            background-color: transparent;
            box-shadow: none;
            z-index: 2;
        }

        .caseBox .box + .box {
            margin-top: 48px;
            padding-top: 48px;
        }

        .caseBox .boxTitle small {
            font-size: 10px;
        }

        .caseBox .boxTitle span {
            font-size: 17px;
        }

        .caseBox .box-intro .boxTitle span {
            font-size: 16px;
        }

        .photos {
            margin-top: 32px;
            padding: 0;
            grid-template-columns: 1fr;
            gap: 12px;
            display: none;

            .photo--2,
            .photo--4 {
                grid-column: auto;
            }

            .photo {
                left: auto !important;
            }
        }
    }
}






/*************************************************
 CTA
*************************************************/
.sec-cta {
    padding: 88px 0 96px;
    background-color: #2865a1;
    text-align: center;
    margin-bottom: 75px;

    .ttl-cta {
        margin: 0 0 48px;
        color: #fff;

        .txt-l {
            display: block;
            margin-bottom: 16px;
            font-size: 26px;
            font-weight: 700;
            line-height: 1.6;
        }

        .txt-s {
            display: block;
            font-size: 14px;
            font-weight: 400;
            line-height: 1.8;
        }
    }

    .list-cta {
        display: flex;
        justify-content: center;
        gap: 16px;
        max-width: 1000px;
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

    .item-cta {
        flex: 1;
        max-width: 320px;

        a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            box-sizing: border-box;
            width: 100%;
            min-height: 56px;
            padding: 16px 20px;
            background-color: #fff;
            color: #2865a1;
            font-size: 14px;
            font-weight: 700;
            line-height: 1.4;
            text-decoration: none;
            transition: background-color 0.2s, color 0.2s;

            span {
                display: inline-block;
            }

            &::after {
                display: block;
                flex-shrink: 0;
                width: 7px;
                height: 7px;
                border-style: solid;
                border-color: #2865a1;
                border-width: 2px 2px 0 0;
                transform: rotate(45deg);
                content: '';
                transition: border-color 0.2s;
            }
        }
    }

    @media only screen and (max-width: 991px) {
        .list-cta {
            flex-wrap: wrap;
        }

        .item-cta {
            flex: 1 1 calc(50% - 8px);
            max-width: none;

            &:last-child {
                flex: 1 1 100%;
                max-width: 360px;
            }
        }
    }

    @media only screen and (max-width: 767px) {
        padding: 64px 0 72px;

        .ttl-cta {
            margin-bottom: 36px;

            .txt-l {
                font-size: 20px;
            }

            .txt-s {
                font-size: 13px;
            }
        }

        .list-cta {
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .item-cta {
            flex: none;
            width: 100%;
            max-width: 360px;

            &:last-child {
                flex: none;
                max-width: 360px;
            }

            a {
                min-height: 52px;
                padding: 14px 18px;
                font-size: 13px;
            }
        }
    }
}

.noT .sec-cta .item-cta a:hover {
    background-color: transparent;
    box-shadow: inset 0 0 0 2px #fff;
    color: #fff;

    &::after {
        border-color: #fff;
    }
}













/* .culture
-------------------------------------------*/
.culture {
	margin-bottom: 160px;
	height: 820px;
	margin: 0 auto 60px;
	width: 100vw;
	position: relative;
}
.culture .culture-img {
	width: 100%;
	height: 100%;
	background-image: url(../img/sustainability/culture_img.jpg);
	background-size: cover;
	position: absolute;
	display: block;
}
.culture > div {
	position: absolute;
	margin: auto;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%) !important;
	-webkit-transform: translateY(-50%) translateX(-50%) !important;
	background-color: #ffffffde;
	padding: 48px 56px;
}
.culture >div h2 {
	font-size: 34px;
	font-weight: 600;
	color: #0F65AF;
    line-height: 1.4;
    margin-bottom: 24px;
}
.culture >div p {
	color: #0F65AF;
	font-size: 17px;
	font-weight: 500;
    margin: 0 0 46px;
}
.commonBtn01 > span:before {
	content: url(../images/healthcare/link_icon.svg);
	display: block;
    border: none;
    right: 124px;
    z-index: 1;
}
.commonBtn01:hover > span:before {
	opacity: 0;
}
.commonBtn01 > span:after {
	content: url(../images/healthcare/link_icon_b.svg);
	position: absolute;
	display: block;
    border: none;
    right: 124px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
}
@media only screen and (max-width:767px) {
	.culture {
    	height: auto;
    	margin-bottom: 80px;
    }
    .culture-img {
        position: relative;
        height: 220px;
    }
	.culture > div {
		padding: 38px 6px;
		width: 82%;
		position: relative;
		top: auto;
		left: auto;
		transform: inherit;
		-webkit-transform: inherit;
        transform: translateY(0) translateX(0) !important;
        -webkit-transform: translateY(0) translateX(0) !important;
	}
	.culture >div h2 {
        font-size: 18px;
    }
    .culture >div p {
    	font-size: 14px;
   	    margin-bottom: 30px;
    }
    .culture .culture-img {
    	position: relative;
    	height: 220px;
    }
    .culture >div figure img {
    	width: 52px;
    }
    .commonBtn01 > span:before,
    .commonBtn01 > span:after {
    	right: 14px;
    }
}