@charset "utf-8";


.sec-util-hytemp .hero__name{
	line-height: 1.25;
}
@media screen and (max-width: 767px) {
	.sec-util-hytemp .hero__name{
		margin-bottom: 10px;
	}
	.hero__lead{
		text-align: left;
	}
}
/* ======================================================

	ハイブリッド加工テンプレート

====================================================== */
.blk-hytemp{
	position: relative;
}
.blk-hytemp__text{
	width: 63%;
	margin-bottom: 2%;
	padding: 0 20px 0 40px;

	font-size: 2.6rem;
	font-weight: bold;
}
.blk-hytemp figure{
	position: absolute;
	top: 50%;
	right: 3%;
	width: 34%;
	transform: translateY(-50%);
	box-shadow: 2px 2px 5px 0 rgba(0,0,0,.3);
}
.blk-hytemp .p-check .p-check__list{
	margin-bottom: 0;
	width: calc( 590 / 920 * 100% );
	padding-right: 20px;
}
@media screen and (max-width: 767px) {
	.blk-hytemp__text{
		width: auto;
		margin-bottom: 20px;
		padding: 0 ;

		font-size: 1.8rem;
		text-align: left;
	}
	.blk-hytemp figure{
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		max-width: 560px;
		transform: none;
		margin: 0 auto;
	}
	.blk-hytemp .p-check .p-check__list{
		width: auto;
		padding-right: 0;
	}
}
/* ======================================================

	iTools

====================================================== */
.blk-itools{
	position: relative;
}
.blk-itools__text{
	width: 100%;
	margin-bottom: 3%;
	padding: 0 20px 0 0;
	text-align:center;
	font-size: 2.6rem;
	font-weight: bold;
}
.blk-itools figure{
	position: absolute;
	top: 0;
	right: 0;
	width: 57%;
	box-shadow: 2px 2px 5px 0 rgba(0,0,0,.3);
}
.blk-itools__text2-wrap{
	padding: 40px;
}
.blk-itools__text2-wrap{
	background-color: #ffffe6;
	font-size: 1.8rem;
}

.blk-itools .p-check,
.blk-itools .ito-ad{
	min-height:273px;
}

/* IE */
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
	.blk-itools .p-check,
	.blk-itools .ito-ad{
		height:275px;
	}
}

@media screen and (max-width: 767px) {
	.blk-itools .p-check,
	.blk-itools .ito-ad{
		min-height:auto;
	}
}



.blk-itools .p-check .p-check__list,
.blk-itools__text2{
	margin-bottom: 0;
	width: calc( 390 / 920 * 100% );
	padding-right: 20px;
}
@media screen and (max-width: 767px) {
	.blk-itools__text{
		width: auto;
		margin-bottom: 20px;
		padding: 0 ;

		font-size: 1.8rem;
		text-align: left;
	}
	.blk-itools figure{
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		max-width: 560px;
		transform: none;
		margin: 0 auto;
	}
	.blk-itools .p-check .p-check__list,
	.blk-itools__text2{
		width: auto;
		padding-right: 0;
	}
}
/* ======================================================

	iTools
	メリット

====================================================== */
.func3-merit .c-col-l{ width: 40%; }
.func3-merit .c-col-r{ width: 60%; }
@media screen and (max-width: 767px) {
	.func3-merit .c-col-l{ order: 2; }
	.func3-merit .c-col-r{ order: 1; }
}

.sec-itools__merit{
	position: relative;
	margin-top: -61px;
}
.sec-itools__merit::before{
	content: '';
    display: block;
    padding-top: 35.83%;
}
.sec-itools__merit figure:nth-child(1),
.sec-itools__merit figure:nth-child(2){
	position: absolute;
	width: calc(324 / 600 * 100%);
}
.sec-itools__merit figure:nth-child(1){ bottom: 0; left: 0; }
.sec-itools__merit figure:nth-child(2){ top: 0; right: 0; }

@media screen and (max-width: 767px) {
	.sec-itools__merit{
		margin-top: 0;
	}
	.sec-itools__merit::before{
		content: none;
	}
	.sec-itools__merit figure:nth-child(1){
		margin-bottom: 20px;
	}
	.sec-itools__merit figure:nth-child(1),
	.sec-itools__merit figure:nth-child(2){
		position: relative;
		width: auto;
		top: auto;
		left: auto;
		right: auto;
		bottom: auto;
	}
}
/* ======================================================

	機能説明

====================================================== */
.sec-util-hytemp .c-col-l{ width: 44%; }
.sec-util-hytemp .c-col-r{ width: 56%; }
.sec-util-hytemp .c-col-r figure{
	margin-top: -60px;
}
@media screen and (max-width: 767px) {
	.sec-util-hytemp .c-col-l{ order: 2; }
	.sec-util-hytemp .c-col-r{ order: 1; }
	.sec-util-hytemp .c-col-r figure{
		margin-top: 0;
	}
}
.sec-util--itools .c-col-l{ width: 40%; }
.sec-util--itools .c-col-r{ width: 60%; }
.sec-util--itools .c-col-r figure{
	/*margin-top: -60px;*/
}
@media screen and (max-width: 767px) {
	.sec-util--itools .c-col-l{ order: 2; }
	.sec-util--itools .c-col-r{ order: 1; }
	.sec-util--itools .c-col-r figure{
		margin-top: 0;
	}
}
.sec-util-hysort .c-col-l{ width: 62%; }
.sec-util-hysort .c-col-r{ width: 38%; }
.sec-util-hysort .c-col-r figure{
	margin-top: -20px;
}
@media screen and (max-width: 767px) {
	.sec-util-hysort .c-col-l{ order: 2; }
	.sec-util-hysort .c-col-r{ order: 1; }
	.sec-util-hysort .c-col-r figure{
		margin-top: 0;
	}
}
.sec-util-stroke .slider-ui{
	max-width: 670px;
	margin: 0 auto;
}

.func3{
	position: relative;
	margin-bottom: 30px;
}
.func3__name{
	padding: 0 0 0 25px;
	margin-bottom: 20px;
	background: linear-gradient(to right,  #004f73 0%,#3a7993 100%);

	font-size: 2.6rem;
	font-weight: 600;
	color: #ffffff;
}
.func3__list{
	padding-right: 1em;
}
.func3__list li{
	text-indent: -1em;
	padding-left: 1em;
}
.func3__list li:before{
	content: '●';
	color: #000000;
	font-size: 70%;
	margin: 0.25em;
}
.func3__fig--ex{
	margin-top: -20px;
}
@media screen and (max-width: 991px) {
	
}
@media screen and (max-width: 767px) {
	.func3__name{
		padding: 0 0 0 15px;
		font-size: 2.0rem;
	}
	.func3__fig{
		margin-bottom: 10px;
	}
}
/* ======================================================

	iTools バナー

====================================================== */
.ito-ad{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 40px;
	background-color: #ffffe6;
}
.ito-ad > p{
	font-size: 2.8rem;
	font-weight: bold;
	color: #295c98;
}
.ito-ad > div{
	padding-left: 40px;
	flex: 1 1 auto;
	text-align: center;
}
.ito-ad > div p:nth-child(1){
	display: inline-block;
	border-bottom: 1px solid #000000;

	font-size: 2.6rem;
	font-weight: bold;
}
.ito-ad > div p:nth-child(2){
	font-size: 3.9rem;
	font-weight: bold;
	white-space: nowrap;
	line-height: 1;
}
.txt-num{
	font-size: 7.8rem;
	color: #ff0000;
}
.txt-yen{
	font-size: 3.9rem;
}
@media screen and (max-width: 991px) {
	
	.ito-ad > p{ font-size: 2.2rem; }
	.ito-ad > div p:nth-child(1){ font-size: 2.0rem; }
	.ito-ad > div p:nth-child(2){ font-size: 3.0rem; }
	.txt-num{ font-size: 6.0rem; }
	.txt-yen{ font-size: 3.0rem; }

}
@media screen and (max-width: 767px) {
	.ito-ad{
		display: block;
		padding: 15px;
	}
	.ito-ad > p{
		margin-bottom: 0.5em;
		font-size: 1.8rem;
		text-align: center;
	}
	.ito-ad > div{
		padding-left: 0;
	}
	.ito-ad > div p:nth-child(1){ font-size: 1.2rem; }
	.ito-ad > div p:nth-child(2){ font-size: 2.0rem; }
	.txt-num{ font-size: 4.0rem; }
	.txt-yen{ font-size: 2.0rem; }
}
/* ======================================================

	iToolsご使用の流れ

====================================================== */
.ito-usage{
	display: flex;
	padding: 25px;
	background-color: #dce4ee;

	font-size: 1.8rem;
	font-weight: bold;
}
.ito-usage__item{
	width: 25%;
	padding: 0 15px;
}
.ito-usage__text{
	text-indent: -1em;
	padding-left: 1em;
	margin-bottom: 1em;
}
.ito-usage__item .box{
	position: relative;
	display: block;
	width: 100%;
	border-radius: 14px;
	color: #ffffff;
}
.ito-usage__item .box{
	background-color: #295c98;
	box-shadow: 2px 2px 7px 0 rgba(0,0,0,.3);
}
.ito-usage__item .box--white{
	background-color: #ffffff;
	color: #295c98;
}
.ito-usage__item .box::before{
	content:"";
    display: block;
}
.ito-usage__item .box::before{ padding-top: 100%; }
.ito-usage__item .box--white::before{ padding-top: 44.44%; }


.ito-usage__item .box .ito-usage__item-inner{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	padding: 10px;
	justify-content: center;
	align-items: center;
	text-align: center;
}

.iTools_logo{
	width:187px;
}

.ito-usage__item-inner .icon-arr3-r{
	font-size: 30px;
}
.ito-usage__item .txt-sm{
	padding: 0.25em 0 0.75em;
	font-size: 1.4rem;
	font-weight: normal;
	line-height:1.35;
}
.next{ position: relative; }
.next::before{
	position: absolute;
	display: block;
	content: '';
	width: 0;
	height: 0;
	top: 40px;
	right: -20px;
	border-style: solid;
	border-width: 14px 0 14px 12px;
	border-color: transparent transparent transparent #808080;
}
@media screen and (max-width: 767px) {
	.ito-usage__item .box::before{ padding-top: 0; }
	.ito-usage__item .box--white::before{ padding-top: 0; }
	.ito-usage__item .box .ito-usage__item-inner{
		position: relative;
	}
	.ito-usage__item-inner .icon-arr3-r{
		position: absolute;
		display: block;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
	}
	.next{
		padding-bottom: 30px;
	}
	.next::before{
		position: absolute;
		display: block;
		content: '';
		top: auto;
		bottom: 0;
		right: 50%;
		transform: translateX(50%);
		border-width: 12px 14px 0 14px;
		border-color: #808080 transparent transparent transparent;
	}
}
/********************************************************
	テキスト幅拡張
********************************************************/
.ito-usage__text-ex{
	position: relative;
	left: calc( -100% - 30px);
	margin-top: 10px;
	width: calc(200% + 30px);
	font-size: 1.4rem;
}
.ito-usage__text-ex .icon-mail2{
	font-size: 180%;
	vertical-align: middle;
}
@media screen and (max-width: 767px) {
	.ito-usage{
		display: block;
		padding: 10px;
	}
	.ito-usage__item{
		width: auto;
		padding: 0 0 15px 0;
	}
	.ito-usage__item > a,
	.ito-usage__item > span{
		padding: 10px 0;
		border-radius: 14px;
	}
	.ito-usage__item > a::before{ padding-top: 0; }
	.ito-usage__item > span::before{ padding-top: 0; }
	.ito-usage__item > a .ito-usage__item-inner,
	.ito-usage__item > span .ito-usage__item-inner{
		position: relative;
	}
	.ito-usage__text-ex{
		left: 0;
		width: auto;
	}
	.ito-usage__item img{
		max-width: 170px;
	}
}
/* ======================================================

	ページ内共通
	各メーカー対応PDF
	協力企業

====================================================== */
.pdf_block{
	width:100%;
	margin-bottom:50px;
}

.pdf_block ul{
	width:100%;
  justify-content: left;
  align-items: top;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.pdf_block ul li.title{
	position:relative;
	width:14%;
	background-color:#000;
}

.pdf_block ul li.title p{
	width:100%;
	text-align:center;
	color:#fff;
	font-size: 1.8rem;
	font-weight: bold;
	position: absolute;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


.pdf_block ul li.all_list{
	width:86%;
	background-color:#fff;
	padding:2% 0 1%;
}

.pdf_block ul li ul.pdf_list{
	width:97%;
	margin-left:3%;
  justify-content: left;
  align-items: top;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

.pdf_block ul li ul.pdf_list li{
	width:31%;
	margin-right:2.33%;
	margin-bottom:2%;
}

.pdf_block ul li ul.pdf_list li a{
	position: relative;
	display: block;
	height:55px;
	background-color: #9ce4d3;
	box-shadow: 0 4px 0 0 rgba(0,0,0,.3);
	font-weight: bold;
	color: inherit;
	text-align: left;
	line-height:1.5;
}

@media screen and (max-width: 991px) {
	.pdf_block ul li ul.pdf_list li a{
		font-size:1.8vw;
	}
}

.pdf_block ul li ul.pdf_list li a::before{
	position: absolute;
	display: block;
	content: '\e90a';
	font-size: 2.2rem;
	font-weight: bold;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	color: #999999;
}

.pdf_block ul li ul.pdf_list li a div{
	text-align: left;
	position:absolute;
	top: 50%;
	left: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	width:85%;

}

.pdf_block ul li ul.pdf_list li a div p{
	padding-left:50px;
}

.pdf_block ul li ul.pdf_list li a div:before {
	font-family: 'jbm' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
}

.pdf_block ul li ul.pdf_list li a div:before {
	content: "\e913";
	font-size:30px;
	vertical-align: -0.2em;
	line-height: 1;
	position:absolute;
	left:15px;
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

@media screen and (max-width: 767px) {
	.pdf_block ul li.title{
		width:100%;
	}

	.pdf_block ul li.title p{
		width:100%;
		position: relative;
	}

	.pdf_block ul li.all_list{
		width:100%;
		background-color:#fff;
		padding:4%;
	}

	.pdf_block ul li ul.pdf_list{
		width:100%;
		margin-left:0;
	}

	.pdf_block ul li ul.pdf_list li{
		width:100%;
		margin-right:0;
		margin-bottom:4%;
	}

	.pdf_block ul li ul.pdf_list li a{
		font-size: 1.8rem;
	}

	.pdf_block ul li ul.pdf_list li a::before{
		position: absolute;
		display: block;
		content: '\e90a';
		font-size: 2.2rem;
		font-weight: bold;
		top: 50%;
		right: 8px;
		transform: translateY(-50%);
		color: #999999;
	}

}


.blk-list__list a{
	position: relative;
	display: block;
	height:100px;
	background-color: #9ce4d3;
	box-shadow: 0 4px 0 0 rgba(0,0,0,.3);

	font-weight: bold;
	color: inherit;
	text-align: center;
}

.blk-list__list li a::before{
	position: absolute;
	display: block;
	content: '\e90a';
	font-size: 2.2rem;
	font-weight: bold;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	color: #999999;
}

.blk-list{
	display: flex;
	min-height: 166px;
}

.blk-list__l{
	width: 166px;
	background-color: #000000;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;

	font-size: 1.8rem;
	font-weight: bold;
	color: #ffffff;
}
.blk-list__r{
	padding: 16px 10px 0;
	flex: 1 1 auto;
	background-color: #ffffff;
}

.blk-list__list{
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	height: 166px;
	margin-left:10px;
  align-items: top;
}
.sec-util-itools .blk-list__list li{
	width: calc( 33.33% - 16px );
	flex: 0 1 calc( 33.33% - 16px );
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 16px;
}
.sec-util-manager .blk-list__list li{
	width: calc( 50% - 16px );
	flex: 0 1 calc( 50% - 16px );
}
.blk-list__list a{
	position: relative;
	display: block;
	padding: 10px 10px;
	background-color: #9ce4d3;
	box-shadow: 0 4px 0 0 rgba(0,0,0,.3);

	font-weight: bold;
	color: inherit;
	text-align: center;
}
.blk-list__list li a::before{
	position: absolute;
	display: block;
	content: '\e90a';
	font-size: 2.2rem;
	font-weight: bold;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	color: #999999;
}
.blk-list__list .icon-pdf{
	font-size: 30px;
	vertical-align: -0.2em;
	line-height: 1;
	display:block;
	position:absolute;
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	right:0;
}

.blk-list__list li div{
	display: inline-block;
	text-align: left;
	padding-right:0px;
	position:relative;
	max-width:200px;
background-color:#FF0000;
}

.blk-list__list li div:after {
	font-family: 'jbm' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
}

.blk-list__list li div:after {
	content: "\e913";
	font-size:30px;
	vertical-align: -0.2em;
	line-height: 1;
	position:absolute;
	right:-30px;
	top:50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

/*
.blk-list__list li p{
	float:left;
	width:calc(100% - 20px);
}
*/









@media screen and (max-width: 767px) {
	.blk-list{
		flex-wrap: wrap;
	}
	.blk-list__l{
		width: 100%;
		padding: 10px;
	}
	.blk-list__list{
		height: auto;
	}
	.blk-list__list li{
		width: calc(100% - 16px) !important;
		flex: 0 1 calc(100% - 16px) !important;
	}
}
/* ======================================================

	Slider

====================================================== */
.slider-ex{
	position: relative;
	width: 1000px;
	left: 50%;
	margin-left: -500px;
}
@media screen and (max-width: 767px) {
	.slider-ex{
		position: relative;
		width: auto;
		left: 0;
		margin-left: 0;
	}
}

.slider-ex2{
	position: relative;
	width:100%;
	max-width: 1000px;
	left: 0;
	margin-left: 0;
}

@media screen and (max-width: 767px) {
	.slider-ex2{
		position: relative;
		width: auto;
		left: 0;
		margin-left: 0;
	}
}
/* ======================================================

	Slider

====================================================== */
.c-slider{}
.c-slider__img{
	width: 100%;
	opacity: 0.5;
	transition: all 300ms ease;
}
.slick-slide {
	position: relative;
	/*margin: 0 20px;*/
	margin:0;
	background-color: #000000;
}
.slick-slide .caption{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	width: 100%;
	height: 152px;
	padding: 10px 20px 20px 20px;
	background: rgba(0, 0, 0, .6);
	
	opacity: 0;
	transition: .3s ease;

	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
.slick-slide .caption span{
	display: block;
	font-size: 1.2rem;
	text-align: left;
}
.slick-slide .caption span.txt-md{
	display: block;
	font-size: 1.4rem;
}
.slick-current .caption {
	opacity: 1;
	transition-delay: .5s;
}
@media screen and (max-width: 767px){
	.slick-slide {
		margin: 0;
	}
	.slick-slide .caption{
		height: 120px;
		font-size: 1.4rem;
	}
	.slick-slide .caption span{
		font-size: 1.0rem;
	}
	.slick-slide .caption span.txt-md{
		display: block;
		font-size: 1.2rem;
	}
}
/********************************************************
	スライダーUI
********************************************************/
.slider-ui{}
.slider-ui__thum,
.new_slider-ui__thum{
	position: relative;
	margin-bottom: 20px;
}
.slider-ui__thum span,
.new_slider-ui__thum span{
	position: relative;
	display: block;
	cursor: pointer;
}
.slider-ui__thum.active span::before,
.new_slider-ui__thum.active span::before{
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
	content: 'スライド\Aサムネール';
	width: 100%;
	height: 100.5%;
	background-color: rgba(0,0,0,.5);

	font-size: 1.8rem;
	font-weight: bold;
	color: #ffffff;
	vertical-align: middle;
	text-align: center;
	white-space: pre;
}
@media screen and (max-width: 767px){
	.slider-ui{
		display: none;
	}
}