@charset "utf-8";

/*-----

   technology_sp

-----------------------------*/


@media screen and (max-width: 799px) {
	/*--  トップ
	---------------------------------------------------- */
	.sp_hidden {
		display: none;
	}
	
	.technology .sp_layer_nav__inner .snav_inner {
		display: none;
	}
	
	.content_toppage_img, .content_toppage_ttl, .content_toppage_txt {
		font-size: 14px;
		vertical-align: middle;
	}
	.content_toppage_box li {
		position: relative;
		float: none;
		overflow: hidden;
		width: calc(50% - 6px);
		margin: 0 6px 20px 0;
	}
	.content_toppage_box li:nth-child(2n) {
		margin: 0 0 20px 6px;
	}
	.content_toppage_box a {
		font-size: 0;
		box-sizing: border-box;
		width: 100%;
		height: calc(100% - 3px);
		padding: 12px;
	}
	.technology_box {
		display: flex;
		width: calc(100% - 24px);
		margin: 24px auto;
		flex-wrap: wrap;
	}
	.content_toppage_img img:nth-child(1){
		display: none;
	}
	.content_toppage_img img:nth-child(2){
		display: block;
	}
	.content_toppage_img {
		position: relative;
		display: table-cell;
		overflow: hidden;
		width: 64px;
		height: 48px;
	}
	.content_toppage_ttl {
		display: table-cell;
		width: auto;
		height: 48px;
		margin: 0;
		padding: 0;
		border-bottom: none;
	}
	.content_toppage_ttl img{
		display: none;
	}
	.content_toppage_ttl em{
		font-size: 17px;
		font-weight: 900;
		font-style: normal;
		line-height: 1.235;
		display: block;
		margin-left: 16px;
		vertical-align: middle;
	}
	.content_toppage_ttl.row_2 {
		padding: 0;
	}
	.content_toppage_ttl em span{
		font-size: 13px;
	}
	.content_toppage_txt {
		line-height: 1.429;
		display: block;
		width: 100%;
		margin: 12px 0 0 0;
		padding-top: 12px;
		border-top: solid 1px #3e7085;
	}
	.content_toppage_box a::after {
		position: absolute;
		right: -1px;
		bottom: -1px;
		display: block;
		width: 0;
		height: 0;
		content: '';
		border-width: 0 0 10px 10px;
		border-style: solid;
		border-color: transparent transparent #3e7086 transparent;
		background-image: none;
	}
	
	.technology_intro_box li {
		margin: 10px 0;
	}
	
	.technology_intro_box li a {
		padding: 12px;
	}
	.technology_intro_box li a::after {
		position: absolute;
		right: -1px;
		bottom: -1px;
		display: block;
		width: 0;
		height: 0;
		content: '';
		border-width: 0 0 10px 10px;
		border-style: solid;
		border-color: transparent transparent #3e7086 transparent;
		background: none;
	}
	.content_intro_img img:nth-child(1) {
		display: none;
	}
	.content_intro_img img:nth-child(2) {
		display: block;
	}
	.technology_intro_box .content_intro_img {
		align-self: center;
	}
	.technology_intro_box .content_intro_ttl {
		width: calc(100% - 88px);
		padding: 0 0 0 12px;
	}
	.technology_intro_box .content_intro_ttl > em > span{
		font-size: 13px;
	}
	.technology_intro_box .content_intro_ttl > em{
		font-size: 17px;
		line-height: 1.2;
	}
	.technology_intro_box .content_intro_txt {
		font-size: 14px;
		line-height: 1.5;
		margin-top: 12px;
		padding-top: 12px;
		min-height: auto;
	}
	/*--  詳細
	---------------------------------------------------- */
	.content_headline > .span_small {
		font-size: 13px;
		text-indent: -0.5em;
	}
	.technology_first_box {
		margin: 0 0 24px 0 !important;
	}
	.technology_first_box div:first-child {
		margin: 0 0 24px 0;
		float: none;
		text-align: center;
	}
	.technology_first_box dt {
		background-position: 0 2px;
	}
	
	.technology_bottom_box {
		padding: 12px;
		margin-bottom: 40px;
	}
	.technology_bottom_box figure {
		width: calc(50% - 12px);
		margin: 0;
		text-align: center;
	}
	.technology_bottom_box figure img{
		width: 100%;
		height: auto;
	}
	
	.technology_bottom_box.adj_img .tec14_img {
		height: calc(56.6vw - 64.26px);
	}
	
	.content_headline_h3 {
		margin-top: 24px;
	}
	
	.content_link_anchor li{
		float: none;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.content_link_anchor li+li {
		margin-top: -1px;
	}
	.content_link_anchor li a {
		padding: 10px 12px 10px 32px;
		border: solid 1px #d3d5d8;
		background-position: 9px 10px;
		font-size: 14px;
	}
	
	
	
	/*--  tec01
	---------------------------------------------------- */
	.tec01_bottom figure img {
		width: 100%;
		max-width: 315px;
		height: auto;
	}
	.tec01_bottom.technology_bottom_box {
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.tec01_bottom.technology_bottom_box figure{
		display: inline-block;
	}
	.tec01_bottom.technology_bottom_box figure:first-child{
		padding-right: 12px;
	}
	.tec01_bottom.technology_bottom_box figure:nth-child(2){
		padding-left: 12px;
	}
	/*--  tec02
	---------------------------------------------------- */
	.tec02_first figcaption {
		text-align: center;
		padding: 0;
	}
	.technology_first_box.tec02_first > dl > dd > ol > li:first-child br {
		display: none;
	}
	.technology_bottom_box.tec02_bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		padding-top: 20px;
	}
	.technology_bottom_box.tec02_bottom figure:nth-child(1) {
		width: 330px;
		max-width: 50%;
	}
	.technology_bottom_box.tec02_bottom figure:nth-child(2) {
		width: 330px;
		max-width: 50%;
		padding: 0 10px;
		box-sizing: border-box;
	}
	/*--  tec03
	---------------------------------------------------- */
	.tec03_first figure {
		margin-bottom: 24px;
	}
	.technology_3column li{
		width: calc(33% - 7px);
	}
	.technology_3column li img{
		width: 100%;
		height: auto;
	}
	.technology_3column figcaption {
		margin-bottom: 0;
	}
	.technology_bottom_box.tec03_bottom {
		font-size: 0;
		text-align: center;
	}
	.technology_bottom_box.tec03_bottom dt img{
		display: block;
	}
	.technology_bottom_box.tec03_bottom dd {
		display: inline-block;
		vertical-align: top;
	}
	.technology_bottom_box.tec03_bottom figure{
		display: inline-block;
		float: none;
		width: auto;
	}
	.technology_bottom_box.tec03_bottom dd:nth-child(2) {
		width: 281px;
		max-width: 43%;
	}
	.technology_bottom_box.tec03_bottom dd:nth-child(3) {
		width: 378px;
		max-width: 57%;
	}
	.technology_bottom_box.tec03_bottom dd:last-child {
		display: none;
	}
	.tec03_bottom dd img{
		width: 100%;
		height: auto;
	}
	.tec03_bottom dd:nth-child(2n) img{
		margin-bottom: -100px;
	}
	/*--  tec04
	---------------------------------------------------- */
	.technology_first_box.tec04_first .box_img{
		clear: both;
		overflow: hidden;
		margin: 0 calc((100% - 480px - 24px) / 2);
	}
	.technology_first_box.tec04_first .box_img figure{
		float: left;
		max-width: 240px;
		width: 50%;
		margin: 0 6px;
	}
	.tec04_bottom ul{
		width: 100%;
		margin: 5px auto 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.tec04_bottom  li{
		width:251px;
		max-width: calc(39.7% - 10px);
		margin: 0 10px 0 0;
	}
	.tec04_bottom  li:last-child{
		width:381px;
		max-width: calc(60.3% - 10px);
		margin: 0 0 0 10px;
	}
	.tec04_bottom  li dl dd img{
		width: 100%;
		height: auto;
	}
	/*--  tec05
	---------------------------------------------------- */
	.tec05_first figcaption {
		padding: 8px 0 8px 0;
		margin: 0 auto;
		background: #f5f6f8;
		width: 240px;
	}
	.tec05_bottom > div {
		width: 654px;
		max-width: 100%;
		margin: 0 auto;
		display: block;
		text-align: center;
	}
	.tec05_bottom figure:first-child {
		width:432px;
		max-width: calc(68% - 12px);
		margin-right: 12px;
		display: inline-block;
	}
	.tec05_bottom figure:last-child {
		width:198px;
		max-width: calc(32% - 12px);
		margin-left: 12px;
		display: inline-block;
	}
	/*--  tec06
	---------------------------------------------------- */
	.technology_bottom_box.tec06_bottom {
		width: calc(100% - 24px);
		max-width: 312px;
		margin: 0 auto 40px auto;
	}
	.tec06_bottom li {
		float: none;
		margin: 0 0 20px 0;
		width: 100%;
	}
	.tec06_bottom .bottom_center {
		width: 100%;
		text-align: center;
		margin: 0 0 0 0;
	}
	.tec06_bottom li img{
		width: 100%;
		max-width: 312px;
		height: auto;
		
	}
	/*--  tec07
	---------------------------------------------------- */
	.tec07_bottom dl{
		width: 100%;
		max-width: 660px;
		margin: 0 auto;
	}
	.tec07_bottom dt{
		width: 100%;
	}
	.tec07_bottom dd{
		width: 48.4%;
		max-width: 321px;
	}
	.tec07_bottom dd:last-child{
		width:48.2%;
		max-width: 319px;
	}
	.tec07_bottom dd img{
		width: 100%;
		max-width: 321px;
		height: auto;
	}
	.tec07_bottom dd:last-child img{
		width: 100%;
		max-width: 319px;
		height: auto;
	}
	/*--  tec08
	---------------------------------------------------- */
	.tec08_bottom ul {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.tec08_bottom li:first-child {
		width: 100%;
		text-align: center;
		margin-bottom: 12px;
	}
	.tec08_bottom li:first-child img {
		width: 345px;
		max-width: 100%;
		height: auto;
	}
	.tec08_bottom li:nth-child(2) {
		width: 197px;
		max-width: calc(63% - 5px);
		margin-right: 5px;
	}
	.tec08_bottom li:last-child {
		width:112px;
		max-width: calc(37% - 5px);
		margin-left: 5px;
	}
	.tec08_bottom figure {
		position: relative;
	}
	.tec08_bottom .img_01 {
		width: 100%;
		top: auto;
		right: auto;
		margin: 0 !important;
	}
	.tec08_bottom .img_02 {
		width: 100%;
		top: auto;
		right: auto;
		bottom: auto;
		margin: 0 !important;
	}
	/*--  tec09
	---------------------------------------------------- */
	.tec09_bottom ul {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.tec09_bottom ul li {
		margin: 0;
	}
	.tec09_bottom ul li figure{
		width:100%;
		margin: 0 !important;
	}
	.tec09_bottom ul li img{
		width: 100%;
		height: auto;
	}
	.tec09_bottom .img_01 {
	 	margin: 0 0 10px 0;
		width: 100%;
		text-align: center;
	}
	.tec09_bottom .img_01 img {
		width: 255px;
		max-width: 100%;
	}
	.tec09_bottom .img_02 {
		margin: 15px 5px 0 0;
		width: 220px;
		max-width: calc(63% - 5px);
	}
	.tec09_bottom .img_03 {
	 	margin: 0 0 0 5px;
		width: 125px;
		max-width: calc(37% - 5px);
	}
	.tec09_bottom .img_03 figure{
		white-space: nowrap;
	}
	/*--  tec10
	---------------------------------------------------- */
	.technology_first_box.tec10_first .box_img{
		clear: both;
		overflow: hidden;
		margin: 0 calc((100% - 480px - 24px) / 2);
	}
	.technology_first_box.tec10_first .box_img figure{
		float: left;
		max-width: 240px;
		width: 50%;
		margin: 0 6px;
	}
	.tec10_bottom ul {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		margin: 0 auto;
	}
	.tec10_bottom li figure{
		width: 100%;
		margin: 0 !important;
	}
	.tec10_bottom .img_01 {
	 	margin: 0 0 12px 0;
		width: 100%;
	}
	.tec10_bottom .img_01 figure {
		width: 397px;
		max-width: 100%;
		margin: 0 auto !important;
		display: block;
	}
	.tec10_bottom .img_01 figcaption {
		margin-top: 0;
		margin-left: 0;
		text-align: center;
	}
	.tec10_bottom .img_02 {
	 	margin: 0 16px 0 0;
		width: 151px;
		max-width: calc(42% - 16px);
	}
	.tec10_bottom .img_02 figure{
		width: auto;
	}
	.tec10_bottom .img_02 figure img{
		display: none;
	}
	.tec10_bottom .img_02 figure img:nth-last-child(2){
		display: block;
	}
	.tec10_bottom .img_02 figcaption {
		margin: 5px 0 0 0;
	}
	.tec10_bottom .img_03 {
	 	margin: 0 0 0 16px;
		width: 215px;
		max-width: calc(58% - 16px);
	}
	.tec10_bottom .img_03 figcaption {
		margin: 5px 0 0 0;
	}
	.btn_bycom {
		margin-top: 44px;
		margin-bottom: 44px;
	}
	.btn_bycom > a {
		display: block;
		padding: 21px 24px;
	}
	.btn_bycom > a > dl > dt {
		background-image: url("../../common/images/technology/introduction/btn_bycom/sp_img_bycom_ttl.png");
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 98px 38px;
		width: 30%;
		min-width: 98px;
    padding-right: 24px;
    height: 38px;
	}
	.btn_bycom > a > dl > dt > img{
		display: none;
	}
	.btn_bycom > a > dl > div {
		width: 100%;
		padding-left: 24px;
	}
	.btn_bycom > a > dl > div > dd > span {
		position: relative;
		width: 100%;
		padding: 0 14px;
	}
	.btn_bycom > a > dl > div > dd > img {
		height: 54px;
	}
	.btn_bycom > a > dl > div > dd:nth-child(2) {
		box-sizing: border-box;
		max-width: 244px;
		width: calc(100% - 128px);
	}
		
	.development_flow::before {
		font-size: 12px;
		display: block;
		margin-bottom: 10px;
		content: '※ 横にスワイプして閲覧してください。';
	}
	.development_flow {
		width: 100%;
		padding: 8px 0 32px 0;
	}
	.development_flow div {
		overflow-x: hidden;
		overflow-y: hidden;
		height: 810px;
	}
	.development_flow div ul {
		transform-origin: 0 0;
		transform: scale(.75) ;
	}
	
}
@media screen and (max-width: 564px) {
	.development_flow div {
		overflow-x: auto;
	}
}
@media screen and (max-width: 530px) {
	.btn_bycom {
		height: auto;
	}
	.btn_bycom > a > dl {
		flex-direction: column;
		padding: 0;
	}
	.btn_bycom > a > dl > dt {
		background: none;
    min-width: auto;
    width: auto;
    height: auto;
    padding: 0 0 15px 0;
	}
	.btn_bycom > a > dl > dt > img{
		display: block;
		height: 16px;
		
	}
	.btn_bycom > a > dl > div {
		flex-direction: column;
		padding: 0;
	}
	.btn_bycom > a > dl > div::before {
		width: 24px;
		height: 1px;
		top: 0;
		left: calc(50% - 12px);
	}
	.btn_bycom > a > dl > div > dd:nth-child(1) {
		padding-top: 15px;
	}
	.btn_bycom > a > dl > div > dd:nth-child(2) {
		padding: 16px 0 0 0;
		max-width: 244px;
		width: 100%;
	}
	.btn_bycom > a > dl > div > dd > span {
		box-sizing: border-box;
	}
	
}
@media screen and (max-width: 639px) {
	/*--  トップ
	---------------------------------------------------- */
	.content_toppage_box li {
		display: inline-block;
		overflow: hidden;
		width: calc(100%);
		margin: 0 0 20px 0;
	}
	.content_toppage_box li::before {
		position: absolute;
		content: "";
		display: block;
		height: 3px;
		width: 100%;
		background: url(../images/base/content_toppage_line.png) no-repeat #3e7086;
		left: 0;
		top: 0;
		z-index: 1;
	}
	.content_toppage_box li:nth-child(2n) {
		margin: 0 0 20px 0;
	}
	.technology_intro_box li{
		width: 100%;
	}
	/*--  詳細
	---------------------------------------------------- */
	.technology_bottom_box {
		padding: 12px;
		margin:0 auto 40px auto;
		width: calc(100% - 24px);
	}
	.technology_bottom_box figure {
		float: none;
		margin: 0 auto !important;
		width: auto;
	}
	.technology_bottom_box figure:last-child {
		float: none;
		margin: 0;
	}
	.technology_bottom_box figure img{
		width: 100%;
		height: auto;
	}

	
	
	/*--  tec01
	---------------------------------------------------- */
	.tec01_bottom figure {
		max-width: 315px;
		margin-bottom: 17px !important;
	}
	.tec01_bottom figure:last-child {
		margin-bottom: 0 !important;
	}
	.tec01_bottom.technology_bottom_box figure:first-child,
	.tec01_bottom.technology_bottom_box figure:nth-child(2){
		padding-left: 0px;
		padding-right: 0px;
	}
	/*--  tec02
	---------------------------------------------------- */
	.technology_bottom_box.tec02_bottom {
		flex-direction: column;
		padding-top: 20px;
	}
	.technology_bottom_box.tec02_bottom figure:nth-child(1),
	.technology_bottom_box.tec02_bottom figure:nth-child(2) {
		max-width: 100%;
		margin-bottom: -24px !important;
	}
	/*--  tec03
	---------------------------------------------------- */
	.tec03_first figure {
		margin-bottom: 24px;
	}
	.technology_3column li{
		width: calc(50% - 7px);
		margin-bottom: 10px;
	}
	.technology_3column li:last-child{
		margin: 0;
	}
	.technology_3column li img{
		width: 100%;
		height: auto;
	}
	.technology_3column figcaption {
		margin-bottom: 0;
	}
	.technology_bottom_box {
		padding: 17px 12px 12px 12px;
		margin: 0 auto 40px auto;
	}
	.tec03_bottom dt {
		margin: 0 0 8px 0;
	}
	.tec03_bottom dt img{
		width: auto;
	}
	.technology_bottom_box.tec03_bottom dd:nth-child(2),
	.technology_bottom_box.tec03_bottom dd:nth-child(3){
		display: none;
	}
	.technology_bottom_box.tec03_bottom dd:last-child {
		display: block;
	}
	.tec03_bottom dd img{
		width: 100%;
		max-width: 375px;
		height: auto;
	}
	.tec03_bottom dd:nth-child(2n) img{
		margin-bottom: 0px;
	}
	/*--  tec04
	---------------------------------------------------- */
	.technology_first_box.tec04_first .box_img{
		clear: both;
		overflow: hidden;
		width: 100%;
		margin: 0;
	}
	.technology_first_box.tec04_first .box_img figure{
		float: none;
		max-width: 240px;
		width: 100%;
		margin: 0 auto 20px auto;
		text-align: center
	}
	.tec04_bottom ul{
		margin: 0 auto;
		flex-direction: column;
		align-items: center;
	}
	.tec04_bottom li {
		float: none;
		margin: 0 0 20px 0 !important;
	}
	.tec04_bottom  li{
		max-width:100%;
	}
	.tec04_bottom li:last-child {
		margin: 0 !important;
		max-width: 100%;
	}

	.tec04_bottom  li dl dt img{
		width: auto;
		height: auto;
	}
	/*--  tec05
	---------------------------------------------------- */
	.tec05_first figcaption {
		margin: 0 auto;
		width: 240px;
	}
	.tec05_bottom figure:first-child {
		margin-bottom: 20px !important;
		width: 100%;
		max-width: 432px;
	}
	.tec05_bottom div .inner_figure {
		width: 100%;
		max-width: 432px;
	}
	.tec05_bottom div .inner_figure img:last-child {
		width: 100%;
		height: auto;
	}
	.tec05_bottom div .tec05_bottom_pc {
		display: none;
	}
	.tec05_bottom div .tec05_bottom_sp {
		display: block;
	}
	/*--  tec07
	---------------------------------------------------- */
	.tec07_bottom dl{
		width: 100%;
		max-width: 321px;
		margin: 0 auto;
	}
	.tec07_bottom dt{
		width: 100%;
	}
	.tec07_bottom dd{
		width: 100%;
		max-width: 321px;
		margin: 0;
	}
	.tec07_bottom dd:last-child{
		width: 100%;
		max-width: 319px;
	}
	.tec07_bottom dd img{
		width: 100%;
		max-width: 321px;
		height: auto;
	}
	.tec07_bottom dd:last-child img{
		width: 100%;
		max-width: 319px;
		height: auto;
	}
	/*--  tec10
	---------------------------------------------------- */
	.technology_first_box.tec10_first .box_img{
		clear: both;
		overflow: hidden;
		margin: 0 calc((100% - 240px - 24px) / 2) 12px;
	}
	.technology_first_box.tec10_first .box_img figure{
		float: none;
		max-width: 240px;
		width: 100%;
		margin: 0 auto;
	}
	
	/*--  tec14
	---------------------------------------------------- */
	.technology_bottom_box.adj_img .tec14_img {
		display: inline-block;
		width: 100%;
		height: auto;
	}
	.technology_bottom_box.adj_img .tec14_img + .tec14_img {
		max-width: 230px;
	}
	
	.content_development {
		flex-direction: column;
		justify-content: center;
		margin-bottom: 32px;
	}


	.content_development .development_txt{
		width: 100%;
	}
	.circle_safety, .circle_productivity, .circle_costdown {
		width: 136px;
    height: 136px;
	}
	.development_diagram > dl::after {
		width: 180px;
		height: 180px;
		top: calc(50% - 70px);
		left: calc(50% - 90px);
	}
	.circle_safety > dt > a > img, .circle_costdown > dt > a > img {
		height: 16px;
	}
	.circle_safety > dd > a > img, .circle_productivity > dd > a > img, .circle_costdown > dd > a > img {
		width: 92px;
	}
	.circle_productivity > dt > a > img {
		height: 36px;
	}
	.circle_safety {
		margin: 0 75px;
	}
	.content_development .development_diagram {
		width: 286px;
		padding: 0 0px;
    margin: 0 auto;
	}

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

}