@charset "utf-8";
@import url("../../assets/css/secondary.css");
@import url("../../assets/plugin/swiper/css/swiper-bundle.min.css");
@import url("../../assets/plugin/luminous/css/luminous-basic.min.css");
@import url("../../assets/css/bg_caption.css");
@import url("../../assets/css/ttl.css");
@import url("../../assets/css/sub_ttl.css");
@import url("../../assets/css/slide.css");
@import url("../../assets/css/slider.css");
@import url("../../assets/css/flex_cont.css");
@import url("../../assets/css/contact_info.css");
@import url("../../assets/css/line.css");
@import url("../../assets/css/move.css");
@import url("../../assets/css/popup.css");

.str_menu{
/*	background-color: var(--main-color3);  */
	background-color: white;
}
body {
	 overflow-y:scroll;
}
body.is-scrollLock { 
      position: fixed;
      left: 0;
      width: 100%;
}

article {
	overflow-x: hidden;
	overflow-y: clip
}

/*このページのみ*/
.ttl_box dt {
	font-size: 1.3em;
	font-weight: bold
}
.ttl_box dd {
	margin-top: 0.7em;
	font-size: 1em;
	line-height: 1.8
}
@media screen and (min-width: 480px) {
	.ttl_box dt {
		font-size: 1.4em
	}
}
@media screen and (min-width: 768px) {
	.ttl_box dd {
		font-size: 1.1em;
	}
}
@media screen and (min-width: 1024px) {
	.ttl_box dt {
		font-size: 1.6em
	}
}
@media screen and (min-width: 1400px) {
	.ttl_box dt {
		font-size: 1.8em
	}
	.ttl_box dd {
		font-size: 1.2em
	}
}

/*ボタン*/
.btn2_box {
	width: 100%;
	text-align: right
}
.btn2 {
	position: relative;
	font-size: 1em;
	padding-right: 1.7em;
    padding-bottom: 5px;
    color: #000;
    border-bottom: solid 1px #707070;
	display: inline-block;
	transition: all 0.5s ease;
}
.btn2::after{
	content: "→";
	position: absolute;
	right: 0;
}
.btn2:hover{
	opacity: 0.8;
	transform: translateY(-10px);
}
@media screen and (min-width: 1200px) {
	.btn2 {
		font-size: 1.15em;
	}
}

.number {
	position: absolute;
	display: flex;
	top: -0.5em;
	align-items: center;
	font-family: 'Arial';
	font-weight: bold;
	font-style: normal;
	font-size: 1.5em;
	color: #000
}
.slash::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-top: -0.2em;
	background: #DA2529;
	clip-path: polygon(80% 0, 100% 0%, 20% 100%, 0% 100%);
	mix-blend-mode: multiply
}
.slash.slash-red::before {
	background: #DA2529
}
.slash.slash-blue::before {
	background: #0457AA
}
@media screen and (min-width: 1024px) {
	.number {
		font-size: 2.5em;
	}
}
@media screen and (min-width: 1200px) {
	.number {
		font-size: 3.6em;
	}
}
.bg_image {
	position: relative;
	width: 85%;
	height: 8em;
	margin: auto 0 auto auto
}
.bg_image::after {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	right: 6%;
	content: "we are professionals!";
	font-family: 'Arial';
	color: #fff;
	letter-spacing: 0;
	font-size: 1.2em
}
@media screen and (min-width: 380px) {
	.bg_image {
		height: 10em;
	}
}
@media screen and (min-width: 480px) {
	.bg_image {
		height: 13em;
	}
	.bg_image::after {
		font-size: 2em
	}
}
@media screen and (min-width: 670px) {
	.bg_image {
		height: 18em;
	}
	.bg_image::after {
		font-size: 2.4em
	}
}
@media screen and (min-width: 768px) {
	.bg_image {
		height: 20em;
	}
	.bg_image::after {
		font-size: 2.8em
	}
}
@media screen and (min-width: 960px) {
	.bg_image {
		height: 22em;
	}
}
@media screen and (min-width: 1024px) {
	.bg_image {
		height: 28em;
	}
	.bg_image::after {
		font-size: 3.5em
	}
}
@media screen and (min-width: 1200px) {
	.bg_image {
		height: 31em;
	}
	.bg_image::after {
		font-size: 4em
	}
}
@media screen and (min-width: 1600px) {
	.bg_image {
		height: 34em;
	}
	.bg_image::after {
		font-size: 4.8em
	}
}
@media screen and (min-width: 1900px) {
	.bg_image {
		height: 40em
	}
	.bg_image::after {
		font-size: 5em
	}	
}
@media screen and (min-width: 2400px) {
	.bg_image {
		height: 43em
	}
	.bg_image::after {
		right: 14%
	}
} 
#strengths-bg_image.bg_image {
	margin-top: 2em;
	border-radius: 1em 0 0 1em;
	background: url("../images/bg_image.jpg") center bottom 22% / 100% no-repeat
}
@media screen and (min-width: 768px) {
	#strengths-bg_image.bg_image {
		margin-top: 3em
	}
}
@media screen and (min-width: 1024px) {
	#strengths-bg_image.bg_image {
		border-radius: 2em 0 0 2em;
	}
}
@media screen and (min-width: 1200px) {
	#strengths-bg_image.bg_image {
		margin-top: 5em
	}	
}


#first_sec {
	background-image: url("../images/page_ttl.jpg");
	background-position: center
}
main {
	margin-top: 0 !important
}
.page_ttl {
	text-shadow: 1px 1px 2px #696969;
}
.page_ttl p span {
	color: var(--accent-color)
}
.main_bg_color {
	position: relative
}
.main_bg_color::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: -2;
	background: linear-gradient(#c9c9c973,57% , #e1e1e100)
}

#advancement {
	padding-top: 1.5em;
	padding-bottom: 3em /*線の分*/
}
.advancement_box p:first-child {
	margin-top: 0;
	font-family: 'ZenOldMincho';
	line-height: inherit;
	font-size: 1em
}
.underline {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center
}
.underline::before {
	content: "";
	position: absolute;
	display: inline-block;
	width: 3em;
	height: 100%;
	background: url("../images/underline.svg") center / 100% no-repeat;
	top: 0.8em
}
.advancement_box {
	position: relative;
	width: 85%;
	max-width: 700px;
	margin: auto;
	text-align: center;
	padding: 1.3em 0 2em
}
.move-line::before {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 0.05em;
	background: #C4BBBB
}
.move-line::after {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	right: 0;
	width: 0.05em;
	background: #C4BBBB
}
.move-line .box_line::before {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	right: 0;
	height: 0.05em;
	background: #C4BBBB
}
.move-line .box_line::after {
	content: "";
	position: absolute;
	display: block;
	bottom: 0;
	left: 0;
	width: 0.05em;
	background: #C4BBBB
}
.advancement_box p {
	padding: 0 0.5em;
    margin-top: 0.8em;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.7
}
.advancement_box p span {
	font-weight: bold;
    font-size: 1.35em;
	line-height: 1.4
}
#advancement i.block {
	font-style: normal;
	display: inline-block
}
@media print, screen and (min-width: 480px) {
	.advancement_box {
		padding: 2.3em 0 4.1em
	}
	.advancement_box p {
		padding: 0
	}
	.advancement_box p:first-child {
		font-size: 1.5em
	}
	.underline::before {
		width: 3.7em
	}
	.advancement_box p {
		font-size: 1.1em;
		line-height: 1.8
	}
	.advancement_box p span {
	    font-size: 1.45em;
		line-height: inherit
	}
}
@media print, screen and (min-width: 768px) {
	#advancement {
		padding-top: 2em;
	}
	.advancement_box {
		padding: 2.5em 0 4.3em
	}
	.advancement_box p {
		font-size: 1.2em
	}
	.advancement_box p span {
		font-size: 1.5em
	}
}
@media print, screen and (min-width: 1024px) {
	#advancement {
		padding-top: 2em;
		padding-bottom: 4em
	}
}
@media print, screen and (min-width: 1200px) {
	#advancement {
		padding-top: 3em;
		padding-bottom: 4em
	}
}
@media screen and (min-width: 1600px) {
	#advancement {
		padding-top: 4em
		}
}

@media screen and (min-width: 1200px) {
	.advancement_box {
		max-width: 750px;
	}
	.advancement_box p {
		font-size: 1.4em;
	    line-height: 2
	}
	.advancement_box p span {
		font-size: 1.55em
	}
}
@media print { 
	.move-line::before, .move-line .box_line::before {
		width: 100%
	}
	.move-line::after, .move-line .box_line::after {
		height: 100%
	}
	.line::after {
		animation: none;
		opacity: 1;
		top: 1em
	}
}

#opening-sentence .bg_caption::before {
	content: "Strengths";
	color: #fff
}
#opening-sentence .gear01 {
	position: absolute;
	z-index: -1;
	top: -2.5em;
	left: 13.5em;
	width: 4em;
	height: 4em;
}
#opening-sentence .gear01 img {
	width: 100%;
	object-fit: cover
}
#opening-sentence {
	padding-top: 2.5em
}
#opening-sentence .bg_color {
	position: relative;
}
#opening-sentence .bg_color::before{
	content: "";
	position: absolute;
	z-index: -1;
	display: block;
	width: 120vw;
	height: 100%;
	background: #fff;
	top: 0;
	left: -80px
}

@media screen and (min-width: 380px) {
	#opening-sentence .gear01 {
		left: 16em;
	}
}
@media screen and (min-width: 420px) {
	#opening-sentence {
		padding-top: 3.5em
	}
	#opening-sentence .gear01 {
		top: -3.5em;
		left: 19.5em;
		width: 4.5em;
		height: 4.5em
	}
}
@media screen and (min-width: 480px) {
	#opening-sentence .gear01 {
		left: 22em;
		width: 5em;
		height: 5em
	}
}
@media screen and (min-width: 600px) {
	#opening-sentence .gear01 {
		top: -4em;
		left: 22.5em;
		width: 6em;
		height: 6em
	}
}
@media screen and (min-width: 670px) {
	#opening-sentence .gear01 {
		top: -5.5em;
		left: 31em;
		width: 8em;
		height: 8em
	}
	#opening-sentence {
		padding-top: 5em
	}
}
@media screen and (min-width: 840px) {
	#opening-sentence {
		padding-top: 7em
	}
	#opening-sentence .gear01 {
		top: -6em;
		left: 35.5em;
		width: 9em;
		height: 9em
	}
}
@media screen and (min-width: 960px) {
	#opening-sentence {
		padding-top: 8em
	}
	#opening-sentence .gear01 {
		top: -6.5em;
		left: 35em;
	}
}
@media screen and (min-width: 1024px) {
	#opening-sentence .gear01 {
		left: 35em;
		top: -6.5em;
	}
}
@media screen and (min-width: 1100px) {
	#opening-sentence .bg_color::before {
		left: -40px
	}
}
@media screen and (min-width: 1200px) {
	#opening-sentence .gear01 {
		top: -9em;
		left: 50em;
		width: 13em;
		height: 13em
	}
	#opening-sentence .bg_color::before {
		left: -60px
	}
}
@media screen and (min-width: 1600px) {
	#opening-sentence .gear01 {
		left: 54em
	}
	#opening-sentence .bg_color::before {
		left: -80px
	}	
}
@media print { 
	#opening-sentence .bg_color::before {
		left: -2em;
		width: 144vw
	}
}
#opening-sentence .sentence_txtbox {
	 padding: 2em 0; 
}
.sentence_txtbox p{
	font-size: 1em;
	line-height: 1.8;
	max-width: 45em
}
#opening-sentence .flex_box {
	display: flex;
	flex-direction: column;
	margin-top: 2em
}
#opening-sentence .flex_box li {
	position: relative;
	margin-top: 2em;
	width: 100%;
	max-width: 24em;
	transition: all .2s;
	cursor: pointer
}
#opening-sentence .flex_box li:hover {
	opacity: 0.8;
    transform: translateY(-8px)
}
#opening-sentence .flex_box li:first-of-type {
	margin-top: 0;
}
#opening-sentence .slash {
	left: 0.6em
}
#opening-sentence .flex_box a {
	padding: 1.2em 0.75em;
    border-radius: 1.2em;
	width: 100%;
}
#opening-sentence .flex_box .system a {
    background: linear-gradient(#DA2529, #AD0306)	
}
#opening-sentence .flex_box .technical a{
    background: linear-gradient(#086FB9, #0457AA)	
}

#opening-sentence .flex_box span {
	font-weight: bold;
	color: #fff;
	font-size: 1em
}
#opening-sentence .txt_box {
	display: flex;
	align-items: center;
}
#opening-sentence .txt_box::before {
	content: "";
	width: 1.6em;
	height: 2em;
	margin-right: 0.3em
}
#opening-sentence .system .txt_box::before {
	background: url("../images/opening-sentence01.svg") center / 100% no-repeat;
}
#opening-sentence .technical .txt_box::before {
	background: url("../images/opening-sentence02.svg") center / 100% no-repeat;
}
#opening-sentence .txt_box::after {
	content: "";
	width: 0.9em;
	height: 2em;
	margin: auto 0 auto auto;
	background: url("../images/opening-icon.svg") center / 100% no-repeat;
}

#opening-sentence .flex_box span i {
	display: block;
	font-family: 'Arial';
	color: #fff;
	letter-spacing: 0;
	line-height: inherit;
	font-weight: 300;
	font-style: normal;
	margin-top: 0.1em;
	font-size: 0.5em
}
_::-webkit-full-page-media, _:future, :root #opening-sentence .flex_box span i {
	font-size: 0.6em
}
#opening-sentence .number {
		font-size: 1.7em
}
@media print, screen and (min-width: 350px) { 
	#opening-sentence .txt_box::after {
		width: 1.4em;
		height: 3em;
	}
	#opening-sentence .flex_box span i {
		font-size: 0.7em
	}
}
@media print, screen and (min-width: 440px) {
	#opening-sentence .number {
		font-size: 1.7em
}
	#opening-sentence .flex_box span i {
		font-size: 0.8em
	}
#opening-sentence .flex_box a {
	padding: 1.2em 1.5em;
}
#opening-sentence .txt_box::after {
	content: "";
	width: 1.5em;
	height: 3.2em;
}
#opening-sentence .txt_box::before {
	width: 2em;
	height: 2em;
	margin-right: 1em
}
}
@media print, screen and (min-width: 520px) {

	#opening-sentence .number {
		font-size: 2.4em
}
#opening-sentence .flex_box a {
	padding: 1.6em 2em;
}
#opening-sentence .txt_box::after {
	content: "";
	width: 1.8em;
    height: 3.5em;
}
#opening-sentence .txt_box::before {
	width: 2.5em;
	height: 3em;
	margin-right: 1.5em
}
#opening-sentence .flex_box span {
	font-size: 1.2em
}
	#opening-sentence .flex_box span i,
	_::-webkit-full-page-media, _:future, :root #opening-sentence .flex_box span i {
	margin-top: 0.4em;
	font-size: 0.7em
}
}
@media print, screen and (min-width: 620px) {
	#opening-sentence .sentence_txtbox {
	}
	#opening-sentence .flex_box span i {
		margin-top: 0.3em;
		font-size: 0.65em
	}
	#opening-sentence .flex_box  {
		flex-direction: inherit;
	}
	#opening-sentence .flex_box li {
		width: 47%;
		margin-top: 0;
	}
	#opening-sentence .flex_box li:first-of-type {
		margin-top: 0;
		margin-right: 2em
	}
	#opening-sentence .number {
		font-size: 2.2em
	}
	#opening-sentence .flex_box span i,
	_::-webkit-full-page-media, _:future, :root #opening-sentence .flex_box span i {
		font-size: 0.5em;
		margin-top: 0.4em;
	}
	#opening-sentence .flex_box span {
		font-size: 1.1em
	}
	#opening-sentence .txt_box::before {
		width: 2.2em;
		height: 3em;
		margin-right: 0.5em;
		}
	#opening-sentence .flex_box a {
		padding: 1.3em 1em;
	}
	#opening-sentence .txt_box::after {
		width: 1.2em
	}
}
@media print, screen and (min-width: 768px) {
	#opening-sentence .sentence_txtbox {
		padding: 3em 0
	}
	#opening-sentence .number {
		font-size: 2.3em
	}
	#opening-sentence .flex_box {
		margin-top: 3em
	}
	#opening-sentence .flex_box span {
		font-size: 1.2em
	}
	#opening-sentence .txt_box::before {
		width: 2em;
		height: 3em;
		margin-right: 0.8em;
		}
	#opening-sentence .flex_box a {
		padding: 1.6em 1.1em
	}
	#opening-sentence .txt_box::after {
		width: 1.25em
	}
	.sentence_txtbox p{
	font-size: 1.15em;
	line-height: 2
}

}
@media print, screen and (min-width: 840px) {
	#opening-sentence .sentence_txtbox {
		/* padding: 3.5em 0 3.5em 3em; */
	}
	#opening-sentence .number {
		font-size: 2.6em
	}
	#opening-sentence .flex_box span {
		font-size: 1.3em
	}
	#opening-sentence .txt_box::before {
		width: 2.4em;
		height: 3.5em;
		}
	#opening-sentence .flex_box a {
		padding: 1.8em 1.3em
	}
	#opening-sentence .txt_box::after {
		width: 1.4em
	}
}
@media print, screen and (min-width: 960px) {
	#opening-sentence .sentence_txtbox {
	}
	#opening-sentence .number {
		font-size: 2.8em
	}
	#opening-sentence .flex_box span {
		font-size: 1.4em
	}
	#opening-sentence .flex_box li:first-of-type {
		margin-right: 2.5em
	}
	#opening-sentence .txt_box::before {
		width: 2.8em;
		height: 4.5em;
		margin-right: 1em
	}
	#opening-sentence .flex_box a {
		padding: 1.5em 1.3em
	}
	#opening-sentence .txt_box::after {
		width: 1.6em
	}
}
@media print, screen and (min-width: 1024px) {
	#opening-sentence .number {
		font-size: 3em
	}
	#opening-sentence .flex_box span i,
	_::-webkit-full-page-media, _:future, :root #opening-sentence .flex_box span i {
		margin-top: 0.6em
	}
	#opening-sentence .flex_box a {
		padding: 1.5em 1.7em
	}
	#opening-sentence .flex_box span {
		font-size: 1.4em
	}
	#opening-sentence .txt_box::before {
		width: 2.9em;
		margin-right: 1.1em
	}
	#opening-sentence .txt_box::after {
		width: 1.5em
	}
}
@media print, screen and (min-width: 1100px) {
	#opening-sentence .flex_box a {
		padding: 1.6em 1.8em
	}
	#opening-sentence .flex_box span {
		font-size: 1.5em
	}
	#opening-sentence .txt_box::before {
		width: 3em;
		margin-right: 1.2em
	}
	#opening-sentence .txt_box::after {
		width: 1.7em
	}
}
@media print, screen and (min-width: 1200px) {
	#opening-sentence .flex_box {
		margin-top: 4em
	}
	#opening-sentence .flex_box li:first-of-type {
		margin-right: 4em
	}
	#opening-sentence .sentence_txtbox {
		padding: 5em 0
	}
}
@media screen and (min-width: 1600px) {
	.sentence_txtbox p{
		font-size: 1.2em;
		max-width: 57em
	}
	#opening-sentence .number {
		font-size: 3.6em
	}
	#opening-sentence .flex_box {
		margin-top: 5em
	}
	#opening-sentence .flex_box li {
		max-width: 32em
	}
	#opening-sentence .flex_box span {
		font-size: 1.8em
	}
	#opening-sentence .flex_box span i,
	_::-webkit-full-page-media, _:future, :root #opening-sentence .flex_box span i {
		font-size: 0.75em
	}
	#opening-sentence .flex_box a {
		padding: 3em 2.6em
	}
	#opening-sentence .txt_box::before {
		width: 4em;
		margin-right: 2em
	}
	#opening-sentence .txt_box::after {
		width: 2.1em
	}
}
@media print { 
	#opening-sentence .flex_box {
		display: flex;
		flex-direction: row
	}
	#opening-sentence .flex_box span {
		font-size: 1.6em
	}
}
/*アニメーション*/
#opening-sentence .flex_box .fade-up {
	transition-delay: .6s
}
#opening-sentence .flex_box .fade-up.right {
	transition-delay: .8s
}
section .ttl h2::before {
	content: "#";
	font-size: 1.2em;
	font-family: 'Arial';
	letter-spacing: inherit;
	width: inherit;
	height: inherit;
	margin-right: 0.1em;
	margin-bottom: -0.3em
}
section .ttl h2 span {
	margin-right: 0.5em;
	font-size: 1.2em;
	font-family: 'Arial';
	letter-spacing: inherit;
	padding-bottom: 0;
	margin-bottom: -0.3em
}
@media print { 
	.bg_image {
		height: 16em
	}
	.bg_image::after {
		font-size: 2.4em
	}
}
/*上書き*/
#system .ttl::before {
	width: 2.5em;
	height: 4em;
	background: url("../images/system01.svg") center / 100% no-repeat
}
#system .ttl i {
	-webkit-text-stroke: 0.5px #AD0306;
	text-stroke: 0.5px #AD0306;
}
#system .ttl {
	color: #AD0306;
	padding-left: 3em
}
#system .ttl h2::before {
	color: #AD0306
}

@media screen and (min-width: 380px) {
	#system .ttl {
		padding-left: 4em
	}
	#system .ttl::before {
		width: 3em;
		height: 5em;
	}
}
@media print, screen and (min-width: 416px) {
	#system .ttl::before {
		width: 1.7em;
		height: 3em
	}
	#system .ttl {
		padding-left: 1.9em
	}
}
@media screen and (min-width: 800px) {
	#system .ttl i {
		-webkit-text-stroke: 1px #AD0306;
		text-stroke: 1px #AD0306
	}
}
#system {
	padding-top: 2em
}
#system .carousel_box {
	animation: scroll01 17s infinite linear
}
#system .carousel {
	margin-top: 3.5em
}
#system .slider01{
	background: url("../images/carousel01.jpg") center / 100% no-repeat
}
#system .slider02{
	background: url(../images/carousel02.jpg) center / 100% no-repeat
}
#system .slider03 {
	background: url(../images/carousel03.jpg) center / 100% no-repeat
}
#system .slider04 {
	background: url(../images/carousel04.jpg) center / 100% no-repeat
}
#system .slider05 {
	background: url("../images/carousel05.jpg") center / 100% no-repeat
}
@media screen and (min-width: 1024px) {
	#system .carousel_box {
		animation: scroll01 40s infinite linear
	}
}
@media screen and (min-width: 768px) {
	#system {
		padding-top: 3em
	}
}
@media screen and (min-width: 1200px) {
	#system {
		padding-top: 5em
	}
}
/*アニメーション*/
#system .carousel.fade-up {
	transition-delay: 1.2s;
	transform: translateY(50px)
}
#system.scroll-trigger.is-active .carousel.fade-up {
	transform: translateY(0)
}
.scroll-trigger.is-active #strengths-bg_image.fade-bg-cover::before {
	background: linear-gradient(to right, #7e7e7e, #212121)
}
@media screen and (max-width: 415px) {
	#system .ttl span div {
		transform: translateY(120px)
	}
	#system.is-active .ttl span div {
		transform: translateY(0)
	}
}
#flow .line {
	bottom: 1.1em;
	transform: scale(.2)
}
#flow .line::after {
	width: 0.35em;
	background: #fff
}
@media screen and (min-width: 480px) {
	#flow .line {
		bottom: 1.3em;
	}
}
@media screen and (min-width: 768px) {
	#flow .line {
		bottom: 1.5em;
	}
}
@media screen and (min-width: 1200px) {
	#flow .line {
		bottom: 1.8em;
	}
}

#flow .flow_inner {
	position: relative;
	padding: 1.5em  0 2em 1.5em;
}
#flow .flow_inner::before {
	content: "";
    position: absolute;
    z-index: -1;
    display: block;
    width: 200%;
    height: 100%;
    background: #fff;
    top: 0;
    left: 0
}
#flow .flow_ttl {
	text-align: center
}

#flow .flow_ttl span {
	position: relative;
	font-family: 'Arial';
	letter-spacing: inherit;
	font-size: 0.9em
}
#flow .flow_ttl span::before {
    position: absolute;
    content: "";
    background: url(../images/flow_icon.svg) center / 100% no-repeat;
    display: inline-block;
    width: 3em;
    height: 100%;
	top: 0.6em
}
#flow .flow_ttl h3 {
    margin-bottom: 1em;
    margin-top: 0.5em;
    font-size: 1em;
    font-weight: 500;
	line-height: 1.3
}
#flow {
	margin-top: 3em
}
#flow h3 {
	margin-bottom: 3em
}
#flow .flow_box .main-nav_box {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 1.5em;
}
#flow .flow_box .main-nav_box li {
	position: relative;
	display: flex;
	padding: 0 1em;
}
#flow .flow_box .main-nav_box li a:hover {
	opacity: 0.6
}
#flow .flow_box .main-nav_box li.assembly{
	margin-top: 0.8em;
}
#flow .flow_box .main-nav_box li.inspection {
	margin-top: 0.7em;
}
#flow .flow_box .main-nav_box li::after {
	content: "";
	position: absolute;
	display: block;
	top: 55%;
	left: 0;
	background: #c7c7c7;
	transform: rotate(90deg);
	height: 0.5em;
	width: 0.05em
}
#flow .flow_box .main-nav_box li:first-of-type::after {
	display: none
}
#flow .flow_box .main-nav_box li a{
	color: #979797;
	width: 100%;
	text-align: center;
	font-size: 0.75em;
	line-height: 0.8;
	font-weight: 500;
}
#flow .flow_box .main-nav_box li.is-active a {
	color: #DA2529;
	font-weight: 500
}
#flow .flow_box .main-nav_box li span {
	display: block;
	font-family: 'Arial';
	letter-spacing: inherit;
	font-size: 1em;
	font-weight: bold
}
#flow .flow_ttl_box {
	position: relative;
	display: none;
	opacity: 0;
}
#flow .flow_ttl_box.is-active {
	display: block;
}
#flow .flow_ttl_box::before {
	content: "";
	position: absolute;
	display: block;
	top: -0.6em;
	width: 3.5em;
	height: 4em;
}
#flow .flow_ttl_box.development::before {
	background: url("../images/strengths_01.svg") center / 100% no-repeat
}
#flow .flow_ttl_box.production::before {
	background: url("../images/strengths_02.svg") center / 100% no-repeat
}
#flow .flow_ttl_box.finishing::before {
	background: url("../images/strengths_03.svg") center / 100% no-repeat
}
#flow .flow_ttl_box.assembly::before {
	background: url("../images/strengths_04.svg") center / 100% no-repeat
}
#flow .flow_ttl_box.inspection::before {
	background: url("../images/strengths_05.svg") center / 100% no-repeat
}
#flow .flow_ttl_box::after {
    position: absolute;
    z-index: -1;
    top: -0.15em;
    right: -0.05em;
    font-size: 5em;
    font-family: 'Arial';
    color: #f1f1f1;
    line-height: 1;
    font-weight: 300;
}
#flow .flow_ttl_box.development::after {
	content: "01";
}
	#flow .flow_ttl_box.production::after {
	content: "02";
}
	#flow .flow_ttl_box.finishing::after {
	content: "03";
}
	#flow .flow_ttl_box.assembly::after {
	content: "04";
}
	#flow .flow_ttl_box.inspection::after {
	content: "05";
}
#flow .flow_ttl_box h4 {
	font-family: 'Arial';
    position: relative;
    letter-spacing: inherit;
    font-size: 1.4em;
    font-weight: 300;
    margin-left: 2.6em;
    margin-right: 0.6em;
    line-height: 1.1;
	white-space: nowrap
}
#flow .flow_ttl_box h4::after {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: -1;
	top: 1.3em;
    left: 0;
    width: 1.2em;
    height: 0.2em;
    border-radius: 21px;
    background: linear-gradient(to right, #EF5F5F, #BD272A);
}
#flow .flow_ttl_box h4 span {
	display: block;
	font-family: 'NotoSansJP';
	font-size: 0.5em;
	font-weight: 300
}
#flow .flow_ttl_box dd {
	font-size: 1em;
	margin-top: 1em;
	line-height: 1.4
}
#flow .flow_ttl_box dd .no-br {
	display: none
}
#flow .flex_box {
	margin-top: 1.5em
}
#flow .side-nav_box {
	width: 100%
}
#flow .slide_area {
	margin-top: 0.5em;
	position: relative;
	width: 100%
}
#flow .side-nav_box .side-nav {
	position: relative;
	display: none;
}


#flow .side-nav_box .side-nav.is-active {
	display: block
}
#flow .side-nav_box .side-nav li {
	position: relative;
	padding-left: 1em;
	margin-bottom: 0.2em
}
#flow .side-nav_box .side-nav li:last-of-type {
	margin-bottom: 0;
}
#flow .side-nav_box .side-nav li::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	transform: translate(0,-50%);
	display: block;
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: #979797
}
#flow .side-nav_box .side-nav li.is-active::before {
	background: #DA2529
}
#flow .side-nav_box .side-nav li.is-active {
	display: block
}
#flow .side-nav_box .side-nav li a {
	font-size: 0.9em;
	font-weight: 500;
	color: #979797
}
#flow .side-nav_box .side-nav li:hover a { 
	opacity: 0.6
}
#flow .side-nav_box .side-nav li:hover::before {
	opacity: 0.6
}
#flow .flow_box .main-nav_box li a span {
		margin-bottom: 0.3em
}
#flow .side-nav_box .side-nav li.is-active a {
	color: #DA2529
}
#flow .side-nav_box .side-nav li::after {
	content: "";
    position: absolute;
    left: 0.15em;
    top: -4%;
    transform: translate(0, -50%);
    width: 0.5em;
    height: 64%;
    background-size: 0.1em 0.7em;
    background-image: linear-gradient(to top, #979797 5px, transparent 5px);
    background-repeat: repeat-y;
    background-position: left bottom
}
#flow .side-nav_box .side-nav li:first-of-type:after {
	display: none;
}
@media print, screen and (min-width: 350px) {
	#flow .flow_ttl h3 {
		font-size: 1.1em
	}
	#flow .flow_ttl .no-br {
	display: none
	}
	#flow .flow_box .main-nav_box li {
		padding: 0 1.2em		
	}
}
@media print, screen and (min-width: 370px) {
	#flow .flow_ttl_box h4 {
		font-size: 1.6em
	}
}
@media print, screen and (min-width: 380px) {
	#flow .flow_box .main-nav_box li a{
	font-size: 0.95em
	}
#flow .flow_box .main-nav_box li span {
	font-size: 0.95em
	}

	#flow .flow_ttl_box h4::after{
		top: auto;
		bottom: 5%;
	}
}
@media print, screen and (min-width: 400px) {
#flow .flow_box .main-nav_box li::after {
	height: 0.7em
}
#flow .flow_box .main-nav_box li {
	padding: 0 1.2em;
}
}
@media print, screen and (min-width: 440px) {
	#flow .flow_box .main-nav_box li a{
	font-size: 1em
	}
	#flow .flow_box .main-nav_box li span {
	font-size: 0.85em
	}
	#flow .flow_box .main-nav_box li {
		padding: 0 1.4em;
	}
}

@media print, screen and (min-width: 480px) {
	#flow .flow_ttl span {
		font-size: 1.1em
	}
	#flow .side-nav_box .side-nav li{
		margin-bottom: 0.2em
	}
	#flow .side-nav_box .side-nav li a  {
		font-size: 1.05em
	}

	#flow .flow_ttl h3 {
		font-size: 1.25em;
		line-height: inherit
	}
	#flow .flow_ttl_box h4 {
    margin-left: 2.4em;
    font-size: 1.8em;
}
	#flow .flow_ttl_box::after {
		font-size: 6em
	}
	#flow .flow_box .main-nav_box{
		width: 90%;
		max-width: 450px;
	}
	#flow .flow_box .main-nav_box li {
		padding: 0 1.6em;
	}
	#flow .flow_box .main-nav_box li a span {
		margin-bottom: 0.1em;
		font-size: 0.8em;
	}
	#flow .flow_box .main-nav_box li::after {
	height: 1.1em;
	top: 40%;
}
}
@media print, screen and (min-width: 520px) {
	#flow .flow_box .main-nav_box li a{
	font-size: 1.1em
	}
	#flow .flow_box .main-nav_box li span {
	font-size: 0.8em
	}
}
@media print, screen and (min-width: 560px) {
	#flow .flow_box .main-nav_box li {
		padding: 0 1.8em;
	}
}
@media print, screen and (min-width: 620px) {
	#flow .flow_ttl_box {
		margin: auto
	}
	#flow .flex_box {
		/*width: 95%;	*/
		margin: 1.5em auto 0;
		display: flex;
		justify-content: space-between;
	}
	#flow .flow_ttl_box::after {
		display: none
	}
#flow .flow_inner {
	padding: 1.5em  0 1.5em 2em 
}
#flow .flow_ttl_box h4 {
    margin-left: 2.3em;
    font-size: 2em;
}
#flow .flow_ttl_box h4::after {
	bottom: 4%;
	height: 0.3em;
	}
	#flow .side-nav_box .side-nav {
		margin-top: 3.5em
	}
#flow .side-nav_box {
	width: 25%
}
#flow .slide_area {
	margin-top: 0;
	width: 75%
}
	#flow .side-nav_box .side-nav li:last-of-type {
	margin-bottom: 0
}
#flow .flow_box .main-nav_box li {
	padding: inherit;
	width: 100%;
}
#flow .flow_box .main-nav_box li span {
	font-size: 1.4em;
}
	#flow .flow_box .main-nav_box li::after {
		width: 0.08em;
	height: 1.3em;
	top: 35%;
}
#flow .flow_box .main-nav_box li.finishing {
	width: 217%
}
#flow .flow_box .main-nav_box li.assembly{
	margin-top: 0;
}
#flow .flow_box .main-nav_box li.inspection {
	width: 150%;
	margin-top: 0;
}
#flow .side-nav_box .side-nav li::after {
		left: 0.25em;
	}
#flow .flow_box .main-nav_box {
	width: 100%;
	max-width: inherit;
    margin: 0 auto 1.5em;
	justify-content: space-around;
	flex-wrap: nowrap;
}
	#flow .side-nav_box .side-nav li {
		display: block;
		padding-left: 1.2em;
	}
	#flow .side-nav_box .side-nav li a {
		font-size: 0.9em
	}
	#flow .side-nav_box .side-nav li::before {
			width: 0.6em;
	height: 0.6em;
	}
#flow .flow_ttl_box::before {
	top: -0.6em;
	width: 4em;
	height: 4.5em;
}

#flow .side-nav_box .side-nav::after {
    position: absolute;
    z-index: -1;
    top: -0.5em;
    right: inherit;
	left: 0.15em;
    font-size: 6em;
    font-family: 'Arial';
    color: #f1f1f1;
    line-height: 1;
    font-weight: 300;
}
#flow .side-nav_box .side-nav.development::after {
	content: "01";
}
	#flow .side-nav_box .side-nav.production::after {
	content: "02";
}
	#flow .side-nav_box .side-nav.finishing::after {
	content: "03";
}
	#flow .side-nav_box .side-nav.assembly::after {
	content: "04";
}
	#flow .side-nav_box .side-nav.inspection::after {
	content: "05";
}

}
@media print, screen and (min-width: 680px) {
	#flow .side-nav_box .side-nav li a {
		font-size: 1em
	}
	#flow .side-nav_box .side-nav::after {
		left: 0.2em
	}
	#flow .flex_box {
		/* width: 90%; */
	}


}

@media print, screen and (min-width: 768px) {
	#flow .flow_inner { 
		padding: 2em 0 2em 3em 
	}
	#flow .flow_box .main-nav_box li {
	align-items: center;
	}
	#flow .flow_box .main-nav_box li a span {
		margin-bottom: 0
	}
	#flow .flow_box .main-nav_box li a {
		font-size: 1.1em;
		line-height: 1;
	}
	#flow .flow_box .main-nav_box li a .no-br {
		display: none
	}
	#flow .flow_box .main-nav_box li::after {
		width: 0.09em;
	}
	#flow .flow_ttl_box h4::after {
		bottom: 4%;
		width: 1.3em
	}
}
@media print, screen and (min-width: 860px) {
	#flow .flow_box .main-nav_box {
		width: 90%;
	}
	#flow .flow_ttl_box.is-active {
		display: flex;
		align-items: center;
	}

}

@media print, screen and (min-width: 920px) {
#flow .side-nav_box {
	width: 23%
}
#flow .slide_area {
	width: 77%
}
	#flow .side-nav_box .side-nav {
		margin-top: 5em;
	}
	#flow .side-nav_box .side-nav::before {
		left: 0.3em
	}
	#flow .side-nav_box .side-nav::after {
		left: 0.2em;
		top: -0.6em;
		font-size: 7em;
	}
#flow .side-nav_box .side-nav li {
	padding-left: 1.5em;
	margin-bottom: 0.9em
}
#flow .side-nav_box .side-nav li a {
	font-size: 1.1em
	}
	#flow .flow_box .main-nav_box li a{
	font-size: 1.1em
	}
#flow .flow_ttl h3 {
    margin-bottom: 2em;
}
#flow .flow_ttl span {
	font-size: 1.2em
}
#flow .flow_ttl_box::before {
	width: 4em;
	height: 5em;
}
#flow .flow_ttl_box h4 {
    font-size: 2.1em;
    line-height: 1.2;
}

}
@media print, screen and (min-width: 1024px) {
	#flow {
	margin-top: 6em
	}

#flow .side-nav_box {
	width: 25%
}
#flow .slide_area {
	width: 75%
}
	#flow .flow_inner {
	padding: 2em 0 2em 3.5em 
	}
#flow .flow_ttl span {
	font-size: 1.35em
}
#flow .flow_ttl h3 {
    margin-bottom: 1.4em;
    margin-top: 0.7em;
    font-size: 1.3em;
}
	#flow .flow_box .main-nav_box li::after {
		width: 0.1em
	}
	
#flow .side-nav_box .side-nav li {
	margin-bottom: 0.8em
}
	
#flow .flow_box .main-nav_box {
    width: 80%;
    margin: 0 auto 2em;
}
#flow .side-nav_box .side-nav li {
	padding-left: 1.5em;
}
#flow .side-nav_box .side-nav li::before {
	width: 0.7em;
	height: 0.7em;
}
	
#flow .flow_ttl_box::before {
	width: 4.5em;
	height: 5em;
}
#flow .flow_ttl_box h4 {
    font-size: 2.2em;
}
}
@media screen and (min-width: 1100px) {
#flow .side-nav_box .side-nav li a {
	font-size: 1.1em
}
#flow .side-nav_box .side-nav li {
	padding-left: 1.3em;
}
}

@media screen and (min-width: 1200px) {
	#flow .flow_inner {
		padding: 2.5em 0 2.5em 3.5em 
	}
	#flow .flow_ttl_box dd .no-br {
	display: block
	}
	#flow .flow_ttl_box::before {
	width: 5em;
	height: 6em;
	}
#flow .flow_ttl_box dd {
	font-size: 1.1em
	}
#flow .flow_ttl_box h4 {
	margin-right: 0.8em;
    font-size: 2.4em
	}
}
@media screen and (min-width: 1400px) {
#flow .flow_ttl span {
	font-size: 1.4em
}
#flow .flow_ttl h3 {
    font-size: 1.4em;
}
#flow .flow_box .main-nav_box li a{
	font-size: 1.1em
	}
#flow .flow_box .main-nav_box li span {
	font-size: 1.5em
	}
	#flow .flow_box .main-nav_box li::after {
	height: 2em;
	top: 20%;
}
	#flow .side-nav_box .side-nav {
		margin-top: 6em
	}
	#flow .side-nav_box .side-nav::after {
		left: 0.05em;
	}
	#flow .side-nav_box .side-nav::after {
		top: -0.6em;
		font-size: 8em;
	}
}
@media screen and (min-width: 1500px) {
	#flow .flow_inner {
		padding: 2.5em 0 2.5em 4.5em 
	}
}
@media screen and (min-width: 1600px) {
	#flow .flow_ttl span {
		font-size: 1.2em;
	}
	#flow .flow_ttl h3 {
		font-size: 1.5em;
		margin-top: 0.4em;
	}
	#flow .flow_ttl_box h4 {
		font-size: 2.8em;
	    margin-left: 2.4em
	}
	#flow .flow_ttl_box dd {
	margin-top: 0.2em;
		font-size: 1.4em
	}
	#flow .flow_box .main-nav_box {
		margin: 0 auto 2em;
	}
	#flow .flow_box .main-nav_box li a {
		font-size: 1.4em;
	}
	#flow .flow_box .main-nav_box li span {
		font-size: 1.6em
	}
	#flow .side-nav_box .side-nav li a {
		font-size: 1.4em;
	}
	#flow .side-nav_box .side-nav li {
		padding-left: 2em;
		margin-bottom: 1em;
	}
	#flow .flow_ttl_box::before {
		width: 5.5em;
		height: 6.5em
	}
#flow .flow_ttl_box h4::after {
    bottom: 5%;
    width: 1em;
    height: 10px;
	}
	#flow .side-nav_box .side-nav::after {
		font-size: 9em
	}
}
@media print {
	#flow {
		margin-top: 4em
	}
	.contact-sentence {
		margin-top: 4em
	}
}

#flow .slide_area_caption {
	margin: 0 auto 0.5em 0;
	font-size: 0.65em;
	line-height: 1.2;
	color: #5b5b5b;
	font-weight: 300;
}
#flow .slide_area_caption span {
	display: inline-block
}
#flow .slide_area .slide_cnt {
	display: none
}
#flow .slide_area .slide_cnt.is-active {
	display: block
}
#flow .slide_area .slide_cnt_inner {
	position: relative;
	overflow: hidden;
	height: 9em;
}
#flow .slide_area .slide_cnt h5 {
position: absolute;
	z-index: 1;
    color: #fff;
    font-size: 1em;
    font-weight: 500;
	margin-top: 1em;
	margin-left: 1em;
	line-height: 1.3
}
#flow .slide_area .slide_cnt h5 span {
	margin-bottom: 0.5em;
	position: relative;
	z-index: 1;
	display: block;
	font-family: 'Arial';
	letter-spacing: inherit;
	font-size: 0.8em;
	/* margin-bottom: 0.2em; */
}
#flow .slide_area .slide_cnt h5 span::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 1.1em;
    left: 0;
    width: 2em;
    height: 0.2em;
    border-radius: 21px;
    background: linear-gradient(to left, #ef5f5f1c, #BD272A);
    z-index: -1;
}
#flow .slide_area .slide_cnt figure {
	position: relative;
	width: 100%;
}
#flow .slide_area .slide_cnt figure::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: inline-block;
	opacity: 0.2;
	width: 100%;
	height: 100%;
	background: #000
}
#flow .slide_area .slide_cnt p.txt {
	margin-top: 1em;
    font-size: 1em;
    line-height: 1.5;
}
#flow .slide_area .slide_cnt img {
	width: 100%
}
#flow .slide_cnt_inner::before {
	content: "Scroll";
	position: absolute;
	z-index: 1;
	font-family: 'Arial';
	letter-spacing: inherit;
	font-size: 0.6em;
	transform: translate(-50%,-50%);
	bottom: 7%;
	left: 50%;
	color: #fff
}
#flow .flow_ttl_box.is-active {
	animation: fade-up .6s;
	animation-fill-mode: forwards
}
@keyframes fade-up {
	0% {
		opacity: 0;
		transform: translateY(20px)
	}
	100% {
		opacity: 1;
		transform: translateY(0)
	}
}
#flow .side-nav_box .side-nav.is-active,
#flow .slide_area .slide_cnt.is-active .slide_cnt_inner,
#flow .slide_area .slide_cnt.is-active .slide_area_caption,
#flow .slide_area .slide_cnt.is-active p.txt {
	animation: fade-in 1s;
	animation-fill-mode: forwards
}
@keyframes fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flow-pathmove-sp {
	0%{
		height:0;
		bottom: 3%;
		opacity: 0;
	}
	30%{
		height:0.5em;
		opacity: 1;
	}
	100%{
		height:0;
		bottom: 0;
		opacity: 0;
	}

}
@media print, screen and (min-width: 360px) {
	#flow .slide_area .slide_cnt_inner {
		height: 10em
	}

}
@media print, screen and (min-width: 400px) { 
	#flow .slide_area .slide_cnt h5 {
		font-size: 1.1em;
	}
	#flow .slide_area .slide_cnt_inner {
		height: 10em
	}
#flow .slide_cnt_inner::before {
	font-size: 0.7em;
}
}
@media print, screen and (min-width: 440px) {
	#flow .slide_area .slide_cnt_inner {
		height: 12em
	}
}

@media print, screen and (min-width: 480px) {
#flow .slide_cnt_inner::before {
	font-size: 0.8em
}

	#flow .slide_area .slide_cnt_inner {
		height: 13em
	}

}
@media print, screen and (min-width: 560px) {
	#flow .slide_area .slide_cnt_inner {
		height: 14em
	}
	#flow .slide_area .slide_cnt h5 {
		margin-top: 2em;
		margin-left: 2em;
		font-size: 1.2em;
	}
}
@media print, screen and (min-width: 590px) {
	#flow .slide_area .slide_cnt_inner {
		height: 15em
	}
}
@media print, screen and (min-width: 620px) {
	#flow .slide_area .slide_cnt_inner {
		height: 16em
	}
	#flow .slide_area_caption {
    font-size: 0.75em;
}
	#flow .slide_cnt_inner::before {
		bottom: 7%
	}
}
@media print, screen and (min-width: 620px) {
	#flow .slide_area .slide_cnt_inner {
		height: 14em
	}
}
@media print, screen and (min-width: 760px) {
	#flow .slide_area .slide_cnt_inner {
		height: 15em
	}
}
@media print, screen and (min-width: 860px) {
	#flow .slide_area .slide_cnt_inner {
		height: 16em
	}
}
@media print, screen and (min-width: 920px) {
#flow .slide_area .slide_cnt_inner {
	height: 19em;
}
#flow .slide_area .slide_cnt h5 {
    font-size: 1.5em;
	margin-top: 2.5em;
    margin-left: 2.5em;
}
#flow .slide_area .slide_cnt h5 span {
	font-size: 0.8em;
}
		#flow .slide_area_caption {
    font-size: 0.85em;
}
}
@media screen and (min-width: 1100px) {
#flow .slide_area .slide_cnt_inner {
	height: 21em;
}
#flow .slide_area .slide_cnt h5 {
    font-size: 1.6em;
	margin-top: 2em;
    margin-left: 2em;
}
	#flow .slide_area .slide_cnt h5 span {
	font-size: 0.7em
	}
	#flow .side-nav_box {
		width: 22%
	}
	#flow .slide_area {
		width: 78%
	}
}
@media screen and (min-width: 1400px) {
#flow .slide_area .slide_cnt_inner {
	height: 22em;
}
#flow .slide_area .slide_cnt h5 {
    font-size: 1.8em;
}
	#flow .side-nav_box {
		width: 20%;
	}
	#flow .slide_area {
		width: 78%;
	}
}
@media screen and (min-width: 1600px) {
#flow .slide_area .slide_cnt_inner {
	height: 28em;
}
#flow .slide_area .slide_cnt h5 {
    font-size: 2.2em;
    margin-top: 2em;
    margin-left: 2em;
    line-height: 1.3;
}
	#flow .slide_area .slide_cnt h5 span {
	font-size: 0.7em;
	}
	#flow .slide_area .slide_cnt p.txt {
	    margin-top: 1em;
	    font-size: 1.15em;
		line-height: 1.6
	}
#flow .slide_cnt_inner::before {
	font-size: 1em;
	bottom: 6%;
}
}
.contact-sentence::after {
	background: url("../images/flow06.svg") top / 100% no-repeat;
}
/*アニメーション*/
#flow .flow_box.fade-up {
	transition-delay: .6s
}
.contact-sentence .fade-up {
	transition-delay: .4s
}

/*上書き*/
#technical .ttl {
	padding-left: 2.5em
}
#technical .ttl::before {
    width: 2.2em;
    height: 4em;
    top: -0.5em;
	background: url("../images/technical01.svg") center / 100% no-repeat
}
#technical .ttl i {
	-webkit-text-stroke: 0.5px #086FB9;
	text-stroke: 0.5px #086FB9;
}
@media print, screen and (min-width: 380px) {
	#technical .ttl {
		padding-left: 3.5em
	}
	#technical .ttl::before {
		width: 2.5em;
		height: 5em;
		top: -1.2em;
	}	
}
@media print, screen and (min-width: 460px) {
	#technical .ttl {
		padding-left: 1.9em
	}
	#technical .ttl::before {
		width: 1.7em;
		height: 3em;
		top: -0.7em
	}
}
@media screen and (min-width: 800px) {
	#technical .ttl i {
		-webkit-text-stroke: 1px #086FB9;
		text-stroke: 1px #086FB9
	}
}
#technical .ttl {
	color: #086FB9
}
#technical .ttl h2::before {
	color: #086FB9
}
#technical {
	margin-top: 2em;
	padding-top: 2em;
	background: linear-gradient(to top, #f9f9f900, #e1e1e12e 10%)
}
#technical .wrap.slide {
	margin-top: 3em
}
@media screen and (min-width: 768px) { 
	#technical {
		margin-top: 3em;
		padding-top: 3em
	}
}
@media screen and (min-width: 1200px) { 
	#technical {
		margin-top: 5em;
		padding-top: 5em
	}
}


#technical .slide_wrap {
	margin-top: 2.8em
}

#technical .wrap:nth-child(2) {
	margin-top: 2em
}
#technical .flex_box {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: flex-start
}
#technical .painting .flex_box {
	margin-bottom: 0
}
#technical .bending .flex_box {
	flex-direction: column-reverse;
}
#technical .flex_box .flex_img, #technical .flex_box .flex_txt {
	position: relative;
	z-index: 1;
	width: 100%
}
#technical .flex_box .flex_img img {
	vertical-align: middle;
	height: 100%;
	width: auto;
	object-fit: cover
}
#technical .flex_box .flex_img {
	overflow: hidden;
	height: 15em;
}
#technical .welding .flex_box .flex_img {
	height: 20em;
}
#technical .flex_box .flex_txt {
	margin-top: 3em;
}
#technical .flex_box .flex_img img {
	width: 100%
}
#technical h3 {
	position: relative;
	font-size: 1.4em;
    font-weight: bold;
    line-height: 1.4;
    padding-left: 1em;
} 
#technical h3 span {
	color: #086FB9
}

#technical h3::before {
	position: absolute;
	z-index: -1;
	top: -0.35em;
	right: -0.16em;
	font-size: 5em;
	font-family: 'Arial';
	color: #EDEDED;
	line-height: 1;
	font-weight: 300
}
#technical .welding h3::before {
	content: "01";
}
#technical .bending h3::before {
	content: "02";
}
#technical .painting h3::before {
	content: "03";
}
#technical h3::after {
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	height: 100%;
	width: 0.2em;
	background: #086FB9
}
#technical .flex_box .flex_txt p {
	margin-top: 1em;
	margin-bottom: 1.2em;
	font-size: 1em;
	line-height: 1.8
}
#technical .flex_box .flex_txt p.no-btn2 {
	margin-bottom: 0
}
#technical .flex_box .flex_txt p.first-txt {
	margin-top: 1.5em
}
#technical .flex_box .flex_txt span.catch_txt {
	display: block;
	margin-top: 1em;
	width: 100%;
	font-size: 1.4em;
    font-weight: bold;
	text-align: center;
	letter-spacing: 3px
}
#technical .flex_box .flex_txt span.catch_txt i {
	font-style: normal;
	color: #ED5053
}
#technical .flex_box .flex_txt .no-br {
	display: none
}
#technical .bending, #technical .painting {
	margin-top: 4em
}


@media print, screen and (min-width: 480px) {
	#technical .flex_box .flex_img img {
		height: inherit
	}
	#technical .flex_box .flex_img {
		height: 19em;
	}
	#technical .welding .flex_box .flex_img {
		height: 28em;
	}
}
@media print, screen and (min-width: 620px) {
	#technical .flex_box .flex_img {
		height: 25em;
	}
	#technical .welding .flex_box .flex_img {
		height: 36em;
	}
	#technical h3 {
		font-size: 1.7em
	}
	#technical .flex_box .flex_txt p.first-txt {
		margin-top: 2em
	}
	#technical .flex_box .flex_txt p {
		margin-top: 1em;
		margin-bottom: 1.5em
	}
	
	#technical .flex_box .flex_txt {
		margin-top: 3em;
	}
	#technical .flex_box .flex_txt span.catch_txt {
		font-size: 1.7em;
	}
}
@media print, screen and (min-width: 768px) {
	#technical .flex_box {
		flex-direction: inherit;
	}
	#technical .bending .flex_box {
		flex-direction: inherit
	}
	#technical h3 {
		font-size: 1.2em;
		padding-left: 0.9em;
		line-height: 1.4
	}
	#technical .flex_box .flex_img, #technical .flex_box .flex_txt {
		overflow: inherit;
		margin-top: 0;
		height: auto;
		width: 48%;
	}
	#technical .welding .flex_box .flex_img {
		height: auto;
	}
	#technical .flex_box .flex_txt p.first-txt {
		margin-top: 1em
	}
	#technical .flex_box .flex_txt p {
		margin-top: 1em;
		margin-bottom: 0.8em;	
		line-height: 1.5
	}
	#technical .flex_box .flex_txt span.catch_txt {
		margin-top: 1.5em;
		font-size: 1.2em
	}
	#technical h3::before {
		font-size: 5.5em;
		top: -0.25em;
	}
}
@media print, screen and (min-width: 880px) {
	#technical h3 {
		font-size: 1.4em;
	}
	#technical .flex_box .flex_txt p {
		line-height: 1.6
	}
	#technical .flex_box .flex_txt span.catch_txt {
		font-size: 1.4em
	}
}
@media print, screen and (min-width: 920px) {
	#technical h3 {
		font-size: 1.6em;
		padding-left: 1em
	}
	#technical .flex_box .flex_txt p {
	margin-top: 1em;
	margin-bottom: 0.8em;
	line-height: 1.8
}
	#technical .flex_box .flex_txt p.first-txt {
		margin-top: 1.5em
	}
	#technical .flex_box .flex_txt span.catch_txt {
		font-size: 1.6em
	}
}
@media print, screen and (min-width: 1024px) {
	#technical .bending, #technical .painting {
		margin-top: 6em
	}
	#technical h3 {
		font-size: 1.8em;
		padding-left: 1em
	}
	#technical .flex_box .flex_txt span.catch_txt {
		font-size: 1.8em
	}
#technical .flex_box .flex_txt p {
	font-size: 1.1em
	}
}
@media screen and (min-width: 1200px) {
	#technical h3 {
		font-size: 2.1em
	}
	#technical .welding .flex_box .flex_txt .no-br,
	#technical .painting .flex_box .flex_txt .no-br {
		display: inline-block
	}
	#technical .flex_box .flex_txt p {
		margin-top: 1.5em;
		margin-bottom: 1em;
	}
	#technical .flex_box .flex_txt p.first-txt {
		margin-top: 2em
	}
	#technical .flex_box .flex_txt span.catch_txt {
		margin-top: 1em;
	font-size: 2em
	}
	#technical h3::before {
		font-size: 6em;
		top: -0.2em
	}
}
@media screen and (min-width: 1600px) {
	#technical .bending, #technical .painting {
		margin-top: 10em
	}
	#technical .flex_box .flex_img, #technical .flex_box .flex_txt {
		width: 47%
	}
	#technical h3 {
		font-size: 2.25em;
		padding-left: 1.3em;
		line-height: 1.5
	}
	#technical h3::before {
		top: -0.24em;
		font-size: 6.5em
	}
	#technical .bending .flex_box .flex_txt .no-br {
		display: inline-block
	}
	#technical .flex_box .flex_txt p {
		font-size: 1.15em;
		margin-bottom: 2em
	}
	#technical .flex_box .flex_txt p.first-txt {
		margin-top: 2.5em
	}
	#technical .flex_box .flex_txt span.catch_txt {
		margin-top: 1.5em;
		font-size: 2.2em
	}
	#technical .painting .flex_box .flex_txt p.first-txt {
		letter-spacing: 1.1px
	}
}


#inheritance {
	margin-top: 4em;
	padding-top: 4em;
	padding-bottom: 4em;
	background: linear-gradient(to top, #effdff, #fafeff )
}
#inheritance .no-br {
	display: none
}

#inheritance .sub_ttl_box::before {
	margin-top: -0.7em;
	background: url("../images/inheritance_01.svg") center / 100% no-repeat;
}
@media screen and (min-width: 1024px) {
	#inheritance {
		margin-top: 7em;
		padding-top: 7em;
		padding-bottom: 10em
	}
	#inheritance .sub_ttl_box::before {
		margin-top: -0.5em
	}
}
@media screen and (min-width: 1600px) {

	#inheritance .no-br {
		display: inline-block
	}

}
#business {
	margin-top: 8em
}