@charset "utf-8";
/*------------------------------------------------------

メインビジュアル

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

/* 背景動画とオーバーレイをまとめるコンテナ */
.mv-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* 動画のスタイル（セクション全体を覆うように配置） */
.mv-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* 視認性向上のためのオーバーレイ（半透明の黒など） */
.mv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2); 
}


.mv.hvon > *:not(.mv-bg) {
  position: relative;
  z-index: 2;
}
.mv{
	background:#000;
	padding:30px 20px;
	position: relative;
	overflow: hidden; /* 動画のはみ出しを防ぐ */
}
@media screen and (min-width: 769px) {
.mv-block{
	max-width:1250px;
	margin: 0 auto;
	padding:0px 0px 0px;
}

.mv .title,
.wltra_img{
	text-align:center;
	 filter: drop-shadow(5px 8px 8px #aaa);
	}
}

.wltra_inner{
	display:flex;
	gap:15px;
	flex-direction:column ;
	color:#fff;
}
@media screen and (min-width: 769px) {
.wltra_inner{
	gap:15px 30px;
	flex-direction:row ;
	margin:30px 0 0;
	justify-content:space-between;

	}
}

.wltra_inner dt{
	letter-spacing:8px;
	font-size:clamp(30px,3.5vw,50px);
	font-weight:700;
	line-height:1.3;
	margin:15px 0 20px;
	text-shadow:10px 10px 25px #333;
	text-align:center;
}
@media screen and (min-width: 769px) {
.wltra_inner dt{
	margin:30px 0 20px;
	text-align:left;
	}
}

.wltra_inner dt p{
	font-weight:700;
	line-height:1.1;
}

.wltra_inner dt span.tpnumber{
	letter-spacing:2px;
	font-size:clamp(35px,4.5vw,70px);
	color:#e85d0e;
}

.wltra_inner dt span.tptext{
	letter-spacing:2px;
	font-size:clamp(30px,3.5vw,50px);
	color:#e85d0e;
}

.wltra_inner dd{
	letter-spacing:2px;
	font-size:clamp(12px,2vw,16px);
	font-weight:500;
	line-height:1.6;
	margin:0 0 20px;
}
.wltra_inner .mvlbl{
	display:flex;
	gap:10px;
	flex-direction:row ;
}
.wltra_inner ul{
	margin:0px 0 0 ;
	display:flex;
	gap:5px 0;
	flex-direction: column ;
	font-size:clamp(12px,2vw,14px);
	letter-spacing:1px;
}
.wltra_inner ul li:before{
	content:"●";
	color:#e85d0e;
	padding:0 3px 0 0;
}
.mv_btn{
	text-align:center;
}

@media screen and (max-width: 768px) {
.pconly{
	display:none;
	}
.sponly{
	margin:30px 0 0;
	}
}

@media screen and (min-width: 769px) {
.mv_btn{
	text-align:left;
	margin:0 0 80px;
	}
.sponly{
	display:none;
	}
}

.btnarrow_mv{
	position: relative;
	background:#e85d0e url(../cmn/images/footer_icon/fb_icon01.png) no-repeat 5% 50%;
	background-size:15px;
	padding: 12px 40px 12px 40px;
	display: inline-block;
	text-align: center;
	transition: all .2s linear;
	color:#fff;
	text-decoration: none;
	border:transparent 2px solid;
	outline: none;
	font-size:clamp(15px,2vw,15px);
	font-weight:700;
	letter-spacing:2px;
	border-radius:100px;
}

@media screen and (min-width: 769px) {
.btnarrow_mv{
	width:auto;
	padding: 8px 40px 8px 40px; /* 左右のパディングを整えて矢印のスペースを確保 */
	}
}

/* 矢印の「横棒」部分 */
.btnarrow_mv::before{
	content:"";
	position: absolute;
	top: 50%;
	right: 18px;          /* ボタンの右端からの距離 */
	width: 10px;          /* 棒の長さ */
	height: 2px;          /* 棒の太さ */
	background: #fff;
	transform: translateY(-50%);
}

/* 矢印の「三角（先端）」部分 */
.btnarrow_mv::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 10px;          /* 棒の先端に続く位置調整 */
	border: 4px solid transparent;
	border-left-color: #fff; /* 右を向いた三角を作る */
	transform: translateY(-50%);
	transition: all .2s linear;
}
/*------------------------------------------------------

エアチャックが、ロボットの可能性を制限していませんか？

-------------------------------------------------------*/
.air-body{
	background:#faf6f3;
}
.aircheck{
	display:flex;
	gap:15px;
	flex-direction:column ;
	margin:0px 0 25px;

}
@media screen and (min-width: 769px) {
.aircheck{
	gap:15px;
	flex-direction:row ;
	justify-content:space-between;
	align-items:center;
	}
}

.aircheck dt{
	color:#00173a;
	letter-spacing:5px;
	font-size:clamp(30px,4.5vw,60px);
	font-weight:700;
	line-height:1.4;
	-webkit-text-stroke: 1px currentColor;
}
.aircheck_inner{
	display:flex;
	gap:10px;
	flex-direction:column ;
	color:#00162f;
}
@media screen and (min-width: 769px) {
.aircheck_inner{
	gap:20px;
	flex-direction:row;
	width:80%;
	margin: 0 auto;
	}
}

.aircheck_inner div{
	padding:20px;
	border:1px solid #ccc;
	border-radius:6px;
	letter-spacing:2px;
	background:#fff;
}
@media screen and (min-width: 769px) {
.aircheck_inner div{
	padding:20px 20px 40px;
	}
}

.aircheck_inner div dt{
	font-size:clamp(18px,3vw,26px);
	font-weight:700;
	margin:0 0 10px;
	display:flex;
	gap:0px 10px;
	flex-direction:row ;
	align-items:center;
	line-height:1.3;
	-webkit-text-stroke: .5px currentColor;
}
@media screen and (min-width: 769px) {
.aircheck_inner div dt{
	gap:10px;
	flex-direction:column;
	text-align:center;
	}
}

.aircheck_inner div dt span{
	margin:0px  ;
}
@media screen and (min-width: 769px) {
.aircheck_inner div dt span{
	margin:5px 0 ;
	}
}

.aircheck_inner div dd{
	font-size:clamp(13px,2vw,15px);
	font-weight:500;
}

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

現場が変わる 4つのメリット

-------------------------------------------------------*/
.merit-body{
	background:#fff;
}
.merit-inner_detail{
	color:#00173a;
	border:2px solid #00173a;
	padding:0 0px 0px 0px;
}
.merit-inner dl{
	background:#00173a;
	color:#fff;
	padding:8px 0 0px;
	text-align:center;
	letter-spacing:2px;
}
@media screen and (min-width: 769px) {
.merit-inner dl{
	padding:15px 0 0px;
	}
}

.merit-inner dt{
	font-size:clamp(15px,2vw,16px);
	margin:0 0 -10px;
}
@media screen and (min-width: 769px) {
.merit-inner dt{
	margin:0px 0 -22px;
	}
}


.merit-inner dd{
	font-size:clamp(40px,5vw,60px);
	font-weight:700;
}

.merit-text{
	font-size:clamp(18px,2vw,20px);
	margin: 0 auto;
	padding:23px 0;
	text-align:center;
	font-weight:500;
	letter-spacing:2px;
}


.merit-box{
	display:flex;
	gap:15px 0;
	flex-direction: column ;
	margin:0px auto 25px;
	width:90%;
}
@media screen and (min-width: 769px) {
.merit-box{
	flex-direction: row ;
	flex-wrap:wrap;
	gap:20px 15px ;
	}
}

.merit-box div{
	background:#f2f3f5;
	border-radius:8px;
	padding:20px;
}
@media screen and (min-width: 769px) {
.merit-box div{
	width:calc(50% - 10px);
	}
}
.merit-box figure{
	text-align:center;
	margin:20px auto;
	height:auto;
}
@media screen and (min-width: 769px) {
.merit-box figure{
	height:236px;
	}
}

.merit-title{
	font-size:clamp(22px,4vw,27px);
	font-weight: 700;
	letter-spacing:2px;
	padding-bottom: 15px;
	margin:0 0 20px;
	position:relative;
	text-align:center;
	-webkit-text-stroke: 0.7px currentColor;
}
.merit-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100px;
	left: 50%;
	transform: translateX(-50%);
	border-bottom: 3px dotted #ff6600; 
}
.merit-text_detail{
	font-size:clamp(15px,2vw,15px);
	margin: 0 auto;
	padding:0px 0 10px;
	letter-spacing:1px;
}


.merit-box span{
	display:block;
	background:#00173a;
	color:#fff;
	padding:8px ;
	text-align:center;
	letter-spacing:3px;
	font-size:clamp(16px,2vw,21px);
	font-weight:700;
	border-radius:5px;
	margin:0 auto;
	max-width:250px;
}
@media screen and (min-width: 769px) {
.merit-box span{
	max-width:350px;
	}
}
.merit-last_text{
	font-size:clamp(24px,3.5vw,40px);
	font-weight:700;
	letter-spacing:2px;
	text-align:center;
	padding:0px 10px 20px;
	-webkit-text-stroke: 0.7px currentColor;
	line-height:1.4;
}



@media screen and (min-width: 769px) {
.merit-last_text{
	padding:20px 10px 40px;
	}
}
@supports (-webkit-touch-callout: none) {
.merit-last_text{
	line-height:1.2;
	}
}
/*------------------------------------------------------

シーケンスシリンダ機構とは

-------------------------------------------------------*/
.white-style{
	color:#fff;
	-webkit-text-stroke: 0.7px currentColor;
	font-size:clamp(30px,3.8vw,55px)!important;
}
.sequence-body{
	background:#0c1117;
	color:#fff;
}
.sequence-list{
	display:flex;
	font-size:clamp(12px,2vw,13px);
	align-items:center;
	justify-content:space-between;
	margin:0 0 30px;
	color:#fff;
	letter-spacing:1px;
}
.sequence-list li:nth-child(1){
	font-size:clamp(14px,2vw,20px);
}
.sequence-list li:nth-child(2){
	border:1px solid #fff;
	padding:6px 15px;
	font-size:clamp(12px,2vw,15px);
}
.sequence_inner{
	display:flex;
	gap:30px 0;
	flex-direction: column ;
	margin:30px 0 0;
}
@media screen and (min-width: 769px) {
.sequence_inner{
	gap:25px ;
	flex-direction: row;
	margin:15px 0 0;
	}
.sequence_inner div{
	flex:1;
	}
}

.sequence-text{
	font-size:clamp(13px,2vw,15px);
	letter-spacing:2.5px;
	margin:0 0 20px;
}
.sequence_inner div{
	display:flex;
	gap:20px 0px;
	flex-direction: column ;
}

.sequence_inner div dl{
	display:flex;
	gap:30px 15px;
	flex-direction: row ;
	font-size:clamp(13px,2vw,15px);
	letter-spacing:2px;
	align-items:center;
}
.sequence_inner div dl dt{
	font-size:clamp(18px,2vw,22px);
	padding:15px 15px;
	width:30%;
	text-align:center;
	font-weight:700;
}
@media screen and (min-width: 769px) {
.sequence_inner div dl dt{
	width:auto;
	white-space: nowrap;
	}
}

.sequence_inner div dl dt span{
	display:block;
	font-size:clamp(11px,2vw,13px);
}
.sequence_inner div dl dd{
	width:70%;
	color:#fff;
}
@media screen and (min-width: 769px) {
.sequence_inner div dl dd{
	width:100%;
	color:#fff;
	}
}

.sequence-blue{
	color:#57a8d8;
}
.sequence-orange{
	color:#d4a576;
}
.sequence-blue dt{
	background:rgba(28,40,51,.6);
}
.sequence-orange dt{
	background:rgba(66,39,27,.6);
}

.sequence_inner video {
  display: block;
  width: 100%;      
  height: 250px;     
  object-fit: cover;
}
@media screen and (min-width: 769px) {
.sequence_inner video {
	height: 330px;
	}
}

.sequence_note {
	font-size: 0.8rem;
}

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

既存製品との比較

-------------------------------------------------------*/
.comparison_body{
	display:flex;
	gap:40px 0;
	flex-direction: column ;
	margin:20px 0 0;
}
.grip-lbl{
	font-size:clamp(18px,3vw,22px);
	font-weight:700;
	padding:15px 25px;
	color:#fff;
	letter-spacing:2.5px;
}
.grip-lbl span{
	display:block;
	font-size:clamp(14px,3vw,16px);
}
.grip-img_main{
	margin:25px auto ;
	text-align:center;
}
.grip-img_sub{
	margin:25px auto 0;
	text-align:center;
}
.grip-table{
	margin: 0px auto 0;
	background:#fff;
	color:#4d4d4d;
}
@media screen and (min-width: 769px) {
.grip-table{
	width:100%;
	max-width:960px;
	}
}

.grip-table .table-title{
	font-size:clamp(13px,2vw,18px);
	text-align:left;
	width:30%;
	padding-left:15px;
}
@media screen and (min-width: 769px) {
.grip-table .table-title{
	width:25%;
	}
}
.grip-table ul{
	display:flex;
	gap:0 5px;
	justify-content:space-between;
	align-items:center;
	flex-wrap:wrap;
}
@media screen and (min-width: 769px) {
.grip-table ul{
	flex-wrap:nowrap;
	}
}



.grip-table  .tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 2. ツールチップ本体のスタイル */
.tooltip-trigger .tooltip-box {
  position: absolute;
  bottom: 100%;
  left: 0%;
  transform: translateX(-5%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 10;
  pointer-events: none;
  background: #ffffff;
  padding: 0px;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.tooltip-trigger:hover .tooltip-box {
  opacity: 1;
  visibility: visible;
  transform: translateX(-5%) translateY(0); /* 通常時と同じ値で位置をキープ */
}

.tooltip-trigger .tooltip-box img {
  display: block;
  max-width: 312px;
  height: auto;
}

@media screen and (min-width: 769px) {
.tooltip-trigger .tooltip-box {
	left: 50%;
	transform: translateX(-50%) translateY(8px); /* センタリング ＋ 初期位置を少し下げる */
	}
.tooltip-trigger:hover .tooltip-box {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
	}
}
@media (hover: none) {
  .tooltip-trigger.touch-open .tooltip-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-5%) translateY(0) !important; /* スマホ用の通常時transformに合わせてください */
  }
}



.grip-table th,
.grip-table td{
	padding:8px 8px;
	font-size:clamp(13px,2vw,18px);
	text-align:center;
	border:1px solid #ccc;
}
@media screen and (min-width: 769px) {
.grip-table th,
.grip-table td{
	padding:14px 8px;
	}
}

.grip-table .table-green{
	color:#1b5e52;
	background:#e1eeeb;
	text-align:center;
	font-weight:700;
}
.grip-table .table-green-lbl{
	color:#fff;
	background:#1b5e52;
	width:38%;
}
.grip-table .table-blue{
	color:#2c5f8a;
	background:#e4eef5;
	text-align:center;
	font-weight:700;
}
.grip-table .table-blue-lbl{
	color:#fff;
	background:#2c5f8a;
	width:38%;
}
.grip-table sup{
	font-size:clamp(10px,2vw,11px);
}
.grip-table caption{
	caption-side:bottom;
	color:#fff;
	padding:12px 8px;
	font-size:clamp(13px,2vw,22px);
	text-align:center;
	letter-spacing:3px;
	font-weight:700;
	margin:20px 0 0;
	position: relative;
}
.grip-table .gl:before {
  content: "";
  position: absolute;
  top: -29px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #1b5e52;
}
@supports (-webkit-touch-callout: none) {
.grip-table .gl:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #1b5e52;
	}
}


.grip-table .bl:before {
  content: "";
  position: absolute;
  top: -29px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #2c5f8a;
}
@supports (-webkit-touch-callout: none) {
.grip-table .bl:before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-bottom: 15px solid #2c5f8a;
}
}


.grip-table caption span{
	font-size:clamp(20px,3vw,30px);
}
.green-style{background:#1b5e52;}
.blue-style{background:#2c5f8a;}

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

開き代の異なる2タイプから、ワークに最適な1台を選択

-------------------------------------------------------*/
.type-body{
	background:#1c2833;
}
.type-inner{
	background:#fff;
	padding:0 px 30px 0px;
}
.type-lbl_title{
	background:#2c5f8a;
	color:#fff;
	font-size:clamp(24px,3vw,30px);
	font-weight:700;
	padding:20px 15px;
	text-align:center;
	letter-spacing:3px;
	line-height:1.3;
}
@media screen and (min-width: 769px) {
.type-lbl_title{
	padding:25px 15px;
	}
}

.type-work_inner{
	display:flex;
	gap:50px 0;
	flex-direction: column ;
	margin:0px auto 0;
	width:90%;
}
@media screen and (min-width: 769px) {
.type-work_inner{
	gap:0px 30px;
	flex-direction: row ;
	width:90%;
	}
.type-work_detail figure{
	margin:30px 0 20px;
	}
}

.type-work_detail_box{
	background:#1f2124;
	color:#fff;
	padding:25px 18px;
	border-radius:8px;
	margin:10px 0 0 ;
}
@media screen and (min-width: 769px) {
.type-work_detail_box{
	padding:30px 35px;
	}
}
.type-work_detail_box .type-name dt{
	font-size:clamp(22px,3vw,25px);
	font-weight:700;
	letter-spacing:1px;
	padding-bottom: 15px;
	margin:0 0 20px;
	position:relative;
}
.type-work_detail_box .type-name dt::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0; 
	width: 100px; 
	border-bottom: 3px dotted #ff6600; 
}
.type-work_detail_box .type-name dd{
	font-size:clamp(14px,3vw,16px);
	font-weight:normal;
	letter-spacing:2px;
}
.type-work_detail_list{
	display:flex;
	gap:10px 0;
	flex-direction: column ;
	font-size:clamp(14px,3vw,16px);
	margin:20px 0 0;
	letter-spacing:1px;
}
.type-work_detail_list dl{
	display:flex;
	gap:20px;
	flex-direction: row ;
	justify-content:space-between;
	border-bottom:1px solid #ccc;
	padding:10px 0 15px;
}
.type-work_detail_list dd{
	font-weight:700;
}
.spty_d{
	margin:0 0 30px;
}
@media screen and (min-width: 769px) {
.spty_d{
	margin:0 0 30px;
	}
}

.type-work_detail_list .last-list{
	border-bottom:none;
	padding:10px 0 0px;
}

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

CHPS360 製品紹介動画

-------------------------------------------------------*/
.movie-body{
	background:#ece8dd;
}
.movie_inner{
	width:1100px;
	margin: 30px auto 0;
	max-width: 100%;

}


.movie_inner iframe {
  display: block;
  width: 100%;      
  height:250px;
  object-fit: cover;
  border-radius:8px;
}
@media screen and (min-width: 769px) {
.movie_inner iframe {
	height: 590px;
	}
}
/*------------------------------------------------------

導入後も、ずっと安心

-------------------------------------------------------*/
.peace_inner{
	display:flex;
	gap:10px;
	flex-direction: row ;
	flex-wrap:wrap;
	margin:30px 0 0;
	justify-content: center;
}
@media screen and (min-width: 769px) {
.peace_inner{
	gap:20px;
	}
}

@media screen and (max-width: 768px) {
.peace_inner{
	display:block;
	}
}

.peace_inner div{
	background:#f2f3f5;
	border-radius:5px;
	box-sizing: border-box;
	padding:12px 15px 24px;
	width: 96%;
	margin-bottom: 10px;
}
@media screen and (min-width: 769px) {
.peace_inner div{
	width: calc(50% - 10px);
	padding:15px 30px 24px;
	margin-bottom: 0px;
	}
}
.peace_inner div .peace_lbl{
	color:#e85d0e;
	font-size:clamp(24px,3vw,33px);
	letter-spacing:1px;
	font-weight:700;
	-webkit-text-stroke: .9px currentColor;
}
.peace_inner div dl{
	letter-spacing:1.5px;
	line-height:1.4;
	margin:10px 0 0px;
	color:#1c282e;
}
.peace_inner div dl dt{
	font-size:clamp(14px,3vw,20px);
	font-weight:700;
	margin:0px 0 8px;
	-webkit-text-stroke: .6px currentColor;

}
.peace_inner div dl dd{
	font-size:clamp(12px,3vw,14px);
	line-height:1.6;
}

.date_inner{
	display:flex;
	gap:10px;
	flex-direction: row ;
	margin:30px 0 0;
	flex-wrap:wrap;
}
@media screen and (min-width: 769px) {
.date_inner{
	gap:20px;
	flex-wrap:nowrap;
	}
}

.date_inner div{
	background:	#fdf7f1;
	border-radius:5px;
	box-sizing: border-box;
	padding:20px 15px ;
	width: calc(50% - 5px);
	border:2px solid #e85d0e;
	color:#00162f;
}
@media screen and (min-width: 769px) {
.date_inner div{
	padding:30px 15px ;
	width: calc(50% - 10px);
	}
}

.date_inner div dt{
	text-align:center;
	max-width:50%;
	margin: 0 auto;
}
.date_inner div dd{
	text-align:center;
	font-size:clamp(16px,3vw,18px);
	letter-spacing:1px;
	font-weight:700;
	padding:10px 0 ;
}
.date_inner .fw-box_btn{
	margin:5px auto 0;
	text-align:center;
}

.date_inner .btnarrow_date{
	position: relative;
	background:#e85d0e url(../images/date/dwicon.png) no-repeat 4% 50%;
	background-size:15px;
	padding: 5px 15px 5px 25px;
	display: inline-block;
	text-align: center;
	transition: all .2s linear;
	color:#fff;
	text-decoration: none;
	border:transparent 2px solid;
	outline: none;
	font-size:clamp(13px,2vw,16px);
	font-weight:700;
	letter-spacing:2px;
	border-radius:100px;
}
@media screen and (min-width: 769px) {
.date_inner .btnarrow_date{
	padding: 8px 40px 8px 50px;
	background:#e85d0e url(../images/date/dwicon.png) no-repeat 7% 50%;
	}
}