@charset "UTF-8";

.packer-lead {
	margin-bottom: 50px;
}

.packer-lead__head {
	min-width: 490px;
}

.packer-lead__text {
	padding-top: 70px;
}

.packer-panel {
	margin-bottom: 125px;
}

.packer-panel__box {
	padding: 90px 70px;
	border-radius: 50px;
	background: var(--color-blue-sub) url("../image/packer_bg_01.png") 0 0 no-repeat;
	background-size: 100%;
	color: #fff;
}

.packer-panel__head {
	padding: 10px 0 0 50px;
}

.packer-flow {
	margin-top: 55px;
}

.packer-flow__list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 65px 82.5px;
	text-align: center;
}

.packer-flow__card {
	position: relative;
}

.packer-flow__card:not(:nth-child(3n))::after {
	content: "";
	position: absolute;
	right: -55px;
	top: min(7vw, 100px);
	display: block;
	border: solid transparent;
	border-left-color: var(--color-bg-blue-light);
	border-width: 20px 0 20px 18px;
	opacity: .5;
}

.packer-flow__text {
	margin: 5px 0 0;
}

.packer-detail {
	margin-bottom: 210px;
}

.packer-detail:last-child {
	margin-bottom: 0;
}

.packer-detail__head {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: end;
	    -ms-flex-align: end;
	        align-items: flex-end;
	gap: 60px;
	margin-bottom: 50px;
}

.packer-detail__title {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
}

.packer-detail__bgText {
	color: var(--color-bg-blue-light);
	font-family: var(--font-en);
	font-size: 140px;
	font-weight: 600;
	letter-spacing: -.06em;
	line-height: .95;
	white-space: nowrap;
	opacity: .5;
	pointer-events: none;
}

.packer-detail__item {
	position: relative;
	display: grid;
	grid-template-columns: 249px minmax(0, 1fr);
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	gap: 54px;
	padding: 20px 0;
	margin-bottom: 22px;
}

.packer-detail__content::before {
	content: "";
	display: block;
	position: absolute;
	left: 303px;
	right: 0;
	bottom: 0;
	border-bottom: solid 1px var(--color-gray);
}

.packer-detail__item:last-child .packer-detail__content::before {
	display: none;
}

.packer-detail__image {
	border-radius: 5px;
}

.packer-detail__row {
	display: grid;
	grid-template-columns: 85px minmax(0, 1fr);
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	gap: 20px;
}

.packer-detail__row + .packer-detail__row {
	margin-top: 8px;
}

.packer-detail__label {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: .5em;
	border-radius: 5px;
	background: var(--color-blue-dark);
	color: #fff;
	font-size: .875em;
	font-weight: 500;
	line-height: 1;
	text-align: center;
}

.packer-detail__label--gray {
	background: var(--color-text-sub);
}

.packer-detail__name {
	margin: 0;
	color: var(--color-blue-dark);
	font-size: 20px;
	font-weight: 500;
	line-height: 1.5;
}

.packer-detail__desc {
	max-width: 700px;
	margin: 0;
	line-height: 1.7;
}

.packer-detail__panel {
	position: relative;
	margin-top: 46px;
	padding: 50px 50px 58px;
	border-radius: 20px;
	background: var(--color-bg-pale);
}

.packer-detail__panel::before {
	content: "\f107";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	left: 50%;
	top: 0;
	-webkit-transform: translate(-50%, -37%);
	        transform: translate(-50%, -37%);
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--color-green);
	color: #fff;
	font-size: 25px;
}

.packer-detail__panelRow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 532px);
	gap: 75px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
}

.packer-detail__panelText {
	padding-top: 10px;
}

.packer-detail__panelTitle {
	margin: 0 0 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid var(--color-gray);
	font-size: 20px;
	line-height: 1.5;
}

.packer-detail__panelDesc {
	line-height: 1.6;
}

.packer-detail__panelImages {
	display: grid;
	grid-template-columns: minmax(0, .988fr) minmax(0, 1fr);
	gap: 37px;
}

.packer-detail__panelCard {
	position: relative;
	min-width: 0;
	text-align: center;
}

.packer-detail__panelCard::after {
	content: "";
	position: absolute;
	right: -30px;
	top: 55px;
	display: block;
	border: solid transparent;
	border-left-color: var(--color-blue);
	border-width: 20px 0 20px 18px;
	opacity: .5;
}

.packer-detail__panelCard:last-child:after {
	display: none;
}

.packer-detail__panelCaption {
	margin: 14px 0 0;
	line-height: 1.6;
}

.packer-diagram {
	overflow: hidden;
	border-radius: 20px;
	background: var(--color-gray);
}

.packer-diagram + .packer-diagram {
	margin-top: 32px;
}

.packer-diagram--accent {
	background: var(--color-bg-blue-light);
}

.packer-diagram__head {
	padding: 26px 26px 19px 52px;
	background: #7A7A7A;
	color: #fff;
}

.packer-diagram--accent .packer-diagram__head {
	background: var(--color-blue-sub);
}

.packer-diagram__headInner {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

.packer-diagram__headLead {
	margin: 0;
	font-size: 18px;
	font-weight: 500;
}

.packer-diagram__headText {
	position: relative;
	padding-left: 25px;
	margin-left: 60px;
}

.packer-diagram__headText::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: .25em;
	bottom: .25em;
	border-left: 1px solid #fff;
}

.packer-diagram__body {
	padding: 65px 60px 45px;
}

.packer-diagram__image {
	text-align: center;
}

.packer-diagram__notes {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 48px;
	margin-top: 50px;
}

.packer-diagram__noteLb {
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	font-size: 20px;
	line-height: 1.5;
}

.packer-diagram__noteText {
	line-height: 1.6;
}

.packer-list {
	margin: -70px 0 -80px;
}

.packer-list__item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 371px;
	gap: 60px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 80px 0;
	border-bottom: solid 1px var(--color-gray);
}

.packer-list__item:last-child {
	border-bottom: none;
}

.packer-list__title {
	position: relative;
	margin: 0 0 30px;
	padding-left: 1.25em;
	color: var(--color-blue-sub);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.6;
}

.packer-list__title::before {
	content: "・";
	position: absolute;
	left: -.375em;
}

.packer-list__text {
	max-width: 670px;
}

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

	.packer-lead__head {
		min-width: 0;
	}

	.packer-lead__text {
		padding-top: 0;
	}

	.packer-panel {
		margin-bottom: 75px;
	}

	.packer-panel__box {
		padding: 50px 8% 40px;
		border-radius: 28px;
	}

	.packer-panel__head {
		padding: 0;
	}

	.packer-flow {
		margin-top: 40px;
	}

	.packer-flow__list,
	.packer-detail__item,
	.packer-detail__panelRow,
	.packer-detail__panelImages,
	.packer-list__item {
		grid-template-columns: 1fr;
	}

	.packer-flow__list {
		gap: 18px;
	}

	.packer-flow__list {
		gap: 30px;
	}

	.packer-flow__card::after {
		content: "";
		position: absolute;
		right: 50% !important;
		top: auto !important;
		bottom: -17px;
		margin-right: -14px;
		border: solid transparent;
		border-color: var(--color-bg-blue-light) transparent transparent transparent !important;
		border-width: 12px 14px 0 14px !important;
		opacity: .5;
	}

	.packer-flow__card:last-child:after {
		display: none;
	}

	.packer-detail {
		margin-bottom: 85px;
	}

	.packer-detail__items,
	.packer-detail__panel {
		max-width: 600px;
		margin-left: auto;
		margin-right: auto;
	}

	.packer-detail__head {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 5px;
		margin-bottom: 25px;
	}

	.packer-detail__title {
		-ms-flex-item-align: start;
		    align-self: flex-start;
	}

	.packer-detail__bgText {
		font-size: min(13vw, 75px);
	}

	.packer-detail__item {
		gap: 22px;
		padding: 30px 0;
		margin-bottom: 0;
	}

	.packer-detail__item:first-child {
		padding-top: 0;
	}

	.packer-detail__content::before {
		left: 0;
	}

	.packer-detail__image {
		max-width: 420px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

	.packer-detail__row {
		grid-template-columns: 75px minmax(0, 1fr);
		gap: 15px;
	}

	.packer-detail__name {
		font-size: 18px;
	}

	.packer-detail__panel {
		margin-top: 20px;
		padding: 33px 8%;
		border-radius: 15px;
	}

	.packer-detail__panel::before {
		width: 35px;
		height: 35px;
		font-size: 16px;
	}

	.packer-detail__panelRow {
		gap: 40px;
	}

	.packer-detail__panelText {
		padding-top: 7px;
	}

	.packer-detail__panelTitle {
		font-size: 18px;
	}

	.packer-detail__panelCard::after {
		right: 50%;
		top: auto;
		bottom: -23px;
		margin-right: -15px;
		border-color: var(--color-blue) transparent transparent transparent;
		border-width: 12px 15px 0 15px;
	}

	.packer-detail__panelCaption {
		margin: 12px 0 0;
	}

	.packer-diagram {
		border-radius: 15px;
	}

	.packer-diagram + .packer-diagram {
		margin-top: 20px;
	}

	.packer-diagram__head {
		padding: 15px 20px 12px;
	}

	.packer-diagram__headInner {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
	}

	.packer-diagram__headLead {
		padding-left: .5em;
		text-indent: -.5em;
		font-size: 16px;
		line-height: 1.9;
	}

	.packer-diagram__headText {
		padding: 10px 0 0;
		margin: 12px 0 0;
	}

	.packer-diagram__headText::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		border-left: none;
		border-top: 1px solid #fff;
	}

	.packer-diagram__body {
		padding: 35px 20px 30px;
	}

	.packer-diagram__notes {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		gap: 15px;
		margin-top: 28px;
	}

	.packer-diagram__noteLb {
		font-size: 18px;
	}

	.packer-list {
		margin: -30px 0 -35px;
	}

	.packer-list__item {
		gap: 28px;
		padding: 35px 0;
	}

	.packer-list__title {
		margin: 0 0 18px;
		font-size: 23px;
	}

	.packer-list__text {
		max-width: none;
	}

	.packer-list__image {
		max-width: 600px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}

}