@charset "utf-8";



/*リセットCSS（sanitize.css）の読み込み
---------------------------------------------------------------------------*/
@import url("https://unpkg.com/sanitize.css");

/*Font Awesomeの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css");

/*lightbox.cssの読み込み
---------------------------------------------------------------------------*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css);

/*slick.cssの読み込み
---------------------------------------------------------------------------*/
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");

/*テンプレート専用cssファイルの読み込み
---------------------------------------------------------------------------*/
@import url("animation.css");



/*全体の設定
---------------------------------------------------------------------------*/
html,body {
	height: 100%;
}

body {
	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo , "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	/*フォント種類（ゴシック）*/
	-webkit-text-size-adjust: none;
	/*background: #fafafa;	/*背景色*/
	color: #000;		/*文字色 元#777*/
	line-height: 2;		/*行間*/
	animation: opa1 0.3s 0.5s both;	/*0.5秒の間だけ非表示にし、その後0.3秒かけてフェードイン表示。上部のメインメニューのデフォルトが一瞬見えてしまうのを回避する為の応急措置です。*/
	background: #fff; /*背景色 元#eee*/
	font-size: 20px;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav {
	margin: 15px 0 0 0;
	padding: 0;
}

hr {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
.main_video {
	/*天地中央配置*/
	/*width: 100%;
	height: 100%;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
	display: block;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
    /*縦横幅指定*/
    /*width: 177.77777778vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
    /*height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
    /*min-height: 100vh;
    min-width: 100%;*/
	z-index: -1;
	/*filter: grayscale(100);*/
}

.main-area {
  position: relative;
  width: 100%;
  height: 100vh;
  z-index: -5;
} 

/*.main-area:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
}*/

.main-area p {
  font-family: serif;
  color: #fff;
  font-size: 3.5em;
  letter-spacing: 0.3em;
  position: absolute;
  left: 12%;
  top: 20%;
  z-index: 1;
  animation: 0.4s fadeintxt 3.5s linear forwards;
  opacity: 0;
}

@keyframes fadeintxt {
	0% {
		bottom: 20px;
  }
	100% {
		bottom: 30px;
		opacity: 1;
  }
}

.video-wrap {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/*
.video-wrap:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  background-image: radial-gradient(black 20%, transparent 20%),
    radial-gradient(black 20%, transparent 20%);
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}*/

.main_video {
  position: absolute;
}

/*

.video-wrap {
	position: fixed;
    z-index: -1;/*最背面に設定
    top:0;
    right:0;
    left:0;
    bottom:0;
    overflow: hidden;
	width: 100vw;
	height: 100vh;
}

.video-wrap::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.5);
	background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
}

*/

/*.overlay {
	height: 100vh;
	background: linear-gradient(-45deg, rgba(4, 114, 124, 0.4),rgba(17, 66, 99, 0.6));
}*/

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}

/*スクロールダウン全体の場所*/
.scrolldown1{
    /*描画位置※位置は適宜調整してください*/
	position: fixed;
	left: 50%;
	bottom: 10px;
    /*全体の高さ*/
	height: 50px;
	z-index: 1;
}

/*Scrollテキストの描写*/
.scrolldown1 span{
    /*描画位置*/
	position: absolute;
	left:-15px;
	top: -15px;
    /*テキストの形状*/
	color: #fff;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/* 線の描写 */
.scrolldown1::after{
	content: "";
    /*描画位置*/
	position: absolute;
	top: 0;
    /*線の形状*/
	width: 1px;
	height: 30px;
	background: #fff;
    /*線の動き1.4秒かけて動く。永遠にループ*/
	animation: pathmove 1.4s ease-in-out infinite;
	opacity:0;
}

/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
	0%{
		height: 0;
		top: 0;
		opacity: 0;
	}
	30%{
		height:30px;
		opacity: 1;
	}
	100%{
		height: 0;
		top: 50px;
		opacity: 0;
	}
}

#title_facility {
	background-image: url("../images/IMG-9185.jpg");
}

.title-common {
	margin: 120px auto 0;	/*コンテンツ内の余白*/
	font-family: serif;
}

h2 {
	background-size: cover;
	background-position: center;/* 画像を常に天地左右の中央に配置 */
 	background-repeat: no-repeat;/* 画像をタイル状に繰り返し表示しない */
	color: #FFFFFF;
	font-size: 3.5rem;
	text-align: center;
	line-height: 400px;
	letter-spacing: 0.5em;
	margin: 0 calc(50% - 50vw);
}
.h2-1 {
	background-size: cover;
	background-position: center;/* 画像を常に天地左右の中央に配置 */
 	background-repeat: no-repeat;/* 画像をタイル状に繰り返し表示しない */
	color: #000000;
	font-size: 3.5rem;
	text-align: center;
	line-height: 400px;
	letter-spacing: 0.5em;
	margin: 0 calc(50% - 50vw);
}


/*画面幅1000px以下の追加指定*/
	@media screen and (max-width:1000px) {

	/*ヘッダーブロック*/
		h2 {
			line-height: 250px;
		}

	}/*追加指定ここまで*/

	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {

	/*ヘッダーブロック*/
		h2 {
			font-size: 2.5rem;
		}

	}/*追加指定ここまで*/

	@media screen and (max-width:700px) {
		#quality {
			display: inline-block;
		}
	}





#title_about, #title_recruit {
	background-image: url("../images/DJI_0278-top.jpg");
	object-fit: cover;
	object-position: 0 0;
	background-position-y: 25%;
}

#title_factory {
	background-image: url(../images/IMG_1169.JPG);
}
/*
#title_recruit {
	background-image: url(../images/29748963_m.jpg);
}

/* Loading背景画面設定　*/
#splash {
  /*fixedで全面に固定*/
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	background: #C4E7AB;/*7ac943*/
	text-align: center;
	color: #fff;
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
    display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
    display: block;
    content: "";
    position:fixed;
	z-index: 999;
    width: 100%;
    height: 100vh;
    top: 0;
	left: 0;
    transform: scaleX(0);
    background-color: #b8dffb;/*伸びる背景色の設定3fa9f5*/
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#loading{
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #loading{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*文字サイズの設定
---------------------------------------------------------------------------*/
/*「大」ボタンを押した時の文字サイズ
body.f-large {
	font-size: 24px;
}

/*「小」ボタンを押した時の文字サイズ
body.f-small {
	font-size: 16px;
}


/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: #000;	/*文字色 元#777*/
	transition: 0.3s;	/*hoverまでにかける時間。0.3秒。*/
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
#container {
	width: 100%;
	display: flex;	/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	/*margin-right: auto;
	margin-left: auto;*/
	position: relative;
  　z-index: 10;
	background: linear-gradient(45deg, #dcdcdc 0%, #dcdcdc 50%, #f7f6f5 50%, #f7f6f5 100%);/*#eee; #DADADA #c4d7d1 #dceffc*/
	height: auto;
	overflow: hidden;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	/*margin-right: auto;	/*コンテンツ内の余白*/
	/*margin-left: : auto;
	/*max-width: 1800px;	/*サイトの最大幅。これ以上広がらない。*/
	height: 100vh;
	/*z-index: 10;*/
	width: 100%;
}


/*header（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	/*padding: 20px 10px 20px 30%;	/*上下、左右へのヘッダー内の余白*/
	/*display: flex;					/*flexボックスを使う指定*/
	/*justify-content: space-between;	/*並びかたの種類の指定*/
	/*align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	z-index: 99;
	position: fixed;
	width: 100%;
	background-color: rgba(250,250,250,0.7);
	height: 120px;
}

/*ロゴ*/
#logo img {
	display: block;
}

#logo {
	max-width: 450px;	/*幅*/
	/*background-color: rgba(250,250,250,0.5);*/
	padding: 30px 15px 15px 25px;
	margin: 0;
}

#logo {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.selectlink{
  margin: 25px 0px 0px;
  padding: 3px 8px;
  border: 1px #333 solid;
  border-radius: 3px;
  background-color: transparent;
  cursor: pointer;
}

.selectlink:hover{
  border: 1px #333 solid;
}

.lang {
  cursor: pointer;
  z-index: 3;
  float: right;
  position: relative;
	top: 0px;
	right: 15px;
}


	/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {

	/*ヘッダーブロック*/
		header {
			flex-direction: column;	/*子要素を縦並びにする*/
			align-items: stretch;	/*デフォルトに戻す*/
			padding-right: 80px;	/*右側へのpaddingだけ上書き*/
		}
		
		.main-area p {
			font-size: 2.8em;
			letter-spacing: 0.1em;
			position: absolute;
			left: 8%;
			top: 29%;
		}
		
		.lang {
			position: absolute;
			right: 5px;
		}
		
		p.tel {
			font-size: 2rem;
		}
		
		.wrapper2 h3 {
			font-size: ;
		}

	}/*追加指定ここまで*/


	/*画面幅500px「以下」の追加指定。文字サイズボタンにロゴが重ならないようにする為。*/
	@media screen and (max-width:500px) {
		
		header {
			height: 120px;
		}
	
		/*ロゴ*/
		#logo {
			width: calc(100% - 130px);	/*画面幅を500px以下にした際に、ロゴが重ならないように160pxの部分を調整します。*/
			min-width: 300px;
			padding: 42px 10px 0 15px;
		}
	
	}/*追加指定ここまで*/


/*文字サイズ変更ボタン
---------------------------------------------------------------------------*/
/*ボタンブロック全体*/
#f-size {
	background: #fff;	/*背景色*/
	box-shadow: 0px 0px 8px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2は20%色がついた状態の事。*/
	border-radius: 0px 0px 5px 5px;	/*角丸のサイズ。左上、右上、右下、左下への順。*/
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
	padding: 10px 15px;		/*ブロック内の余白。上下、左右へ。*/
	position: absolute;		/*headerに対して絶対配置する*/
	right: 3%;				/*右からの配置場所*/
	top: 0px;				/*上からの配置場所*/
}

	/*画面幅1000px「以下」の追加指定。ハンバーガーアイコンが出る分、位置をずらす。*/
	@media screen and (max-width: 1000px) {
		
		.wrapper {
			display: block;
		}
	
	#f-size {
		right: 100px;
	}
	
	}/*追加指定ここまで*/


/*「文字サイズ」のテキスト*/
#f-size p {
	margin: 0;
	margin-right: 10px;	/*右側に空けるスペース。ボタンとの間にとるスペースです。*/
	font-size: 0.85rem;	/*文字サイズ*/
}

	/*画面幅600px「以下」の追加指定。*/
	@media screen and (max-width:600px) {
	
	#f-size p {
		display: none;	/*画面が狭くなるので、非表示にする*/
	}
	
	}/*追加指定ここまで*/


/*「小」「大」を囲むブロック*/
#f-size ul {
	list-style: none;margin: 0;padding: 0;
	display: flex;			/*flexボックスを使う指定*/
	align-items: center;	/*垂直揃えの指定。天地中央に配置されるように。*/
}

/*「小」ボタン設定*/
#f-size ul li#f-small::before {
	display: block;
	content: "小";		/*「小」の文字を出力*/
	font-size: 16px;	/*文字サイズ*/
	width: 40px;		/*幅*/
	line-height: 40px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	background: #eee;	/*背景色*/
}
#f-size ul li#f-small {
	margin-right: 5px;	/*右側に空けるスペース。「大」との間の隙間です。*/
}

/*「大」ボタン設定*/
#f-size ul li#f-large::before {
	display: block;
	content: "大";		/*「大」の文字を出力*/
	font-size: 30px;	/*文字サイズ*/
	width: 50px;		/*幅*/
	line-height: 50px;	/*高さ*/
	text-align: center;	/*内容をセンタリング*/
	background: #eee;	/*背景色*/
}

/*選択中の設定*/
#f-size li#f-large.current::before,
#f-size li#f-small.current::before {
	background: #ff0000;	/*背景色*/
	color: #fff;			/*文字色*/
}

/*マウスオン時にリンクテキストと同じような手のマークが出るように*/
#f-size li {
	cursor: pointer;
}

/*メニューブロック設定
---------------------------------------------------------------------------*/
#menubar a {display: block;text-decoration: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;font-family: "Font Awesome 5 Free";}
#menubar.d-n, #menubar_hdr.d-n, #menubar .ddmenu_parent ul {display: none;}
#menubar.d-b {display: block;}
#menubar_hdr.d-b {display: flex;}
#menubar {
	position: relative;
	z-index: 1;	/*スライドショーがある場合に下に隠れないようにするため*/
	font-size: 17px;	/*文字サイズ。端末サイズで文字サイズが変わると不具合が出る場合があるので、ここで統一しています。*/
	margin: 0 0 0 auto;
	width: 80%;
	display: flex;					/*flexボックスを使う指定*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
	padding: 25px 10px 20px 30%;
}

/*ドロップダウンメニューのリンクタグ*/
#menubar .ddmenu {
	cursor: default;	/*リンク要素のカーソルを矢印に変更しておく*/
}

/*ddmenuを指定しているメニューに矢印アイコンをつける設定*/
a.ddmenu::before {
	content: "\f078";	/*使いたいアイコン名をここで指定。Font Awesomeに記載されています。詳しくは当テンプレートのマニュアルを読んで下さい。*/
	font-weight: bold;	/*この手の設定がないとアイコンが出ない場合があります*/
	margin-right: 1em;	/*アイコンとテキストとの間に空けるスペース*/
}

	/*画面幅1200px以下の追加指定*/
	@media screen and (max-width:1200px) {
	
		#menubar {
			font-size: 15px;
		}
			
		
		
	}/*追加指定ここまで*/


/*大きな端末用のメニューブロック設定
---------------------------------------------------------------------------*/
.p #menubar > nav > ul {
	display: flex;					/*flexボックスを使う指定*/
	/*justify-content: space-between;	/*並びかたの種類の指定*/
}

/*メニュー１個あたりの設定*/
.p #menubar li {
	text-align: center;	/*テキストをセンタリング*/
	flex: 1;			/*個々のメニューを均等にし、幅いっぱいまで使う設定*/
}
.p #menubar a {
	padding: 15px 0;		/*メニュー内の余白*/
	color: #000;
	margin: 0px;
	white-space: nowrap;
}


/*大きな端末用のドロップダウンメニュー
---------------------------------------------------------------------------*/
/*ドロップダウンメニューブロック全体*/
.p #menubar ul ul {
	position: absolute;
	z-index: 100;
	width: 100%;
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
}


/*小さな端末用の開閉ブロック
---------------------------------------------------------------------------*/
/*メニューブロック設定*/
.s #menubar.d-b {
	position: fixed;
	overflow: auto;
	z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding: 100px 20px 20px;			/*ブロック内の余白。上、左右、下。*/
	background: rgba(0,0,0,0.9);		/*背景色。0,0,0は黒の事で0.9は色が90%出た状態。*/
	text-align: center;					/*内容をセンタリング*/
	animation: animation1 0.2s both;	/*animation.cssのanimation1を実行する。0.2sは0.2秒の事。*/
	font-size: 20px;
}

/*メニュー１個あたりの設定*/
.s #menubar a {
	padding: 30px;		/*メニュー内の余白*/
	color: #fff;		/*文字色*/
}


/*３本バー（ハンバーガー）アイコン設定
---------------------------------------------------------------------------*/
/*３本バーを囲むブロック*/
#menubar_hdr {
	position: fixed;
	z-index: 101;
	cursor: pointer;
	right: 15px;			/*右からの配置場所指定*/
	top: 40px;				/*上からの配置場所指定*/
	padding: 16px 14px;		/*上下、左右への余白*/
	width: 46px;			/*幅（３本バーが出ている場合の幅になります）*/
	height: 46px;			/*高さ*/
	display: flex;					/*flexボックスを使う指定*/
	flex-direction: column;			/*子要素（３本バー）を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	background: rgba(0,0,0,0.5);	/*背景色*/
	border-radius: 50%;				/*円形にする*/
}

/*バー１本あたりの設定*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;	/*アニメーションにかける時間。0.3秒。*/
	border-top: 1.5px solid #fff;	/*線の幅、線種、色*/
}

/*×印が出ている状態の設定。※１本目および２本目のバーの共通設定。*/
#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	/*変形の起点。センターに。*/
	width: 20px;						/*バーの幅*/
}

/*×印が出ている状態の設定。※１本目のバー。*/
#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	/*回転45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※３本目のバー。*/
#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	/*回転-45°と、X軸Y軸への移動距離の指定*/
}

/*×印が出ている状態の設定。※２本目のバー。*/
#menubar_hdr.ham span:nth-of-type(2){
	display: none;	/*２本目は使わないので非表示にする*/
}


/*フッター設定
---------------------------------------------------------------------------*/
footer small {font-size: 100%;}

#footerinfo{
	text-align: center;
	font-size: 18px;
	font-style: bold;
}


#footermenu {
	overflow: hidden;
	padding: 20px 0;
}
/*１行分の設定*/
#footermenu ul {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	list-style: none;
	/*幅。今回は５列作ったのでここの幅18%と下のpadding(合計の2%)でトータル20%になるよう設定。列に応じて調整して下さい。*/
	/*padding-right: 5%;
	padding-left: 5%;*/
}

#footermenu li {
	width: 30%;
	margin: 1%;
	text-align: center;
}

#footermenu a {
	text-align: center;
	color: #181111;
	text-decoration: none;
}

.inner {
	max-width: 1400px;	/*サイトの最大幅*/
	margin: 0 auto;
	padding: 0 2%;		/*上下、左右へのボックス内の余白*/
}

footer {
	clear: both;
	font-size: 85%;	/*文字サイズ*/
	background: #dcdcdc;		/*背景色*/
	text-align: center;		/*内容をセンタリング*/
	padding: 20px;			/*ボックス内の余白*/
}

/*リンクテキスト*/
footer a {color: inherit;text-decoration: none;}

/*著作部分*/
footer .pr {display: block;font-size: 80%;}


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*画面幅900px以上の追加指定ここまで*/

/*mainブロック設定
---------------------------------------------------------------------------*/
/*mainブロックの設定*/
main {
	margin: 2rem 0;	/*ブロックの外側（上下、左右）に空けるスペース*/
}

/*メインエリア*/
main.column .main-area {
	margin-bottom: 30px;	/*ボックスの下に空けるスペース。sub-areaとの間の余白です。*/
}

.wrapper {
    display: flex;
	max-width: 1800px;
	margin: 80px auto;
	padding: 0 5%;
}

.wrapper2 {
	max-width: 1800px;
	margin: 80px auto;
	padding: 0 5%;
	
}

.wrapper2 h3 {
	margin-top: 0;
	font-size: 2.2em;
	font-family: serif;
}

.ta_eq {
	overflow-x: auto;
	padding: 0 2%;
}

.equipment {
	width: 65%;
	text-align: center;
	margin: 0px auto;
	min-width: 800px;
}

.equip-img {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 5%;
}

.eq_image {
	width: 30%;
	margin-bottom: 3%;
}

.eq_image img {
	width: 100%;
}

.eq_image_tate {
	width: 25%;
	margin-bottom: 3%;
}

.eq_image_tate img {
	max-height: 500px;
}

.eq_image_new {
	width: 50%;
	max-width: 700px;
	min-width: 350px;
}

.attention {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 8% 5%;
}

.attention p {
	margin-left: 5%;
}

.attention a {
	color: #3FA9F5;
	/*text-decoration: none;*/
	font-size: 30px;
}


@media screen and (max-width:850px) {
	
		.equip-img {
			display: block;
		}
		.eq_image {
			width: 100%;
		}
		.attention {
			display: block;
		}
		.eq_image_new {
			width: 100%;
		}
		.eq_image_tate {
			width: 100%;
		}
		.eq_image_tate img {
			width: 100%;
			max-height: none;
	}
}
	

#manufacturing {
	box-sizing: border-box;
}

#manufacturing, #others {
	margin: 7% 0;
} 

#manufacturing h3, #others h3 {
	text-align: center;
	font-size: 2.5rem;
	letter-spacing: 0.2em;
	font-family: serif;
}

th, td {
 	border: 1px solid #333;
	padding: 10px 30px;
}

th {
	background-color: #D7CDC2;
}

.column {
	flex: 1;
}

.company_img {
	width: 100%;
	height: auto;
	/*background-image: url(../images/IMG_1162re.JPG);
	background-size: 100%;*/
}

.company_info {
	margin: 0 50px;
}

.facility_info {
	box-sizing: border-box;
}

.info h3 {
	margin-top: 0;
	font-size: 2.2em;
	line-height: 1.3;
	font-family: serif;
}
/*
@media screen and (max-width: 1550px) {
 	.info h3 {
  		font-size: 1.7em;
		}
}
*/
@media screen and (max-width: 1000px) {
 	.info h3 {
  		font-size: 2em;
		}
}

@media screen and (max-width: 1300px) {
 	.factory_img {
		width: 400px;
		height: auto;
	}
}

.info p {
	margin: 40px 0;
	text-align: ;
}

@media screen and (max-width: 1000px) {
		.s-discription2 {
			text-align: center;
			display: block;
			}

		.center_left2 {
			text-align: left;
			display: inline-block;
			padding: 0 3%;
			}
	
}

h4 {
	font-size: 1.5em;
	text-align: center;
	font-family: serif;
}

.title_center {
	text-align: center;
	letter-spacing: 0.7em;
	margin-bottom: 80px;
}

.factory_img {
	width: 100%;
	height: auto;
	/*background-image: url(../images/IMG_1169.JPG);
	background-size: 100%;
	background-size: cover;
	object-fit: contain;*/
}

/*== 矢印の線がループして伸縮 */

.btnlinestretches5{
    /*線の基点とするためrelativeを指定*/
	position:relative;
    /*リンクの形状*/ 
    padding: 10px 0;
	display:inline-block;
    text-decoration: none;
    outline: none;
	letter-spacing: 0.9rem;
	/*margin-right: 70px;*/
	margin-bottom: 50px;
}

/*線の設定*/
.btnlinestretches5::before {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    /*線の形状*/
    width: 100%;
    height: 1px;
    background: #7AC943; /*#333*/
}

/*矢印の設定*/
.btnlinestretches5::after {
    content: "";
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:-4px;
    /*矢印の形状*/
    width: 8px;
    height: 8px;
    border-top: 1px solid #7AC943; /*#333*/
    border-right: 1px solid #7AC943; /*#333*/
    transform: rotate(45deg);
}

/*線と矢印を繰り返しアニメーション*/
.btnlinestretches5::before {
    animation: arrowlong01 2s ease infinite;
}
.btnlinestretches5::after {
    animation: arrowlong02 2s ease infinite;
}

@keyframes arrowlong01{
    0%{width:0;opacity:0}
    20%{width:0;opacity:1}
    80%{width:105%;opacity:1}
    100%{width:105%;opacity:0}
}

@keyframes arrowlong02{
    0%{left:0;opacity:0}
    20%{left:0;opacity:1}
    80%{left:103%;opacity:1}
    100%{left:103%;opacity:0}
}

@media screen and (max-width: 500px) {
 	.column {
  		/*height: 100vh;
  		width: ;*/
		}
}

@media screen and (max-width: 1000px) {
		.wrapper {
			display: block;
			object-fit: contain;
		}
		.company_info {
			/*margin-left: 0;*/
			margin-top: 20px;
	}
		.company_img, .factory_img {
			width: 100%;
			height: auto;
			/*object-fit: cover;
			background-position-y: 50%;*/
			
	}
		.link_center2 {
			text-align: center;
			margin-bottom: 60px;
	}
		h3 {
			text-align: center;
	}
}

@media screen and (max-width: 1550px) {
	.title_center {
		font-size: 2em;
	}
}

/*枠線が伸びて出現*/

.lineTrigger{
  position: relative; /* 枠線が書かれる基点*/
  opacity:0;
}

.lineTrigger.lineanime{
  animation-name:lineAnimeBase;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content:"";
  width:0;
  height:1px;
  background:#333;/* 枠線の色*/
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content:"";
  width: 1px;
  height:0;
  background:#333;/* 枠線の色*/
}

/*上線*/
.lineTrigger::before {
  top:0;
  left:0;
}

.lineTrigger.lineanime::before {
  animation: lineAnime .5s linear 0s forwards;/*表示されて0秒後に上線が0.5秒かけて表示*/
}

/*右線*/
.line2::before{ 
  top:0;
  right:0;
}

.lineTrigger.lineanime .line2::before {
  animation: lineAnime2 .5s linear .5s forwards;/*表示されて0.5秒後に右線が0.5秒かけて表示*/
}

/*下線*/
.lineTrigger::after { 
  bottom:0;
  right:0;
}

.lineTrigger.lineanime::after {
  animation: lineAnime .5s linear 1s forwards;/*表示されて1秒後に下線が0.5秒かけて表示*/
}

/*左線*/
.line2::after{ 
  bottom:0;
  left:0;
}

.lineTrigger.lineanime .line2::after {
  animation: lineAnime2 .5s linear 1.5s forwards;/*表示されて1.5秒後に左線が0.5秒かけて表示*/
}

@keyframes lineAnime {
  0% {width:0%;}
    100%{width:100%;}
}

@keyframes lineAnime2 {
  0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/

.lineTrigger.lineanime .lineinappear{
  animation: lineInnerAnime .5s linear 1.5s forwards;/*1.5秒後に中央のエリアが0.5秒かけて表示*/
  opacity: 0;/*初期値を透過0にする*/ 
  padding: 2px;
}

@keyframes lineInnerAnime{
  0% {opacity:0;}
    100% {opacity:1;}
}

.link_center {
	text-align: center;
}

.link_center a {
	color: #3FA9F5;
}

.link_center2 a {
	color: #3FA9F5;
}

.s-discription {
	text-align: center;
	display: block;
}

.center_left {
	text-align: left;
	display: inline-block;
	padding: 0 3%;
}


/*==================================================
スライダーのためのcss
===================================*/
.slider {/*横幅94%で左右に余白を持たせて中央寄せ*/
    width: 94%;
    margin: 0 auto;
	padding: 0;
}

.slider img {
    /*width: 100%;/*スライダー内の画像を横幅100%に*/
    /*height: 255px;*/
	width: auto;
	max-width: 100%;
    height: auto;
	max-height: ;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin: 0 10px;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #666;/*矢印の色*/
    border-right: 2px solid #666;/*矢印の色*/
    height: 15px;
    width: 15px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left: -1.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right: -1.5%;
    transform: rotate(45deg);
}

/*ドットナビゲーションの設定*/

.slick-dots {
    text-align: center;
	margin: 20px 0 0 0;
}

.slick-dots li {
    display: inline-block;
	margin: 0 5px;
}

.slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;/*ドットボタンのサイズ*/
    height: 8px;/*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background: #ccc;/*ドットボタンの色*/
	padding: 0;
	border: none;
}

.slick-dots .slick-active button{
    background:#333;/*ドットボタンの現在地表示の色*/
}



	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	/*カラムで使う為の指定*/
	main.column {
		display: flex;	/*flexボックスを使う指定*/
		justify-content: space-between;	/*並びかたの種類の指定*/
	}
	
	/*メインエリア*/
	main.column .main-area {
		margin-bottom: 0;
		order: 2;				/*並び順。数字の小さい順番に表示されます。*/
		flex: 1;
		margin-left: 30px;		/*sub-areaとの間に空けるスペース*/
	}
	
	/*サブエリア*/
	main.column .sub-area {
		order: 1;		/*並び順。数字の小さい順番に表示されます。*/
		width: 230px;	/*幅*/
	}

	}/*追加指定ここまで*/


/*会社概要table*/

.table_wrapper {
	margin: 70px 10px;
}

.table_design01 {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
.table_design01 th, .table_design01 td {
  border: 1px solid #333;
  background-color: none;
  padding: 1em;
}
.table_design01 th {
  background-color: #D7CDC2;
  text-align: center;
  width: 20%;
  min-width: 4em;
  white-space: nowrap;
}

.table_design02 {
	max-width: 800px;
}

#g_map {
	text-align: center;
	padding: 0 10px;
	margin-bottom: 80px;
}

iframe {
	 aspect-ratio: 16/9;
	 max-width: 700px;
}

.greeting {
	display: flex;
	justify-content: center;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 5%;
}

.greeting_image {
	/*width: 40%;*/
	min-width: 400px;
	max-width: 550px;
}

.greeting_contents {
	/*width: 40%;*/
	max-width: 650px;
}

.greeting_contents p {
	margin-top: 0;
	margin-left: 5%;
}

#right {
	text-align: right;
}

.message_ceo h3 {
	text-align: center;
	font-size: 2.5rem;
	letter-spacing: 0.2em;
	margin: 8% 0 4% 0;
	font-family: serif;
}

/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {
		iframe {
			width: 100%;
		}	
	}


/*画面幅700px以下の追加指定*/
	@media screen and (max-width:700px) {
		iframe {
			width: 100%;
		}	
	}

/*画面幅800px以下の追加指定*/
	@media screen and (max-width:800px) {
		.greeting {
			display: block;
		}
		.greeting_image {
			width: 100%;
			max-width: none;
		}
		.greeting_contents {
			margin-top: 5%;
			
		}
		.greeting_contents p {
			margin-left: 0;
		}
	}

/*設備紹介*/

h5 {
	position: relative;
	font-weight: normal;
	font-size: 20px;
	padding-left: 25px;
}

h5:before {
	position: absolute;
	content: "";
	width: 7px;
	height: 14px;
	top: 14px;
	left: 3px;
	background: #3FA9F5;
}

h5:after {
	position: absolute;
	content: "";
	width: 7px;
	height: 14px;
	top: 14px;
	left: 10px;
	background: #7AC943;
}

/*工場紹介*/

.factory_subtitle {
	font-size: 2.8rem;
	font-family: serif;
	margin: 100px 0 50px 0;
}

/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {
		iframe {
			width: 100%;
		}
		.factory_subtitle {
			font-size: 1.8rem;
		}
	}

section {
	text-align: center;
}

.sec_padding {
	padding: 0 50px;
	max-width: 1800px;
    margin: 0 auto;
}

.box {
	margin-bottom: 100px;
	width: 80%;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

.box:nth-child(even){
	display: flex;
	flex-direction: row-reverse; /*左右入れ替え*/
}

@media(max-width : 1200px ){
	.factory_images img {
		width: 350px;
		}
	}

@media(max-width : 850px ){
	.box:nth-child(even){
		flex-direction: column-reverse; /*上下入れ替え*/
		}
	.factory_images {
		margin-bottom: 5%;
	}
	}

.box:nth-child(odd){
	display: flex;
	}
@media(max-width : 850px ){
	.box:nth-child(odd){
		flex-direction: column-reverse; /*上下入れ替え*/
		}
	}


.wrap {
	display: grid;
	gap: 20px;
	/* 以下、minmax内の「240px」が１個の円の最小幅。お好みで */
	grid-template-columns: repeat(auto-fit, minmax(100px, 350px));
	place-content: center;

}

.slide_wrap {
	display: flex;
	align-items: center;
	height: 340px;
	overflow: hidden;
}

.slideshow {
	display: flex;
	box-sizing: border-box;
	list-style: none;
	padding: 0;
	margin: 0;
}

.content {
	width: 450px;
	height: 300px;
}

.slideshow {
	display: flex;
	animation: loop-slide 20s infinite linear 1s both;
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.slide-paused:hover .slideshow {
	animation-play-state: paused;
}

.content-hover {
	transition: all 0.2s;
	margin-right: 20px;
}
.content-hover:hover {
	transform: translateY(-20px);
	border-radius: 0 10%;
	box-shadow: 0 3px 10px 0 #333;
	opacity: 0.8;
	cursor: pointer;
}

@media screen and (max-width: 480px) {
    .slide_wrap {
        overflow: hidden;
        display: flex;
        align-items: center;
		height: 190px;
    }
	.content {
		width: 200px;
		height: 150px;
	}
}



/*
.wrap .circle {
  border-radius: 100%;
  padding: 16px;
  background: #3fa9f5;
  /* 以下のFlexboxで文字を中央寄せ 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  colorpadding: 
  font-size: 2.5rem;
}

.wrap .circle::before {/* 擬似要素で正円を作る 
  display: block;
  content: '';
  padding-top: 100%;
}*/

.circle {
   width: 300px;
   height: 300px;
   margin: 0px auto;
   border-radius: 300px;
   background: #c4d7d1;
   animation: fuwafuwa 2s infinite;
   /* 以下のFlexboxで文字を中央寄せ */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-weight: bold;
  font-size: 2rem;
}

.circle01 {
  animation: fuwafuwa02 2s infinite;
}

@keyframes fuwafuwa {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-30px);
  }
  100% {
    transform: translateY(0px);
  }
}

@keyframes fuwafuwa02 {
  0% {
    transform: translateY(-30px);
  }
  50% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-30px);
  }
}


/*画面幅1100px以下の追加指定*/
	@media screen and (max-width:1100px) {
		.wrap {
			  gap: 10px;
			  grid-template-columns: repeat(auto-fit, minmax(100px, 260px));
		}
		.circle {
			  width: 240px;
   			  height: 240px;
			  border-radius: 240px;
		}	
	}

/*画面幅799px以下の追加指定*/
	@media screen and (max-width:799px) {
		.wrap {
			  display: block;
		}
		.circle {
			  width: 300px;
   			  height: 300px;
			  border-radius: 300px;
			  margin-bottom: 30px;
			  animation: none;
			  transform: none;
		}	
	}


.factory_images {
	/*display: flex;*/
	justify-content: center;
}

.factory_images img {
	max-width: 500px;
	height: auto;
	object-fit: cover;
	margin: 0 20px;
	/*aspect-ratio: 4 / 3;*/
}

.factory_discription {
	text-align: left;
	margin: 0 auto;
	padding: 0 20px;
}

.factory_discription p {
	margin: 0;
}

/*アニメーション前*/
.marker {
	padding: 0 5px;
    background: linear-gradient(#FFFF89, #FFFF89);/*#51A5EB, #95dade*/
    background-size: 0 35%;
    background-position: 0 100%;
    background-repeat: no-repeat;
	transition: 1.2s;
  }

/*アニメーション後*/
.marker.active {
    background-size: 100% 35%;/*JSからクラスactiveを付与されたときに背景の幅を全体に広げる*/
}

.indent {
	padding-left: 0.7em;
	transition: .8s;
}

/*採用情報*/

.center {
	text-align: center;
}

.telephone {
	border-top: 3px solid #000; /*線の色 元#777*/
	border-bottom: 3px solid #000;
	display: inline-block;
	padding: 20px;
	margin: 70px auto;
}

.tel {
	font-size: 3rem;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	
}

.telephone p {
	margin: 0;
}

#entry a {
	color: #3FA9F5;
} 

/*お問い合わせ*/

#form {
	max-width: 1200px;
	margin: auto;
	padding: 0 5%;
}

#form th {
	white-space: nowrap;
}

.required {
	color: #fff;
	background-color: red;
	font-size: 12px;
	padding: 3px;
	margin-left: 2px;
	border-radius: 20%;
	vertical-align: 2px;
}



@media screen and (max-width: 650px) {
  form th, form td {
    wihth: 100%;
    display: block;
	border-collapse: collapse;
	margin: 0 0 -1px; 
  }
}

/*別ページ*/

#mu400v {
	font-size: 35px;
	font-family: serif;
}

.new_machine {
	text-align: center;
	margin: 0 auto;
	max-width: 850px;
	padding: 0 5%;
}

.new_machine2 {
	max-width: 1150px;
	margin: 0 auto;
	padding: 0 5%;
}

.new_machine p {
	text-align:left;
	display: inline-block;
	margin-bottom: 10%;
}
/*
.new_machine_video {
	display: flex;
	/*justify-content: center;
	align-items: center;
	margin-bottom: 10%;
	justify-content: space-between;
    flex-wrap: wrap;	
}*/

.new_machine_video {
	display: flex;
	justify-content: center;
	/*align-items: center;*/
	margin: 0 auto;
	margin-bottom: 7%;
	width: 100%;
  	height: auto;
  	max-width: 800px; /* 上限を決めたい場合 */
	gap: 20px;               /* 動画の間の余白 */
    flex-wrap: wrap;         /* スマホで縦並びにできるように */
	
}


.new_machine_video2 {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 10%;
	justify-content: space-between;
    flex-wrap: wrap;
	min-width:200px;
	min-height:200px;
}

.joku {
	text-align: center;
	margin: 0 auto;
	max-width: 900px;
	padding: 1%;
}

.mu-400v {
	width: 100%;
}

.mu-400v1 {
	width: 40%;
	height: 430px;
	margin: 0 3%;
	object-fit: cover;
}

.row1 {
	display: flex;
	justify-content: space-between;
	max-width: 1700px;
	text-align: center;
}

.row2 {
	display: flex;
	justify-content: space-between;
	max-width: 1700px;
	text-align: center;
}

.element {
	width: 32%;
}

.element p {
	text-align: left;
	padding: 10px;
}

.row2::after {
	content:"";
	display: block;
	width: calc(100% / 3);
	margin: 0;
}

.new_machine_pic p {
	margin: 0 2%;
}

.aboutlogo{
	text-align: center;
	margin: 40px;
}

/*パンくず*/
.breadcrumb *, .breadcrumb *:after, .breadcrumb *:before {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.breadcrumb {
  font-size: 70%;
  overflow: hidden;
  width: 100%;
  padding: 0;
  list-style: none;
}
.breadcrumb li {
  display: inline-block;
  padding: 0;
  margin: 0 0 0;
}
.breadcrumb a {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0em 1em 0em 2em;
  text-decoration: none;
  color: #ffffff;
  background-color: #8a8a8a;
}
.breadcrumb li:first-child a {
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}
.breadcrumb a::after,
.breadcrumb a::before {
  position: absolute;
  top: 50%;
  right: -1.5em;
  margin-top: -1.48em;
  content: '';
  border-top: 1.48em solid transparent;
  border-bottom: 1.48em solid transparent;
  border-left: 1.5em solid;
  }
.breadcrumb a::after {
  z-index: 2;
  border-left-color: #8a8a8a;
}
.breadcrumb a::before {
  z-index: 1;
  right: -1.8em;
  border-left-color: #ffffff;
}
.breadcrumb li:nth-child(2) a       { background:        #949494; }
.breadcrumb li:nth-child(2) a:after { border-left-color: #949494; }
.breadcrumb li:nth-child(3) a       { background:        #bfbfbf; }
.breadcrumb li:nth-child(3) a:after { border-left-color: #bfbfbf; }
.breadcrumb li:nth-child(4) a       { background:        #d4d4d4; }
.breadcrumb li:nth-child(4) a:after { border-left-color: #d4d4d4; }

.breadcrumb li:last-child a {
  cursor: default;
  pointer-events: none;
  color: black;
  background: #e9e9e9;
  border-radius: 0 5px 5px 0;
}
.breadcrumb li:last-child a:hover {
  background: none;
}
.breadcrumb li:last-child a::before,
.breadcrumb li:last-child a::after {
  content: normal;
}


/*画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {
			.new_machine_pic {
				display: block;
			}
			.new_machine_pic img {
				width: 100%;
				padding: 0 5%;
			}
			.new_machine_pic p {
				margin-bottom: 3%;
			}
			.mu-400v {
				width: 95%;
				padding: 0 2%;
				margin-bottom: 10%;
			}
			.row1, .row2 {
				display: block;
				margin-bottom: 0;
				text-align: left;
			}
			.element {
				display: flex;
				width: 100%;
			}
			.element p {
				margin-right: 3%;
				font-size: 0.8em;
				margin-top: 0; 
			}
			.mu-400v {
				aspect-ratio: 16 / 9;
				height: 100%;
				width: 40%;
			}
	}

/*画面幅850px以下の追加指定*/
	@media screen and (max-width:850px) {
		.factory_images {
			  display: block;
		}
		.factory_images img {
			  max-width: none;
			  width: 100%;
			  margin: 0;
			  padding: 20px;
		}	
		.new_machine_video {
			display: block;
		}
		.mu-400v1 {
			width: 90%;
			height: auto;
			margin: 2%;
		}
	}