@charset "UTF-8";
/* CSS Document */

/*--------------------------------------------------------
　PC
--------------------------------------------------------*/

@media print, screen and (min-width: 961px){

	section.shotpeening div.fl_block{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}

	section.shotpeening div.text_block{
		width: 48%;
	}
	
	section.shotpeening div.text_block h2{
		margin-bottom: 1.5em;
	}

	section.shotpeening div.img_block{
		width: 45%;
		margin-top: 4vw;
		margin-top: 4cqw;
	}

	section.shotpeening div.text_block p,
	section.process_management div.management_item p,
	section.quality_management div.quality_list p{
		font-size: 1.6rem;
		font-size: clamp(calc((1.6rem * 0.739)), 1.23vw, 1.6rem);
		line-height: 1.8;
		letter-spacing: 0.04em;
	}

	section.shotpeening div.img_block figure{
		line-height: 0;
	}

	section.portfolio div.block ul{
		display: flex;
		justify-content: space-between;
	}

	section.portfolio div.block li{
		width: 31%;
	}

	section.portfolio div.photo,
	section.process_management div.photo,
	section.quality_management div.photo{
		border-radius: 3px;
		overflow: hidden;
		line-height: 0;
	}

	section.portfolio figcaption,
	section.effects figcaption,
	section.process_management figcaption,
	section.quality_management figcaption{
		font-size: 1.4rem;
		font-size: clamp(calc((1.4rem * 0.739)), 1.07vw, 1.4rem);
		line-height: 1.4;
		margin-top: 0.6em;
	}

	section.portfolio figcaption::before,
	section.effects figcaption::before,
	section.process_management figcaption::before,
	section.quality_management figcaption::before{
		content: "□ ";
	}

	section.effects{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding-top: 50px;
	}

	section.effects div.effect_block{
		width: 47%;
	}

	section.effects div.effect_block h2{
		font-size: 2rem;
		font-size: clamp(calc((2rem * 0.739)), 1.53vw, 2rem);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.04em;
		color: #333;
		display: flex;
		align-items: center;
		margin-bottom: 0.4em;
	}

	section.effects div.effect_block h2::before{
		display: none;
	}

	section.effects div.effect_block h2 span{
		font-size: 70%;
		font-weight: 500;
		line-height: 1;
		color: #FFF;
		background: #333;
		border-radius: 1em;
		padding: 0.45em 0.8em;
		margin-right: 0.75em;
	}

	section.effects div.residual > p{
		font-size: 1.6rem;
		font-size: clamp(calc((1.6rem * 0.739)), 1.23vw, 1.6rem);
		line-height: 1.5;
		margin-bottom: 1em;
	}

	section.effects figure.graph{
		line-height: 0;
		position: relative;
	}

	section.effects figure.graph img.graph_info{
		width: 30%;
		position: absolute;
		top: -30%;
		right: 0;
	}

	section.effects div.comparison{
		display: flex;
		justify-content: space-between;
		margin-top: 1.7vw;
		margin-top: 1.7cqw;
	}

	section.effects div.comparison figure{
		width: 48%;
	}

	section.effects div.comparison div.photo{
		line-height: 0;
	}

	section.process_management div.management_item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2.5vw 0;
		padding: 2.5cqw 0;
		border-bottom: 1px solid #e5e5e5;
	}
	
	section.process_management div.management_item:first-of-type{
		padding-top: 0;
	}

	section.process_management div.management_item:last-child{
		padding-bottom: 0;
		border-bottom: 0;
	}

	section.process_management div.management_item div.text_block{
		width: 49%;
	}
	
	section.process_management div.management_item:last-child div.text_block{
		width: 73.8%;
	}

	section.process_management div.management_item div.photo_list{
		width: 47%;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	
	section.process_management div.management_item:last-child div.photo_list{	
		width: 22.8%;
	}

	section.process_management div.photo_list figure{
		width: 48%;
	}
	
	section.process_management div.management_item:last-child div.photo_list figure{
		width: 100%;
	}

	section.process_management div.photo_list.single{
		justify-content: flex-end;
	}

	section.process_management div.photo_list.single figure{
		width: 48%;
	}

	section.process_management div.management_item h3,
	section.quality_management div.quality_list h3{
		font-size: 1.8rem;
		font-size: clamp(calc((1.8rem * 0.739)), 1.38vw, 1.8rem);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0.04em;
		color: #333;
		display: flex;
		align-items: center;
		background: none;
		padding: 0;
		margin-bottom: 1em;
	}

	section.process_management div.management_item h3 span,
	section.quality_management div.quality_list h3 span{
		font-size: 70%;
		font-weight: 500;
		line-height: 1;
		color: #FFF;
		background: #333;
		border-radius: 3px;
		padding: 0.4em 0.6em;
		margin-right: 0.8em;
	}

	section.quality_management div.quality_list{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 2vw;
		margin-top: 2cqw;
	}

	section.quality_management div.quality_list > section:first-child{
		width: 42%;
		border-right: 1px solid #e5e5e5;
		position: relative;
	}
	
	section.quality_management div.quality_list > section:first-child p.speech{
		width: 14%;
		line-height: 0;
		position: absolute;
		top: 13%;
		right: 20%;
	}

	section.quality_management div.quality_list > section:last-child{
		width: 50%;
	}

	section.quality_management div.quality_list > section:first-child figure{
		width: 58%;
		position: relative;
	}
	
	section.quality_management div.quality_list > section:first-child figure figcaption {
		position: absolute;
		bottom: 0;
		right: -8em;
	}

	section.quality_management div.quality_list > section:last-child figure{
		width: 55%;
		margin: 6vw 0 0;
		margin: 6cqw 0 0;
		position: relative;
	}
	
	section.quality_management div.quality_list > section:last-child figure figcaption {
		position: absolute;
		bottom: 0;
		right: -4em;
	}
}


/*--------------------------------------------------------
　SP
--------------------------------------------------------*/

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

	section.shotpeening div.fl_block{
		display: flex;
		flex-direction: column;
	}

	section.shotpeening div.text_block,
	section.shotpeening div.img_block{
		width: 100%;
	}

	section.shotpeening div.text_block p,
	section.process_management div.management_item p,
	section.quality_management div.quality_list p{
		font-size: calc(3.4rem * 0.375);
		font-size: clamp(calc((3.4rem * 0.375)), 3.54vw, 3.4rem);
		line-height: 1.8;
		letter-spacing: 0.06em;
	}

	section.shotpeening div.img_block{
		margin-top: 10vw;
	}

	section.shotpeening div.img_block figure{
		line-height: 0;
	}

	section.portfolio div.block ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	section.portfolio div.block li{
		width: 46%;
	}

	section.portfolio div.block li:nth-child(n + 3){
		margin-top: 6vw;
	}

	section.portfolio div.photo,
	section.process_management div.photo,
	section.quality_management div.photo{
		border-radius: 1vw;
		overflow: hidden;
		line-height: 0;
	}

	section.portfolio figcaption,
	section.effects figcaption,
	section.process_management figcaption,
	section.quality_management figcaption{
		font-size: calc(3rem * 0.375);
		font-size: clamp(calc((3rem * 0.375)), 3.12vw, 3rem);
		line-height: 1.4;
		text-indent: -1.25em;
		padding-left: 1.25em;
		margin-top: 0.6em;
	}

	section.portfolio figcaption::before,
	section.effects figcaption::before,
	section.process_management figcaption::before,
	section.quality_management figcaption::before{
		content: "□ ";
	}

	section.effects div.effect_block + div.effect_block{
		margin-top: 14vw;
	}

	section.effects div.effect_block h2{
		min-height: 0;
		font-size: calc(4rem * 0.375);
		font-size: clamp(calc((4rem * 0.375)), 4.16vw, 4rem);
		font-weight: 500;
		line-height: 1.4;
		letter-spacing: 0.04em;
		color: #333;
		display: flex;
		align-items: center;
		margin-bottom: 0.6em;
		padding-left: 0;
	}

	section.effects div.effect_block h2::before{
		display: none;
	}

	section.effects div.effect_block h2 span{
		font-size: 70%;
		font-weight: 500;
		line-height: 1;
		color: #FFF;
		background: #333;
		border-radius: 1em;
		padding: 0.45em 0.8em;
		margin-right: 0.75em;
	}

	section.effects div.residual > p{
		font-size: calc(3.2rem * 0.375);
		font-size: clamp(calc((3.2rem * 0.375)), 3.33vw, 3.2rem);
		line-height: 1.5;
		margin-bottom: 3vw;
	}

	section.effects figure.graph{
		line-height: 0;
		position: relative;
		padding-top: 18%;
	}

	section.effects figure.graph img.graph_info{
		width: 31%;
		position: absolute;
		top: 0;
		left: 11%;
	}

	section.effects div.comparison{
		display: flex;
		justify-content: space-between;
		margin-top: 5vw;
	}

	section.effects div.comparison figure{
		width: 47%;
	}

	section.effects div.comparison div.photo{
		line-height: 0;
	}

	section.process_management div.management_item{
		padding: 10vw 0;
		border-bottom: 1px solid #e5e5e5;
	}

	section.process_management div.management_item:last-child{
		padding-bottom: 0;
		border-bottom: 0;
	}

	section.process_management div.management_item:first-of-type{
		padding-top: 3vw;
	}

	section.process_management div.management_item h3,
	section.quality_management div.quality_list h3{
		font-size: calc(4rem * 0.375);
		font-size: clamp(calc((4rem * 0.375)), 4.16vw, 4rem);
		font-weight: 500;
		line-height: 1.5;
		letter-spacing: 0.04em;
		color: #333;
		display: flex;
		align-items: center;
		background: none;
		padding: 0;
		margin-bottom: 1em;
	}

	section.process_management div.management_item h3 span,
	section.quality_management div.quality_list h3 span{
		font-size: 70%;
		font-weight: 500;
		line-height: 1;
		color: #FFF;
		background: #333;
		border-radius: 0.6vw;
		padding: 0.4em 0.6em;
		margin-right: 0.8em;
	}

	section.process_management div.photo_list{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-top: 7vw;
	}

	section.process_management div.photo_list figure{
		width: 47%;
	}

	section.process_management div.photo_list.single figure{
		width: 47%;
	}

	section.quality_management div.quality_list > section + section{
		margin-top: 14vw;
	}
	
	section.quality_management div.quality_list > section:first-child{
		position: relative;
	}
	
	section.quality_management div.quality_list > section:first-child p.speech{
		width: 16%;
		line-height: 0;
		position: absolute;
		top: 15%;
		right: 10%;
	}

	section.quality_management div.quality_list > section:first-child figure{
		width: 62%;
		margin: 6vw 0 0 10%;
	}

	section.quality_management div.quality_list > section:last-child figure{
		width: 82%;
		margin: 7vw auto 0;
	}
}