@charset "utf-8";

/*===============================================
 各ページ用 css/about.css
===============================================*/
/*=======================================================
 - ～559.9px	：スマートフォン画面(ヘッダーメニューはハンバーガーのみ)
 - 560px ～		：タブレット(小)環境に切り替え(ヘッダーメニューはハンバーガーのみ)
 - ～767.9px	：スマートフォン画面(ヘッダーメニューはハンバーガーのみ)
 - 768px ～		：タブレット・PC環境に切り替え(ヘッダーメニューはハンバーガーのみ)
 - 960px ～		：ヘッダーメニューが2種類に(ハンバーガー + オープン状態)
 - ～1099.9px	：コンテンツ幅最大値(ニュース記事など)
 - ～1399.9px	：サイトデザイン最大幅
●基本割合
・2等分：width:48%
・3等分：width:30.6%;
・4等分：width:22%;
・2分割：width:30%＆66% or 38%＆58%
=======================================================*/
@media screen and (max-width: 559.9px) {
}
@media print, screen and (min-width: 560px) {
}
@media screen and (max-width: 767.9px) {
}
@media print, screen and (min-width: 768px) {
}
@media print, screen and (min-width: 960px) {
}
@media print, screen and (min-width: 1100px) {
}
@media print, screen and (min-width: 1400px) {
}



/*===============================================
 上書き
===============================================*/
:root,div,span,p,li,button {
	--cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.contents {
	margin: 0;
}

.breadcrumb {
	margin: 0;
	position: relative;
	z-index: 5;
}

.block:not(:last-child) {
	margin: 0;
}
@media print, screen and (min-width: 768px) {
	.block:not(:last-child) {
		margin-bottom: 0;
	}
}
@media print, screen and (min-width: 960px) {
	.block:not(:last-child) {
		margin-bottom: 0;
	}
}

.block:before {
	bottom: -1.9em;
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	content: '';
	display: block;
	height: 2em;
	left: 50%;
	position: absolute;
	translate: -50% 0;
	width: 7em;
	z-index: 1;
}

@media print, screen and (min-width: 560px) {
	.block:before {
		bottom: -3.9em;
		height: 4em;
		width: 15em;
	}
}

.sblock {
	max-width: 1300px;
}

.sblock:not(:last-child) {
	margin: 0 auto 2em;
}

.page_about .title-h2 {
	color: inherit;
	font-size: max(2.1rem, min(3.4vw, 4rem));	/* 古いSafari用 */
	font-size: clamp(2.1rem, 3.4vw, 4rem);
	letter-spacing: 0.04em;
}

.page_about .title-h2:first-letter {
	color: inherit;
}

@media print, screen and (min-width: 560px) {
	.page_about .title-h2 {
		margin: 0 0 .6em;
	}
}

.page_about .title-h2 span {
	display: block;
}

.page_about .title-h2 span.sub {
	font-size: .7em;
}

/* アニメーション*/
.page_about .title-h2 {
	opacity: 0;
	translate: 0 20%;
	transition: all .3s ease-in-out;
}

.page_about .title-h2.inview {
	opacity: 1;
	translate: 0 0;
}



/*===============================================
 トップ
===============================================*/
.block.top {
	background-image: url(../images/about/top_back.png),
		linear-gradient(90deg, rgba(73, 172, 250, 1), rgba(40, 126, 218, 1));
	background-position: center top, center;
	background-repeat: no-repeat;
	background-size: auto 100%, auto;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
	z-index: 4;
}

.block.top:before {
	background-image: linear-gradient(90deg, rgba(73, 172, 250, 1), rgba(40, 126, 218, 1));
	background-position: center;
	background-size: 100vw;
}

.block.top .text {
	color: #fff;
	padding: 3em 0;
	position: relative;
	width: 100%;
	z-index: 2;
}

@media print, screen and (min-width: 768px) {
	:root,div,span,p,li,button {
		--text_m: clamp(1em, 7vw, 90px);
	}

	.block.top .text {
		padding: var(--text_m) 0 var(--text_m) var(--text_m);
		width: 56%;
	}
}

.block.top .question {
	width: 100%;
}

@media print, screen and (min-width: 560px) {
	.block.top .question {
		width: 65%;
	}
}

.block.top .img_sp {
	margin: 2em auto 0;
	width: 90%;
}

@media print, screen and (min-width: 560px) {
	.block.top .img_sp {
		display: none;
	}
}

.block.top .emphasis {
	border-bottom: 2px dotted #fff;
	font-size: max(2rem, min(3vw, 3.5rem));	/* 古いSafari用 */
	font-size: clamp(2rem, 3vw, 3.5rem);
	font-weight: bold;
	display: inline-block;
	margin: 0 0 1em;
	padding: 0 0 .3em;
}

.block.top p {
	line-height: 2em;
}

@media print, screen and (min-width: 560px) {
	.block.top .emphasis {
		margin: 2em 0 1em;
	}
}

@media print, screen and (min-width: 768px) {
	.block.top .question {
		width: 100%;
	}

	.block.top .emphasis {
		font-size: max(1.8rem, min(2vw, 2.4rem));	/* 古いSafari用 */
		font-size: clamp(1.8rem, 2vw, 2.4rem);
		margin: 3.8em 0 1.4em;
	}

	.block.top p {
		font-size: max(1.2rem, min(1.7vw, 1.6rem));	/* 古いSafari用 */
		font-size: clamp(1.2rem, 1.7vw, 1.6rem);
	}
}

.block.top .img {
	display: none;
}

@media print, screen and (min-width: 560px) {
	.block.top .img {
		display: block;
		position: absolute;
		top: 2.5em;
		right: 0;
		width: 49%;
		z-index: 1;
	}
}

/* アニメーション*/
.block.top {
	opacity: 0;
	transition: all .5s ease-in-out;
}

.block.top.inview {
	opacity: 1;
}



/*===============================================
 仕事
===============================================*/
.block.about {
	background: #fff;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
	z-index: 3;
}

.block.about .sblock:not(:last-child) {
	margin: 0 auto;
	padding: 5em 0 1em;
}

@media print, screen and (min-width: 560px) {
	.block.about .sblock:not(:last-child) {
		padding: 7em 0 0;
	}
}

.block.about:before {
	background: #fff;
}


@media print, screen and (max-width: 559.9px) {
	.block.about .read {
		margin: 0;
	}
}

@media print, screen and (max-width: 767.9px) {
	.block.about .read {
		text-align: left;
	}
}

@media print, screen and (min-width: 560px) and (max-width: 767.9px) {
	.block.about .read {
		margin: 0 0 5em;
	}
}

@media print, screen and (min-width: 768px) {
	.block.about .read {
		font-size: max(1.4rem, min(1.5vw, 1.8rem));	/* 古いSafari用 */
		font-size: clamp(1.4rem, 1.5vw, 1.8rem);
		margin: 0 0 4em;
	}
}

.block.about .btn_scroll {
	margin: 0 auto;
	overflow-x: scroll;
	position: relative;
	width: 90%;
	max-width: 1300px;
}

.block.about .btn_scroll.allview {
	overflow: inherit;
}

@media print, screen and (min-width: 560px) {
	.block.about .btn_scroll {
		margin: 0 auto 1em;
		overflow: inherit;
	}
}

.block.about .sp_click {
	cursor: pointer;
	height: 100%;
	left: 50%;
	pointer-events: none;
	position: absolute;
	top: 0;
	translate: -50% 0;
	width: 100%;
	z-index: 10;
}

.block.about .btn_scroll.allview .sp_click {
	pointer-events: inherit;
}

@media print, screen and (min-width: 560px) {
	.block.about .btn_scroll .sp_click {
		pointer-events: none;
	}
}

.block.about .btn_wrap {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	max-height: 640px;
	transition: all var(--cubic) .3s;
	width: 100%;
	min-width: 900px;
}

.block.about .allview .btn_wrap {
	max-height: inherit;
	min-width: inherit;
}

@media print, screen and (min-width: 560px) {
	.block.about .btn_wrap {
		max-height: inherit;
		min-width: inherit;
	}
}

.block.about .btn_wrap_inner {
	aspect-ratio: 2000 / 1250;
	height: 500px;
	margin: 70px 50px;
	position: relative;
	transition: all var(--cubic) .3s;
	width: 800px;
}

.block.about .allview .btn_wrap_inner {
	height: auto;
	margin: 10vw 0;
	pointer-events: none;
	transform-origin: bottom center;
	width: 85vw;
}

@media print, screen and (min-width: 560px) {
	.block.about .btn_wrap_inner {
		height: auto;
		margin: 0;
		width: 100%;
	}
}

.block.about .img {
	position: relative;
	z-index: 1;
}

.block.about .border {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

/* 真ん中 */
.block.about .btnc {
	aspect-ratio: 1 / .7;
	left: 50%;
	position: absolute;
	top: 51%;
	translate: -50% -50%;
	width: 41.5%;
	z-index: 7;
}

.block.about .btnc .basec {
	width: 100%;
}

.block.about .btnc .img {
	left: 50%;
	position: absolute;
	top: 34%;
	translate: -50% -50%;
	width: 80%;
	z-index: 4;
}

/* 周り */
.block.about .btnp {
	aspect-ratio: 1 / .7;
	position: absolute;
	width: 20.5%;
}

.block.about .btnp:hover {
	z-index: 10 !important;
}

.block.about .btnp .img {
	left: 50%;
	position: absolute;
	top: 28%;
	translate: -50% -50%;
	transition: all var(--cubic) .2s;
	width: 70%;
	z-index: 4;
}

.block.about .btnp:hover .img {
	top: 37%;
}

.block.about .btnp.btnp01 {
	left: 50%;
	top: 0;
	translate: -50% 0;
	z-index: 3;
}

.block.about .btnp.btnp02,
.block.about .btnp.btnp12 {
	left: 63.5%;
	top: 13%;
	translate: -50% 0;
	z-index: 4;
}

.block.about .btnp.btnp12 {
	left: 36.5%;
}

.block.about .btnp.btnp03,
.block.about .btnp.btnp11 {
	left: 76.5%;
	top: 25.5%;
	translate: -50% 0;
	z-index: 5;
}

.block.about .btnp.btnp11 {
	left: 23.5%;
}

.block.about .btnp.btnp04,
.block.about .btnp.btnp10 {
	top: 50%;
	translate: 0 -50%;
	z-index: 6;
}

.block.about .btnp.btnp04 {
	right: 0;
}

.block.about .btn10 {
	left: 0;
}

.block.about .btnp.btnp05,
.block.about .btnp.btnp09 {
	bottom: 25%;
	left: 77%;
	translate: -50% 0;
	z-index: 7;
}

.block.about .btnp.btnp09 {
	left: 22.5%;
}

.block.about .btnp.btnp06,
.block.about .btnp.btnp08 {
	bottom: 12.5%;
	left: 63.5%;
	translate: -50% 0;
	z-index: 8;
}

.block.about .btnp.btnp08 {
	left: 36.5%;
}

.block.about .btnp.btnp07 {
	bottom: 0;
	left: 50%;
	translate: -50% 0;
	z-index: 9;
}

.block.about .btnp .base01,
.block.about .btnp .base02,
.block.about .btnp .bases {
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.block.about .btnp .base01 {
	transition: all var(--cubic) .2s;
	z-index: 3;
}

.block.about .btnp .base02 {
	z-index: 2;
}

.block.about .btnp .bases {
	display: none;
	z-index: 1;
}

.block.about .btnp:hover .base01 {
	opacity: 0;
	top: 10%;
}

/* 吹き出し */
.block.about .btnp .balloon {
	align-items: center;
	background: #ccc;
	border-radius: 10px;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	display: flex;
	height: calc(2em * 1.6 + 1em);
	justify-content: center;
	position: absolute;
	left: 50%;
	opacity: 0;
	padding: .2em 0 .3em;
	pointer-events: none;
	scale: .9;
	text-align: center;
	top: -10%;
	translate: -50% 0;
	transition: all var(--cubic) .3s;
	width: 11em;
	z-index: 5;
}

@media print, screen and (min-width: 960px) {
	.block.about .btnp .balloon {
		scale: 1;
	}
}

.block.about .btnp:hover .balloon {
	opacity: 1;
	top: -60%;
}

@media print, screen and (min-width: 560px) {
	.block.about .btnp:hover .balloon {
		top: -75%;
	}
}

.block.about .btnp .balloon:before {
	bottom: -14px;
	clip-path: polygon(0 0, 50% 100%, 100% 0);
	content: '';
	height: 15px;
	left: 50%;
	position: absolute;
	translate: -50% 0;
	width: 20px;
	z-index: -1;
}

/* 新車色 */
.block.about .btnp:nth-of-type(2) .balloon,
.block.about .btnp:nth-of-type(2) .balloon:before {
	background: #f8aa2e;
}

/* 中古車色 */
.block.about .btnp:nth-of-type(n+3) .balloon,
.block.about .btnp:nth-of-type(n+3) .balloon:before {
	background: #56e3bb;
}

/* オーダー色 */
.block.about .btnp:nth-of-type(n+9) .balloon,
.block.about .btnp:nth-of-type(n+9) .balloon:before {
	background: #246bd7;
}

/* 新車色 */
.block.about .btnp:nth-of-type(n+11) .balloon,
.block.about .btnp:nth-of-type(n+11) .balloon:before {
	background: #f8aa2e;
}

/* 吹き出し位置調整 */
.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)) .balloon {
	bottom: -40%;
	top: inherit;
}

.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)):hover .balloon {
	bottom: -60%;
	top: inherit;
}

.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)) .balloon:before {
	bottom: inherit;
	top: -14px;
}

/* 右側(中央以外) */
.block.about .btnp.btnp02 .balloon,
.block.about .btnp.btnp03 .balloon,
.block.about .btnp.btnp05 .balloon,
.block.about .btnp.btnp06 .balloon {
	left: 70%;
}

.block.about .btnp.btnp02 .balloon:before,
.block.about .btnp.btnp03 .balloon:before,
.block.about .btnp.btnp05 .balloon:before,
.block.about .btnp.btnp06 .balloon:before {
	left: 36.5%;
}

.block.about .btnp.btnp02 .balloon:before {
	clip-path: polygon(25% 0, 15% 100%, 100% 0);
}

.block.about .btnp.btnp03 .balloon:before {
	clip-path: polygon(25% 0, 0 100%, 100% 0);
}

.block.about .btnp.btnp05 .balloon:before {
	clip-path: polygon(0 0, 25% 100%, 100% 100%);
}

.block.about .btnp.btnp06 .balloon:before {
	clip-path: polygon(15% 0, 25% 100%, 100% 100%);
}

/* 左側(中央以外) */
.block.about .btnp.btnp08 .balloon,
.block.about .btnp.btnp09 .balloon,
.block.about .btnp.btnp11 .balloon,
.block.about .btnp.btnp12 .balloon {
	left: 25%;
}

.block.about .btnp.btnp08 .balloon:before,
.block.about .btnp.btnp09 .balloon:before,
.block.about .btnp.btnp11 .balloon:before,
.block.about .btnp.btnp12 .balloon:before {
	left: 63.5%;
}

.block.about .btnp.btnp08 .balloon:before {
	clip-path: polygon(85% 0, 0 100%, 75% 100%);
}

.block.about .btnp.btnp09 .balloon:before {
	clip-path: polygon(100% 0, 0 100%, 75% 100%);
}

.block.about .btnp.btnp11 .balloon:before {
	clip-path: polygon(75% 0, 0 0, 100% 100%);
}

.block.about .btnp.btnp12 .balloon:before {
	clip-path: polygon(75% 0, 0 0, 85% 100%);
}

/* 右側中央 */
.block.about .btnp.btnp04 .balloon {
	left: 65%;
}

.block.about .btnp.btnp04 .balloon:before {
	clip-path: polygon(25% 0, 15% 100%, 100% 0);
	left: 63.5%;
}

/* 下中央 */
.block.about .btnp.btnp07 .balloon:before {
	clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

/* 左側中央 */
.block.about .btnp.btnp10 .balloon {
	left: 25%;
}

.block.about .btnp.btnp10 .balloon:before {
	clip-path: polygon(75% 0, 0 0, 85% 100%);
	left: 50%;
}

@media print, screen and (min-width: 560px) {
	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)) .balloon {
		bottom: -50%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)):hover .balloon {
		bottom: -75%;
	}
}

@media print, screen and (min-width: 768px) {
	.block.about .btnp:hover .balloon {
		top: -60%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)) .balloon {
		bottom: -40%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)):hover .balloon {
		bottom: -60%;
	}
}

@media print, screen and (min-width: 960px) {
	.block.about .btnp:hover .balloon {
		top: -50%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)) .balloon {
		bottom: -35%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)):hover .balloon {
		bottom: -55%;
	}
}

@media print, screen and (min-width: 1100px) {
	.block.about .btnp:hover .balloon {
		top: -40%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)) .balloon {
		bottom: -25%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)):hover .balloon {
		bottom: -45%;
	}
}

@media print, screen and (min-width: 1300px) {
	.block.about .btnp:hover .balloon {
		top: -35%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)) .balloon {
		bottom: -15%;
	}

	.block.about .btnp:nth-of-type(n+6):not(:nth-of-type(n+11)):hover .balloon {
		bottom: -35%;
	}
}

.block.about .scaling_btn {
	display: none;
}

.block.about .scaling_btn.on {
	display: block;
	margin-bottom: 1em;
}

.block.about .scaling_btn.small_btn span {
	width: 10em;
}

.block.about .scaling_btn.small_btn span:after {
	display: none;
}

/* アニメーション*/
.block.about .read {
	opacity: 0;
	transition: all .5s ease-in-out;
}

.block.about .read.inview {
	opacity: 1;
}

.block.about .btna {
	height: 100%;
	opacity: 0;
	scale: 1.1;
	translate: 0 -50%;
	transition: all var(--cubic) .4s;
	width: 100%;
}

.block.about .inview .btna {
	opacity: 1;
	translate: 0 0;
	scale: 1;
}

.block.about .scroll_wrap {
	bottom: 0;
	overflow: hidden;
	width: 100%;
}

.block.about .text {
	animation: marquee 30s linear infinite;
	aspect-ratio: 4000 / 210;
	width: 150%;
}

@media print, screen and (min-width: 560px) {
	.block.about .text {
		width: 140%;
	}
}

@keyframes marquee {
	0%   { translate: 100% 0; }
	100% { translate: -100% 0; }
}



/*===============================================
 DX
===============================================*/
.block.dx {
	background: url(../images/about/about_back.png) #ecf2fd center top no-repeat;
	background-blend-mode: multiply;
	background-size: auto 100%;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .3));
	padding: 7em 0 .1em;
	z-index: 2;
}

.block.dx:before {
	background: #e3ecfd;
}

.block.dx .title-h2 span.sub {
	margin: 1em 0 0;
}

.block.dx .dx_wrap {
	margin: 0 auto 6em;
	width: 100%;
}

@media print, screen and (min-width: 560px) {
	.block.dx .dx_wrap {
		margin: 1em auto 6em;
	}
}

@media print, screen and (min-width: 768px) {
	.block.dx .dx_wrap {
		margin: 1em auto 5em;
		width: 90%;
	}

	.block.dx .dx_wrap:nth-of-type(2) {
		padding: 0 5em 0 0;
	}

	.block.dx .dx_wrap:last-child {
		margin: 1em auto 8em;
	}
}

@media print, screen and (min-width: 1100px) {
	.block.dx .dx_wrap {
		margin: 0 auto 6em;
		width: 80%;
	}

	.block.dx .dx_wrap:last-child {
		margin: 0 auto 8em;
	}
}

@media print, screen and (min-width: 1300px) {
	.block.dx .dx_wrap {
		margin: 0 auto 6em;
	}
}

.block.dx .dx_wrap_inner {
	padding: 2em 0;
	position: relative;
	width: 100%;
}

.block.dx .dx_wrap:nth-of-type(2) .dx_wrap_inner {
	flex-direction: row-reverse;
}

.block.dx .dx_wrap_inner:before {
	background: linear-gradient(90deg, rgba(36, 107, 215, 1), 10%, rgba(36, 107, 215, 0)) border-box;
	border: 5px solid transparent;
	border-radius: 20px;
	content: '';
	position: absolute;
	inset: 0;
	mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
	mask-clip: padding-box, border-box;
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.block.dx .dx_wrap:nth-of-type(2) .dx_wrap_inner:before {
	background: linear-gradient(-90deg, rgba(36, 107, 215, 1), 10%, rgba(36, 107, 215, 0)) border-box;
}

@media print, screen and (min-width: 560px) {
	.block.dx .dx_wrap_inner:before {
		border: 7px solid transparent;
	}
}

.block.dx .text {
	position: relative;
	width: 100%;
	z-index: 1;
}

@media print, screen and (min-width: 560px) {
	.block.dx .text {
		width: 55%;
	}
}

.block.dx .text .title {
	font-size: max(1.8rem, min(1.9vw, 2.5rem));	/* 古いSafari用 */
	font-size: clamp(1.8rem, 1.9vw, 2.5rem);
	font-weight: bold;
	margin: 0 0 .6em;
}

.block.dx .dx_wrap:nth-of-type(2) .text .title {
	text-align: right;
}

.block.dx .text .title > span:not([class]) {
	padding: 0 0 0 1em;
}

.block.dx .dx_wrap:nth-of-type(2) .text .title > span:not([class]) {
	padding: 0 1em 0 0;
}

.block.dx .text .title .emphasis {
	background: #246bd7;
	color: #fff;
	display: block;
	margin: .2em 0 0 0;
	padding: 0 .3em 0 1em;
	width: fit-content;
}

.block.dx .dx_wrap:nth-of-type(2) .text .title .emphasis {
	margin: 0 0 .2em auto;
	padding: 0 1em 0 .3em;
}

.block.dx .text .title .emphasis .big {
	font-size: 1.2em;
}

.block.dx .list_ul {
	padding: 0 2em;
}

@media print, screen and (min-width: 768px) {
	.block.dx .list_ul {
		font-size: max(1.2rem, min(1.2vw, 1.6rem));	/* 古いSafari用 */
		font-size: clamp(1.2rem, 1.2vw, 1.6rem);
	}
}

.block.dx .list_ul li:before {
	background: #000;
}

.block.dx .img {
	position: absolute;
	top: -5em;
	width: 48%;
}

.block.dx .dx_wrap:not(:nth-of-type(2)) .img {
	right: -3em;
}

.block.dx .dx_wrap:nth-of-type(2) .img {
	left: -3em;
}

@media print, screen and (min-width: 560px) and (max-width: 767.9px) {
	.block.dx .img {
		top: -4em;
	}
}

@media print, screen and (min-width: 768px) {
	.block.dx .dx_wrap:not(:nth-of-type(2)) .img {
		right: -5em;
	}

	.block.dx .dx_wrap:nth-of-type(2) .img {
		left: -5em;
	}
}

@media print, screen and (min-width: 1300px) {
	.block.dx .img {
		width: 42%;
	}
}

/* アニメーション*/
.block.dx .dx_wrap {
	opacity: 0;
	transition: all var(--cubic) .4s;
}

.block.dx .dx_wrap:not(:nth-of-type(2)) {
	translate: 20% 0;
}

.block.dx .dx_wrap:nth-of-type(2) {
	translate: -20% 0;
}

.block.dx .dx_wrap.inview:not(:nth-of-type(2)),
.block.dx .dx_wrap.inview:nth-of-type(2) {
	opacity: 1;
	translate: 0 0;
}



/*===============================================
 締め
===============================================*/
.block.last {
	background-image: url(../images/about/last_back.png),
		linear-gradient(90deg, #f8aa2e, #fac530);
	background-blend-mode: luminosity;
	background-position: center top, center;
	background-repeat: no-repeat;
	background-size: cover, auto;
	padding: 7em 0;
	z-index: 1;
}

.block.last .innovation {
	background: #fff;
	border: 4px solid #4d4d4d;
	border-radius: 20px;
	margin: -1em auto 0;
	padding: 1.5em 2em;
	position: relative;
	width: 85%;
}

@media print, screen and (min-width: 560px) {
	.block.last .innovation {
		padding: 2em 3em;
		width: 80%;
	}
}

@media print, screen and (min-width: 768px) {
	.block.last .innovation {
		width: 65%;
	}
}

.block.last .innovation p {
	background-color: #fff;
	background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fff 50%, #fff 100%),
						linear-gradient(180deg, #ccc 2px, transparent 2px);
	background-size: 8px 100%,
					100% 2em;
	line-height: 2em;
	font-size: max(1.4rem, min(1.9vw, 2.8rem));	/* 古いSafari用 */
	font-size: clamp(1.4rem, 1.9vw, 2.8rem);
	font-weight: bold;
	padding: 0 0 2px;
	position: relative;
	text-align: center;
	width: 100%;
}

.block.last .innovation p:before {
	background: #fff;
	content: '';
	display: block;
	height: 5px;
	position: absolute;
	top: -1px;
	width: 100%;
}

.block.last .innovation .img {
	bottom: -20px;
	height: 100%;
	max-height: 150px;
	position: absolute;
	width: auto;
}

@media print, screen and (min-width: 768px) {
	.block.last .innovation .img {
		max-height: 230px;
	}
}

.block.last .innovation .img01 {
	left: -5%;
}

.block.last .innovation .img02 {
	right: -5%;
}

/* アニメーション*/
.block.last .innovation {
	opacity: 0;
	scale: .5;
	transition: all var(--cubic) .4s;
}

.block.last .innovation.inview {
	opacity: 1;
	scale: 1;
}

.block.last .innovation .img {
	opacity: 0;
	transition: all var(--cubic) .4s;
}

.block.last .innovation .img01 {
	left: -15%;
}

.block.last .innovation .img02 {
	right: -15%;
}

.block.last .innovation .img.inview {
	opacity: 1;
}

.block.last .innovation .img01.inview {
	left: -12%;
}

.block.last .innovation .img02.inview {
	right: -12%;
}

@media print, screen and (min-width: 560px) {
	.block.last .innovation .img01.inview {
		left: -10%;
	}

	.block.last .innovation .img02.inview {
		right: -10%;
	}
}