﻿
.container {
	display: flex;
	flex-wrap: wrap;
	background: #182c82;
	vertical-align: middle;
}


.container h2 {
	font-weight: bold;
	font-size:1.6vw;
}


.container h3.str {
	font-size:0.85vw;
	font-weight:bold;
}

.strp {
	font-size:0.92vw;
}

.strinner {
	width: 95%;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
}

.column--l,
.column--r {
	width: 100%;
}

.column--r .columnr_h2,.columnr_p,.toi_a {
	color:#fff;	
}

.column--r .toi{
	display: block;
	margin-bottom:0;
}

.column--r .toi a.toi_a {
	display: block;
	color:#fff;
	font-weight:bold;
	margin-bottom:0;
	text-align: center;
	padding:15px 0;
	background-color:#f07700;
	transition: all .3s ease-out;
	font-size:1.0vw;
}

.column--r .toi a.toi_a:hover {
	text-decoration: none;
	color:#f07700;
	background-color:#fff;
	/*transform: translateY(-50%);*/
}

.column--r .toi a.toi_a em {
	font-size:1.5vw;
}


.column--l {
	width: calc(100% - 600px);
	margin-left:0;
	vertical-align: middle;
}

.column--r {
	width: 500px;
	padding: 0 20px;
	vertical-align: middle;
}


.column--l img {
	width:100%;
	max-height:450px;
	object-fit: cover;
	vertical-align: middle;
	/*object-position: -40px -40px;*/
}

.column--l02 img {
	/*object-position: -40px -120px;*/
	max-height: 550px;
}

/*
.column--l03 img {
	max-height:550px;
}
*/






.column--r h2 {
	padding:40px 0 30px;
}

/* こんなお悩み */

.str_list li{
	line-height:50px;
}



/* 一貫して～お任せください */

.omakase_cont {
	background: #d8f5ff;
	padding:50px 0;
}

.omakase_cont h3 {
	color:#0500c1;
	font-weight:bold;
	padding:0 15px;
}

.omakase_cont p {
	padding:0 15px;
}


/* ステップフロー */

.str_flow {
	width: calc(100% - 5px); /* ステップフロー全体の横幅を指定 */
	display: flex;						/* flexboxで横並びにする */
	justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
	list-style: none;
}

.str_flow li {

	color: #fff;				/* 文字色を白に指定 */
	/*font-size: 11px;*/		/* 文字サイズを指定 */
	width: calc(100% / 4); /* 横幅を三等分した1つの大きさに指定 */
	background: #09aff5;	 /* 背景色を指定 */
	line-height: 50px;	/* 行間(高さの代わり)を指定 */
	min-height:180px;
	text-align: center; /* 文字を中央寄せにする */
	position: relative; /* 基準位置とする */
	font-size:1.05vw;
}

/*.str_flow li:not(:first-child):not(:last-child) { 
	padding: 0 0 0 10px;	* 最初と最後以外には左に適度な余白を指定 *
}*/

.str_flow li::before,
.str_flow li::after {
	content: "";	/* 疑似要素では必須 */
	width: 0;		 /* 横幅を0に指定 */
	height: 0;　　/* 高さを0に指定 */
	display: block;	/* ブロック要素にする */
	position: absolute; /* 相対位置に指定 */
}

.str_flow li::before {
	/*border: solid 32px transparent;*/		 /* 32pxのborderを指定 */
	border-right: solid 13px transparent;	/* 幅を合わせるため右線は13pxにする */
	border-left: solid 13px #09aff5;					/* 白い三角形を作成して▷の形で上に重ねて削り取る */
	top: -7px;	/* 重ねる位置(縦軸)を調整 */
	left: 0;		/* 重ねる位置(横軸)を調整 */
	z-index: 1; /* 重なり順を指定 */
}

.str_flow li::after {
	border: solid 25px transparent;	/* 25pxのborderを指定 */
	border-left: solid 20px #09aff5; /* 左のborderで背景色と同じ▶の部分を作成する */
	border-right: solid 20px transparent; /* 幅を合わせるために右線は10pxにする */
	top: 0;			 /* 重ねる位置(縦軸)を調整 */
	right: -40px; /* 重ねる位置(横軸)を調整 */
	z-index: 2;	 /* 重なり順の優先度を他よりも上げる */
	-webkit-filter:drop-shadow(5px 0px 2px rgba(0, 0, 0, 0.2));
	-moz-filter:drop-shadow(5px 0px 2px rgba(0, 0, 0, 0.2));
	-ms-filter:drop-shadow(5px 0px 2px rgba(0, 0, 0, 0.2));
	filter:drop-shadow(5px 0px 2px rgba(0, 0, 0, 0.2));
}

.str_flow li:first-child::before,
.str_flow li:last-child::after {
	content: none;	/* 最初のliの左と最後のliの右は作らない */
}








.str_flow li:nth-child(2) {
	background: #39bff8;	 /* 背景色を指定 */
}
.str_flow li:nth-child(2)::before {
	border-left: solid 13px #39bff8;					/* 三角形を作成して▷の形で上に重ねて削り取る */
}
.str_flow li:nth-child(2)::after {
	border-left: solid 20px #39bff8; /* 左のborderで背景色と同じ▶の部分を作成する */
}

.str_flow li:nth-child(3) {
	background: #5acaf9;	 /* 背景色を指定 */
}
.str_flow li:nth-child(3)::before {
	border-left: solid 13px #5acaf9;					/* 三角形を作成して▷の形で上に重ねて削り取る */
}

.str_flow li:nth-child(3)::after {
	border-left: solid 20px #5acaf9; /* 左のborderで背景色と同じ▶の部分を作成する */
}

.str_flow li:nth-child(4) {
	background: #8bdafb;	 /* 背景色を指定 */
}
.str_flow li:nth-child(4)::before {
	border-left: solid 13px #8bdafb;					/* 三角形を作成して▷の形で上に重ねて削り取る */
}

.str_flow li:nth-child(4)::after {
	border-left: solid 20px #8bdafb; /* 左のborderで背景色と同じ▶の部分を作成する */
}







.str_flow li .str__flow {

	width:100%; /* ステップフロー全体の横幅を指定 */
	justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
	list-style: none;
	line-height:30px;
	background: #fff;	 /* 背景色を指定 */
	min-height: 200px;
	border: solid 25px transparent;	/* 25pxのborderを指定 */
	border-right: solid 20px transparent; /* 幅を合わせるために右線は10pxにする */
	top: 0;			 /* 重ねる位置(縦軸)を調整 */
	right: -40px; /* 重ねる位置(横軸)を調整 */
	z-index: 2;	 /* 重なり順の優先度を他よりも上げる */
	-webkit-filter:drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.2));
	-moz-filter:drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.2));
	-ms-filter:drop-shadow(5px 5px 2px rgba(0, 0, 0, 0.2));
	filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2));

}

.str_flow li .str__flow li {

	color: #0E0E0E;				/* 文字色を白に指定 */
	width: 100%; /* 横幅を三等分した1つの大きさに指定 */
	line-height: 30px;	/* 行間(高さの代わり)を指定 */
	min-height:30px;
	text-align: center; /* 文字を中央寄せにする */
	position: relative; /* 基準位置とする */
	background: #fff;	 /* 背景色を指定 */
	font-size:0.9vw;
	display: inline-block;
	vertical-align: middle;
}


.str_flow li .str__flow li::before,
.str_flow li .str__flow li::after {
	content: none;
}






/* 3つの要素、活用事例の見出しのみ */

.head_border {
		display: flex;
		align-items: center;
}
 
.head_border:before,
.head_border:after {
		content: "";
		height: 3px;
		flex-grow: 1;
		background-color: #09aff5;
}
 
.head_border:before {
		margin-right: 2rem;
		padding-right: 2rem;
}
 
.head_border:after {
		margin-left: 2rem;
		padding-right: 2rem;
}




/* 3つの要素 */

.strdiv {
	padding: 60px;
}

.str__div {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
	display:flex;
	flex-direction: row-reverse;
	justify-content: space-between;
}

.strdiv h4 {
	font-size: 2.2vw;
	margin: 0;
	padding:0 0 30px 300px;
	font-weight:bold;
	color: #fff;
}


.strtxt {
	width: 90%;
	text-align: left;
}

p.strh4p {
	flex: 1;
	font-size: 1.5vw;
	color:#fff;
	margin: 0;
	padding-bottom:20px;
}


.strimg {
	text-align: center;
	/*min-height: 200px;*/
	max-width:300px;

}

.strimg img {
	max-width: 150px;
	height:auto;
	object-position: 50% 50%;

}


.strdiv:nth-child(even) {
	flex-direction: row;
}
/*
.str__div:nth-child(even) .strtxt{
	text-align: left;
}
.str__div:nth-child(even) .strimg{
	margin-left: 0;
	margin-right: 3%;
}
*/


.strdiv:nth-child(1){
	background:#09aff5;
}

.strdiv:nth-child(2){
	background:#4462c6;
}

.strdiv:nth-child(3){
	background:#142e83;
}



/* PCスマートフォン表示変更 */
.dispsp{
	display:none;
}





@media (max-width: 414px) {
	
	.container {
		display: flex;
		flex-wrap: column;
	}
	
	.container h2 {
		font-size:5.2vw;
	}

	
	
	.strp {
		font-size:4vw;
	}
	
	.column--l {
		width:100%;
		margin:0;
	}
	.column--l img {
		width:100%;
		max-height:300px;
		object-position: right;
		}
	.column--r {
		width:100%;
		padding:30px 0 0;
	}

	.column--r h2 {
		padding:20px 0;
	}
	
	.columnr_p {
		padding:20px 20px 0;
	}
	
	.column--r {
		display: contents;	/* .column--rの箱を削除 */
	}	
	
	.column--r .toi {
		width:100%;
	}
	
	
	.column--r .toi a.toi_a {
		font-size:4vw;
	}


	.column--r .toi a.toi_a em {
		font-size:4vw;
	}
	
	
	
	.tit01 {
		order:1;
	}
	
	.tit02 {
		order:2;
	}
	.tit03 {
		order:3;
	}
	.tit04 {
		order:4;
	}


	
/* こんなお悩み */	
	.str_list li{
		font-size:4vw;
		line-height:30px;
		padding:0 20px 15px;
	}
	
/* 一貫して～お任せください */	
	.omakase_cont {
	padding:20px 0;
	}

	.omakase_cont h3 {
		font-weight:bold;
		font-size:5.5vw;
	}

	
/* ステップフロー */
	
	.str_flow {
		display:block;
		width:100%;
		/*width: 95%;*/ /* ステップフロー全体の横幅を指定 */
		justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
		list-style: none;
	}
	
	
	.str_flow li {
		/*font-size: 11px;*/		/* 文字サイズを指定 */
		width: 95%;
		line-height: 50px;	/* 行間(高さの代わり)を指定 */
		text-align: center; /* 文字を中央寄せにする */
		position: relative; /* 基準位置とする */
		font-size:4vw;
		-ms-writing-mode: tb-lr;
  		writing-mode: vertical-lr;
		
		
		
	    min-height: 67px;
	}
	
	.str_flow li::before,
	.str_flow li::after {
		content: "";	/* 疑似要素では必須 */
		width: 0;		 /* 横幅を0に指定 */
		height: 0;　　/* 高さを0に指定 */
		display: block;	/* ブロック要素にする */
		position: absolute; /* 相対位置に指定 */
	}

	.str_flow li::after {
		border: solid 25px transparent;	/* 25pxのborderを指定 */
		border-top: solid 25px #09aff5; /* 左のborderで背景色と同じ▶の部分を作成する */
		border-right: solid 25px transparent; /* 幅を合わせるために右線は10pxにする */
		top: 195px;			 /* 重ねる位置(縦軸)を調整 */
		left: 0px; /* 重ねる位置(横軸)を調整 */
		z-index: 2;	 /* 重なり順の優先度を他よりも上げる */
		-webkit-filter:drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
		-moz-filter:drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
		-ms-filter:drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
		filter:drop-shadow(0px 5px 2px rgba(0, 0, 0, 0.2));
	}

	

	.str_flow li:nth-child(2)::after {
		border-top: solid 25px #39bff8; /* 左のborderで背景色と同じ▶の部分を作成する */
		border-left: solid 25px transparent;
	}

	
	.str_flow li:nth-child(3)::after {
		border-top: solid 25px #5acaf9; /* 左のborderで背景色と同じ▶の部分を作成する */
		border-left: solid 25px transparent;
	}
	
	.str_flow li.str__flow03::after {
		top:216px;
	}


	.str_flow li:nth-child(4)::after {
		border-top: solid 25px #8bdafb; /* 左のborderで背景色と同じ▶の部分を作成する */
		border-left: solid 25px transparent;
	}

	
	
	.str_flow li .str__flow {

		/*min-height:180px;*/
		width:95%; /* ステップフロー全体の横幅を指定 */
		padding: 20px 0;
		justify-content: space-between; /* 横並びにしたものを等間隔で並べる */
		list-style: none;
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
		
		border: solid 25px transparent;	/* 25pxのborderを指定 */
		border-right: solid 20px transparent; /* 幅を合わせるために右線は10pxにする */
		top: 0;			 /* 重ねる位置(縦軸)を調整 */
		left: 0; /* 重ねる位置(横軸)を調整 */
		z-index: 2;	 /* 重なり順の優先度を他よりも上げる */
		-webkit-filter:drop-shadow(10px 0px 5px rgba(0, 0, 0, 0.2));
		-moz-filter:drop-shadow(10px 0px 5px rgba(0, 0, 0, 0.2));
		-ms-filter:drop-shadow(10px 0px 5px rgba(0, 0, 0, 0.2));
		filter:drop-shadow(10px 0px 5px rgba(0, 0, 0, 0.2));	
		
	}
	
	
	.str_flow li .str__flow li {
		width: 100%; /* 横幅を三等分した1つの大きさに指定 */
		min-height: 30px;
		line-height: 30px;	/* 行間(高さの代わり)を指定 */
		text-align: center; /* 文字を中央寄せにする */
		position: relative; /* 基準位置とする */
		font-size:3.8vw;
		writing-mode: horizontal-tb;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: horizontal-tb;
	}
	
	.str_flow li .str__flow li::before,
	.str_flow li .str__flow li::after {
		content: none;
	}
	
	

/* 3つの要素 */

	.strdiv {
		display: flex;
		flex-wrap: wrap;
		padding: 30px 15px;
	}

	.strdiv h4{
	    width: 100%;
		padding:0;
		font-size: 8.2vw;
		font-weight:bold;
		text-align: center;
		color: #fff;
	}

	.str__div {
	    display: block;
	    margin-right: auto;
	    margin-left: auto;
	    max-width: 414px;
	}

	
	p.strh4p {
		font-size: 7vw;
	}
	
	.strimg img {
		max-width:100px;
		width:100%;
		margin: auto;
		padding:20px 0;
	}

	
	
	

	.str__div {
		display: contents;	/* .str__divの箱を削除 */
	}
	
	.str01 {
		order:1;
	}
	
	.str02 {
		order:2;
	}
	

	.disppc{
		display:none;
	}
	
	.dispsp{
		display:block;
	}


}


/***** VENUS *****/

@media (max-width: 414px) {
	.formdel {
		display:none;	/* フォーム付きヘッダーをレスポンシブ時に削除 */
	}
}


@media (min-width: 414px) {
	dl.vns3ddl {
		display: flex;
		flex-wrap: wrap;
	}
	dl.vns3ddl dt {
		width: 10%;
	}
	dl.vns3ddl dd {
  		width: 90%;
	}
}



.dlb_content-43venus .col::before {
    border-style: none;
}



/***** ハイスピードカメラ Phantom UV拡張モデル フロー図を２つ分に *****/


@media (min-width: 768px) {
	.dlb-flow_area_3 .dlb-flow_item02 {
    	width: 45%;
	}
}

/***** カタログ　ボタン前のアイコン変更 *****/

.dlb_btn--icon a::before, .dlb_btn_inlineb--icon a::before {
		content: '';
		width: 20px;
		height: 20px;
		border: 0px;
		/*border-width: 2px 2px 0 0;
		border-style: solid;*/
		transform: rotate(0deg);
		position: absolute;
		top: calc(40% - 5px);
		left: 4.1em;
		transition: all .2s ease-in 0s;
		background-image:url(../image/downloadicon.svg);
		background-size:100%;
}

@media screen and (min-width:690px) and (max-width:1200px) {
	.dlb_btn--icon a::before,
	.dlb_btn_inlineb--icon a::before {
		position: absolute;
		top: calc(40% - 5px);
		left: 2em;
	}
}

.dlb_btn--icon a:hover,
.dlb_btn_inlineb--icon a:hover {text-decoration: none;}
.dlb_btn--icon a:hover::before,
.dlb_btn_inlineb--icon a:hover::before {
	transform: rotate(0deg);
	
	/* left: 1.7em; */
}



/***** カタログ　ボタン前のアイコン変更 画面サイズ別 *****/



@media screen and (max-width: 690px) {
	.col4_m_421--02 .col {
    	width: 48%;
    	margin-right: 0;
		padding:0 5px;
  	}
	.dlb_btn--02 a {
    padding: 12px 0.5em;
    min-width: 100%;
	}
}



.menu_btn_d432--02 a {background-color: #fff; border-radius: 3px; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.09);}
.menu_btn_d432--02 a:hover { background-color: #0D72B4; border-color: #0D72B4; color: #ffffff; border-radius: 3px; box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.09); }

/*
.menu_btn_332 a:hover::before, .menu_btn_331 a:hover::before, .menu_btn_d332 a:hover::before, .menu_btn_d331 a:hover::before, .menu_btn_432 a:hover::before, .menu_btn_422 a:hover::before, .menu_btn_d432 a:hover::before, .menu_btn_d422 a:hover::before, .menu_btn_532 a:hover::before, .menu_btn_d532 a:hover::before, .menu_btn_642 a:hover::before, .menu_btn_d642 a:hover::before { color: #ffffff; }
*/

