@charset "utf-8";

/*RWD対応_CSSメディアクエリ変数切替版SPのみ 20230409*/

/* 下記、当ファイル以外のスタイルシートに移動する事 */
.serchBox_float {
	position:absolute;
	right:15px;
	top:15px;	
}

/* -----------------------------------------------------
* サイトの共通部分に適用させるCSS
* create: 20200623
* author: t.nakahori

*INDEX
* 1.xxx
* 2.xxx
	*xxx
	*xxx
* 3.xxx
	*xxx
	*xxx
----------------------------------------------------- */
/* メディアクエリテンプレ */

@media screen and (min-width:1300px) and (max-width:3000px){
	/* 1600px以上、3000px以下の記述 Surface(2736x1824)など高解像度デバイス */
}
@media screen and (min-width:980px) and (max-width:1299px){
	/* 980px以上、1299px以下の記述 一般的な範囲内のワイドディスプレイ */
}
@media screen and (max-width:979px) {
	/* 979px以下の記述 タブレット */
}
@media screen and (max-width:767px) {
	/* 767px以下の記述 スマートフォン */
}
@media screen and (max-width:479px) {
	/* 479px以下の記述 極小スマートフォン */
}
/*----------------------------------------------------- */


/* -----------------------------------------------------
サイト全体に関わる部分
 -----------------------------------------------------*/
.drawer-toggle.drawer-hamburger {display: none;}

@media screen and (min-width:1300px) and (max-width:3000px){
	/* 1600px以上、3000px以下の記述 Surface(2736x1824)など高解像度デバイス */
	.drawer-toggle.drawer-hamburger {display: none;}
	body.UltraWide,
  body.UltraWideHome {
		min-width:100%;
	}
  body.UltraWide .container,
  body.UltraWideHome .container {
		width:100%;
		margin-left: auto;
		margin-right: auto;
		padding:0;
	}
	body.UltraWide #main-content {
		float:none;
		width:100%;
	}
  body.UltraWide article,
  body.HyperWide article{
    /* UltraWideの時のみ（主に製品一覧）でコンテンツ部 余白 */
    padding: 10px 15px;
  }
	/* PC時NoSideMenuで980px決め打ちを解除する */
	body.NoSideMenu div#main-content {
		clear: both;
		width: 100%;
	}

}
@media screen and (min-width:980px) and (max-width:1299px){
	/* 980px以上、1299px以下の記述 一般的な範囲内のワイドディスプレイ */
	.drawer-toggle.drawer-hamburger {display: none;}
  
  /* UltraWideHome時のコンテンツ幅 カルーセルなどに影響 */
  body.UltraWideHome {
		min-width:100%;
	}
  body.UltraWideHome .container,
  body.HyperWide .container {
		width:100%;
		margin-left: auto;
		margin-right: auto;
		padding:0;
	}
   /* PC時NoSideMenuで980px決め打ちを解除する */
  body.NoSideMenu div#main-content {
    clear: both;
    width: 100%;
	}
}
@media screen and (max-width:979px) {
	/* 979px以下の記述 タブレット */
	body {
		min-width:100%;
	}
	.container {
		width:100%;
		margin-left: auto;
		margin-right: auto;
		padding:0;
	}
	/* PC時NoSideMenuで980px決め打ちを解除する */
	body.NoSideMenu div#main-content {
		clear: both;
		width: 100%;
	}
  /* タブレット以下でハンバーガーメニュー表示 */
	.drawer-toggle.drawer-hamburger {
		display: block;
		background:#005EB8;
		border: rgba(255, 255, 255, 1) solid 1px;
		padding:4px 10px 0px;
		text-align: center;
	}
	.drawer-toggle.drawer-hamburger span {
		display:block;
		color:#fff;
		margin-top:12px;
		font-size:.7rem;
		line-height: 1;
	}
	
  /* ロゴ、検索窓の位置調整 20230714 追加分 */
  header {
		min-width: 100%;
	}
  .headerlogo {
    float:none;
  }
  #SiteSearchHeader {
    float:none;
    width:95%;
    margin:5px auto;
    /*height:200px!important;*/
  }
  #SiteSearchHeader .fessWrapper .btn-primary {
    width:100px;
  }
  
  /* タブレット以下で、グロナビ・フッター非表示 */
  .nav_header,
	.nav_sidemenu,
	#footer_area1{
		display: none;
	}
	#footer_area2 {
		height: auto;
	}
	#footer_area2 .footerlogo {
		float: none;
		text-align: center;
		padding:5px 0 0;
	}
	#footer_area2 .copyright {
		/*float: none;
		text-align: center;
		padding:0;*/
	}
	#main-content {
		float:none;
		width:100%;
	}
  ul.icon_SCtype { 
		clear:both;
		margin:-1rem 0 0 0 ;
	}
  
  /* すべてのページでタブレット以下の時のコンテンツ部 余白 */
	article {
		padding:10px 15px;
  }
  /* テンプレートパワメータで bodyタグに設定しているものを対象にimg100%化 */
  /* figure タグ内のimgには効かない */
    /* 特定の親要素内のimgには影響を与えない */
  .products img:not(.no-resize),
  .company img:not(.no-resize),
  .topics img:not(.no-resize),
  .techinfo img:not(.no-resize) {
		width: 100%;
	}
}
@media screen and (max-width:767px) {
	/* 767px以下の記述 スマートフォン */
  
  /* span で囲んだテキストを改行 */
  span.RWD_newline {
    display: inline-block;
  }
  
	.nav_header,
	.nav_sidemenu,
	#footer_area1{
		display: none;
	}

  .sm-hidden {display:none}
}
@media screen and (max-width:479px) {
	/* 479px以下の記述 極小スマートフォン */
	.nav_header,
	/*#SiteSearchHeader,*/
	.nav_sidemenu,
	#footer_area1{
		display: none;
	}
  .xs-hidden {display:none}
}
/* -----------------------------------------------------
end of サイト全体に関わる部分
 -----------------------------------------------------*/

	
/* -----------------------------------------------------
トップページ・新着情報　の設定
トップ、タイプ別・用途別トップ　サムネイル product-list-F のレイアウト関連
 -----------------------------------------------------*/
@media screen and (min-width:1300px) and (max-width:3000px){
	/* 1600px以上、3000px以下の記述 Surface(2736x1824)など高解像度デバイス */
}
@media screen and (max-width:979px) {
	/* 979px以下の記述 タブレット */
	
  /* 新着余白調整1 */
  .top_whatsnew {
    padding:15px 0rem!important;
  }
}
@media screen and (max-width:767px) {
	/* 767px以下の記述 スマートフォン */
  
  /* 新着newsの折り返し */
  ul.whatsnew li,
  ul.top_whatsnew li{
    flex-flow: row wrap;
  }
  /* 新着タイトル */
  .news-title {
    width:100%!important;
  }
  /* トップページの製品サムネイル */
  .home .product-list-F ul img,
  .products .product-list-F ul img{
    width:100%;
  }
    /* 製品　用途別・タイプ別トップ */
  .product-list-F ul li,
  .product-list-F ul li.dummy{
    width:45%!important;
  }
  .product-list-F ul li .flipped {
    width:100%;
    aspect-ratio: 220 / 154; 
    /*aspect-ratio: 220 / 190; */
    background:#757170;
  }
}
@media screen and (max-width:479px) {
	/* 479px以下の記述 極小スマートフォン */

  /* 製品　用途別・タイプ別トップ */
  .product-list-F ul li.longtitle p.title{
    font-size:.75rem!important;
    line-height: 1.2;
  }
  .product-list-F ul li,
  .product-list-F ul li.dummy {
    width:48%;
    margin:0 0 10px!important;
  }
  .product-list-F ul li .flipped {
    aspect-ratio: 220 / 154!important;
  }
  .product-list-F ul li .flipped .intro {
    font-size:.85rem!important;
    line-height: 1.3!important;
    padding:8px 8px 0!important;
  } 
}
/* -----------------------------------------------------
enf of トップページ, タイプ別・用途別トップ
 -----------------------------------------------------*/


/* -----------------------------------------------------
$category $product
●カテゴリページ　●製品カテゴリトップ ●製品ページ 
●その他すべて
 -----------------------------------------------------*/
@media screen and (min-width:1300px) and (max-width:3000px){
	/* 1600px以上、3000px以下の記述 Surface(2736x1824)など高解像度デバイス */
	
		/* カテゴリトップビジュアル画像 PC時固定が、レスポンシブ時縮尺変わるのを修正 */
	.topImgLayerWrap p.pagetopImgBorderNone img {
		width: 100%;
		height: auto;
	}
  
  /* hispeed ビジュアル内ボタン */
  .topImgLayer_hispeed_text1 {
    font-size:1.8rem;
  }
  .topImgLayer_hispeed_text2 {
    font-size:1rem;
    top:80%;
  }
  /* airplane ビジュアル内ボタン  */
  .topImgLayer_air_text1 {
    font-size:1.8rem;
    top:57%;
  }
  .topImgLayer_air_text2 {
    font-size:1rem;
    top:72%;
  }

  
  /* 用途別 トップビジュアル時は、通常タイトル非表示 */
  body.p-appli h1.page-title {
    display:none;
  }
  

  /* 事業部紹介ビデオトップ*/
  #movie_index .nav_sidemenu {
    display:none;
  }
}
@media screen and (min-width:980px) and (max-width:1299px){
	/* 980px以上、1299px以下の記述 一般的な範囲内のワイドディスプレイ */

  /* 製品カテゴリトップ */
  /* 用途別 トップビジュアル時は、通常タイトル非表示 */
  body.p-appli h1.page-title {
    display:none;
  }
}
@media screen and (max-width:979px) {
	/* 979px以下の記述 タブレット */
	
  /* 個別製品ページ */
  /* 製品タイトル大きく */
  body.products h1.page-title {
    font-size: 2.5rem;
    /*line-height: 124%;*/
    font-weight: bold;
  }
  
  /* 製品カテゴリトップ */
  /* 用途別 トップビジュアル時は、通常タイトル非表示 */
  body.p-appli h1.page-title {
    display:none;
  }

  /* cat_ev トップビジュアル内 左右ボタン非表示*/
  .topImglayerEV2Text,
  .topImglayerEV3Text {
    width:30vh!important;
    /*height:10vh!important;    */
  }
  .topImgLayer_EV2_text2 ,
  .topImgLayer_EV3_text2 {
    display:none;
  }
  /* hispeed ビジュアル内ボタン */
  .topImgLayer_hispeed_text1 {
    font-size:1.2rem;
  }
  .topImgLayer_hispeed_text2 {
    font-size:.6rem;
    top:77.5%;
  }
  /* airplane ビジュアル内ボタン  */
  .topImgLayer_air_text1 {
    font-size:1.2rem;
  }
  .topImgLayer_air_text2 {
    font-size:.6rem;
    top:69%;
  }

  ul.pd-list-etc li.catalog img {
    width:130px!important;
  }
  ul.pd-list-etc li.etc_img_AFOP img {
    width:230px!important;
  }
  
	/*----------------------------------------------
  cat_mil..., cat_ind...のフィルター部分を右寄せ解除
  h1内の検索ボタン、フィルタボタンを 見出し外に配置する
  ----------------------------------------------*/
  #pd-sortlist .pd-sort-console-mil {
    display:block!important;
  }
  #pd-sortlist .pd-sort-console-mil ul.pd-sort_filter {
    width:100%;
    justify-content: space-around;
  }
  #pd-sortlist .pd-sort-console-mil ul.pd-sort_filter li.btn {
    /*width:16%;*/
    margin-bottom:10px!important;
  }
  #pd-sortlist .pd-sort-console-mil .pd-sort_input {
    width:100%;
    margin:5px auto 10px;
    text-align: center;
  }
  #pd-sortlist .pd-sort-console-mil .pd-sort_input input {
    width:95%;
  }

  
/* cat_cir..., cat_rec... */
  #pd-sortlist .pd-sort-console-type {
    display:block!important;
    
  }
  #pd-sortlist .pd-sort-console-type ul.pd-sort_filter {
    position:static;
  }
  #pd-sortlist .pd-sort-console-type ul.pd-sort_filter li.btn {
    width:30%;
    margin-bottom:10px;
  }
  #pd-sortlist .pd-sort-console-type .pd-sort_input {
    position:static;
    width:100%;
    margin:5px auto 20px;
    text-align: center;
  }
  #pd-sortlist .pd-sort-console-type .pd-sort_input input {
    width:95%;
  }
  
  
  
/* cat_air , 12G-SDI_BNC.htmlなど*/
  #pd-sortlist .pd-sort-console input {
		position:static;
		width:100%;
		margin:0 auto 30px;
		padding:5px!important;
	}
  #pd-sortlist .pd-sort-console ul.pd-sort_filter {
		position:static;
		/*display:flex;
		flex-direction: row;
		flex-wrap:wrap;
		justify-content: space-around; */
		width:100%;
		padding:0;
	}
	#pd-sortlist .pd-sort-console ul.pd-sort_filter li {
		width:28%;
	}
	#pd-sortlist .pd-sort-console ul.pd-sort_filter .btn {
    margin-bottom:10px!important;
  }

  
  
	/* カタログページ　見出し内フィルターボタン フロート解除 */
  /* cat_all_products_search.html */
	#catalog-sortlist .serchBox {
		position:static!important;
	}
	
  /* カタログページ　ポップアップ画面調整 */
  .mw-CTwrap {}
  .mw-CTwrap .modal-wrapper .modal-window {
    min-width: 70%!important;
    min-height: 25%!important;
    padding:10px!important;
    margin:0px!important;
  }
  /*.mw-CTwrap .modal-wrapper .modal-window .modal-content */
  .mw-CTwrap .modal-wrapper .modal-content {}
  .mw-CTimage  {
    display:none!important;
  }
  .mw-CTtext {
/*    clear:both;*/
    width:100%!important;
  }
  .mw-CTtitle {}
  .mw-CTsummary {}
      
	/* カテゴリトップビジュアル画像 PC時固定が、レスポンシブ時縮尺変わるのを修正 */
	.topImgLayerWrap p.pagetopImgBorderNone img {
		width: 100%;
		height: auto;
	}
	/* 上のように記述するか、スクリプト内のclass=topvisual ev4" tと追記するかどちらか */
	/*.topImgLayerWrap img.topvisual {
		width: 100%;
		height: auto;
	}*/
  
  /* 製品ページ内 動画 横並びを解除する*/
  /* youtube タブレット以下で幅100% */
  /*参考コード https://blanche-toile.com/web/css-aspect-ratio */
  .movie-wrap div,
  .youtube_wrap {
    float: none;
    width:100%!important;
    aspect-ratio: 16 / 9;
    margin-bottom:10px;
  }
  .movie-wrap iframe.movie-width,
  .movie-wrap div.movie-width,
  .youtube_wrap iframe /*youtube別画像版*/,
  .youtube_wrap video /*mp4動画*/ {
    width:100%;
    height:100%;
  }
  /*youtube別画像版*/
  .youtube {
    width:100%!important;
    height: 100%!important;
  }
  .youtube .thumb {
    width:100%!important;
    height: 100%!important;
  }
  
  /* 事業部紹介ビデオトップ */  
  ul.list_division_movie li {
    width:46%;
    margin:1% 2%;
    }
  ul.list_division_movie li img {
    width:100%;
    height:auto;
  }
  
  /* 在庫検索ページ */
  .inventory_form_input {
  	float:none;
    width:93%;
    padding: 10px 8px;
  }
  .inventory_form_input input#txtSearch {
    width:90%;
    margin:5px 0;
  }
  


}
@media screen and (max-width:767px) {
	/* 767px以下の記述 スマートフォン */
  
  /* カタログページ */
  ul.catalog-list-wide li {
    width:45%;
    height:auto;
    margin:25px 0;
  }

  /* 製品カテゴリトップ */
  
  /* 用途別
  　トップビジュアル非表示時
  　通常タイトル表示 */
  body.p-appli h1.page-title {
    /*display:block;*/
    display: none;
  }
  .topImgLayerWrap {
    display:none;
  }

  /* airplane, industrial */
  .pd-sort-console2 {
    text-align: center;
  }
  .pd-sort-console2 input {
    position:static;
    width:95%;
    margin:0!important;
  }

/* 製品カテゴリ サムネイル ２列表示など*/
  ul.pd-list {
    grid-template-columns: repeat(auto-fill, 46%);
  }
  ul.pd-list li,
  ul.pd-list li.pdl_dummy,
  ul.pd-list li.simple_thm_text {
    /*width:45%;*//*displya:flexの時*/
    width:100%;/* pd-list auto-fill,xxxで設定した幅のうちの割合 */
  }
  ul.pd-list li p.thumbnailImg,
  ul.pd-list li.simple_thm_text p.simple_thm_Img {
    width:100%;
    /*aspect-ratio: 4 / 1;  */
  }
  ul.pd-list li p.thumbnail_title,
  ul.pd-list li p.thumbnail_title_2line,
  ul.pd-list li p.thumbnail_title_3line,
  ul.pd-list li.simple_thm_text p.simple_thm_ttl,
  ul.pd-list li.simple_thm_text p.simple_thm_subttl {
    width:100%;
  }

 /* ul.pd-list li.simple_thm_text a {
	display: inline-block;
	background:#0070C0;
	width:210px;
  height:155px;
}*/
  
  /* 事業部紹介ビデオトップ */  
  ul.list_division_movie li {
    width:100%;
    height:auto;
    margin:1% 0;
    }
  
  /* お問い合わせ */
  .list-contact-btn a{
    text-align: center;
    margin:0px 10px 25px!important;
  }
  .list-contact-btn2023  {
    width:97%;
    margin:0 auto;
  }
  .list-contact-btn2023 li a{
    width:100%;
    margin:20px 0;
    text-align: center;
    padding:1.5rem 0rem;    
  }
  
  /* リンクボタン */
  .link-dlfile,
  .link-topage{
    margin:8px 8px;
  }
  .link-searchUrl {
    width: calc(100% - 50px)!important;
    /* padding=16x2 + border=1x2 + margin=8x2  */
    margin:0 8px;
    /*box-shadow:none;*/
  }

  
}
@media screen and (max-width:479px) {
	/* 479px以下の記述 極小スマートフォン */
	#pd-sortlist .pd-sort-console ul.pd-sort_filter {
		flex-direction: column;
		justify-content:space-around; 
	}
	#pd-sortlist .pd-sort-console ul.filter li {
		width:95%;
	}
	#pd-sortlist .pd-sort-console ul.filter .btn {}
  #pd-sortlist .pd-sort-console input {
   /* width:98%;*/
  }
  
 /* 技術トップ 主な・・・サムネイル ２列化 */ 
  .list-normal-OftenUsed {
    margin:20px 0px 5px!important;
    padding:0!important;
  }
  .list-normal-OftenUsed li {
    width:48%!important;
  }
  .list-normal-OftenUsed li a {
    width:100%!important;
  }
}
/* -----------------------------------------------------
end of ●カテゴリページ　●製品カテゴリトップ ●製品ページ
 -----------------------------------------------------*/

/* -------------------------------------------*/
/* スマホ用メニュー　ドロワーナビ スタイル */
/* -------------------------------------------*/
.drawer-nav {
	background:#005eb8!important;
	overflow-y: scroll!important;
}
/* ハンバーガーボタン 3本線の実体*/
.drawer-hamburger-icon,
.drawer-hamburger-icon:after,
.drawer-hamburger-icon:before {
	width: 100%;
	height: 2px;
	-webkit-transition: all .6s cubic-bezier(.19,1,.22,1);
	transition: all .6s cubic-bezier(.19,1,.22,1);
	/*background-color: #fff!important;
	ここで色を変更しても全ページで反映しないので、drawer.min.cssを直接変更した*/
}
ul.drawer-menu li{}
ul.drawer-menu li a {
	margin:0;
	padding:0;
	color:#fff;
}
ul.drawer-menu li a.drawer-brand  {
	font-weight: normal;
	font-size:1.2rem;
	margin:0;
	padding:0 .5rem;
	line-height:1.6;
}
ul.drawer-menu li.lv2 a.drawer-menu-item {
	padding:3px 0 3px 1rem;
	font-size:.9rem;
}
ul.drawer-menu li.lv3 a.drawer-menu-item {
	padding:3px 0 3px 2rem;
	font-size:.9rem;
}
ul.drawer-menu li.lv2 a:hover,
ul.drawer-menu li.lv3 a:hover {
	color:#31AED2;
}

.drawer .drawer-nav {
	background:rgba(110,175,174,0.95);
}
.drawer .drawer-nav .drawer-menu {
	margin:0;
	padding:0;
}
.drawer .drawer-nav .drawer-menu li {
	position:relative;
	padding:.2rem .4rem;
	border-top:	1px dashed #2980B9;
}
.drawer .drawer-nav .drawer-menu li a:hover {
	color:#fff;
	background:rgba(17,122,218,1);
	text-decoration: none;
}
.drawer-open .drawer-hamburger {
	background:#005eb8;
  border: rgba(255, 255, 255, 1) solid 1px;
}
.drawer-open .drawer-hamburger:hover {
  border: rgba(255, 255, 255, 1) solid 1px !important;
	background:rgba(17,122,218,1);
}
.drawer-open .drawer-nav .drawer-menu li a {
  color: #fff;
}
/* -------------------------------------------*/
/* end of スマホ用メニュー　ドロワーナビ スタイル */
/* -------------------------------------------*/