@charset "UTF-8";

p.dir     {font-size: 0.9em; font-family:TIMES NEW ROMAN; font-weight:bold; color:#0d3738}


/*Google Font 'Yuji Syuku' の読み込み(「人と自然を創造する-誰もが健康であるために」などに適用）
『趣のある和文向きの筆書体、アルファベット（文字間は少し広め）でも良い感じだと思う』
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Yuji+Syuku&display=swap');


body {
/* text-align       : center; */	
	margin           : 0px;
	padding          : 0px;
	z-index: 0;
	}


#main {
	width            : 938px;

	margin-left      : auto;
	margin-right     : auto;
	text-align       : left;
	background-color : ;
	height           : auto;
	}

#content {
	position: relative;    /*�ʏ�ǂ���̈ʒu�ɔz�u*/
	z-index: 1;
}


table {
	font-size:0.86em;
	z-index: 0;
}

.menu a:hover {
	background-color: #778899;
	color: #00245d;
	font-weight: bold;
}

.menu a{
	background-color:#F0F8FF;
	display:block;
	width:134px;
	border-right:solid 1px #ffffff;
	line-height:1.5em;
	text-align:center;
	font-size:0.9em;
	}
.menu {
	/*background-color:none; */
	/*position:relative; */
	/*left:0; */
	/*top:0; */
	position: -webkit-sticky;/* safari対応 */
	position: sticky;
	top: 0px;	/* 上端から0pxのところで固定 */
	z-index:10;
	}
#menu2 {
	position:absolute;
	left:134px;
	top:0;
	z-index:10;
	}
#menu3 {
	position:absolute;
	left:268px;
	top:0;
	z-index:10;
	}
#menu4 {
	position:absolute;
	left:402px;
	top:0;
	z-index:10;
	}
#menu5 {
	position:absolute;
	left:536px;
	top:0;
	z-index:10;
	}
#menu6 {
	position:absolute;
	left:670px;
	top:0;
	z-index:10;
	}
#menu7 {
	position:absolute;
	left:804px;
	top:0;
	z-index:10;
	}
#form {
	position:absolute;
	left:850px;
	top:40px;
	}
.submenu a {
	background-color:#D3D3D3;
	}
.submenu {
	visibility:hidden;
	position:absolute;
	left:0;
	top:auto;
	}

#flashContent {
	position: absolute;    /*#content�̌�둤��W100%, H387px�Ŕz�u*/
	z-index: 0;
	top: 161px;
	left: 0px;
	width: 100%;
	height: 387px;
}

#swf2jsContent {
	position: absolute;    /*#content�̌�둤��W100%, H387px�Ŕz�u*/
	z-index: -1;
	top: 142px;
	left: 0px;
	width: 100%;
	height: 387px;
}



.site-header{
	background: #fff;

    position: fixed;

    width: 100%;
	z-index:9999;
}





/*イメージマップのリンク部分の青い線を消す*/
area{
  border:none;
  outline:none;
}



p.table-top {
	font-size:1.1em;
	color:white;
	}

p.table0 {
	font-size:1.2em;
	color:black;
	}

p.tableBusiness {
	line-height:22px;
	padding-bottom:2px;
	border-bottom:1px #a9a9a9 solid;
	display:inline
	}

p.tableBusiness2 {
	line-height:22px;
	padding-bottom:2px;
	display:inline
	}

p.tableSyahyou {
	line-height:30px;
	padding-bottom:1px;
	border-bottom:1px #a9a9a9 solid;
	display:inline
	}

p.tableSozai{
	font-size:11pt;
	line-height:23px;
	padding-bottom:1px;
	border-bottom:1px #a9a9a9 solid;
	display:inline
	}

p.tableReview{
	font-size:11pt;
	}

p.table2 {
	font-size:0.95em;
	color:#000080;
	text-decoration:none;
	}

p.table3 {
	font-size:0.7em;
	color:black;
	}

p.top {
	font-size:0.675em;
	color:white;
	}
p.a2 {
	font-size:0.675em;
	color:#A9A9A9;
	}
p.a3 {
	font-size:0.775em;
	color:#444;
	}

address {
	font-size:1em;
	font-style:normal;
	} 

a:link  {
	color:black;
	text-decoration:none;
	}

a:visited {
	color:black;
	text-decoration:none;
	}

a:hover {
	color:#4B0082;
	text-decoration:none;
	}

/* 見出しのスタイル */
h1 {
	display: inline-block; /*横幅を文字数に合わる*/
	float: left;
	font-size: 20px;
	padding: 0em 0.4em; /*文字の上下 左右の余白*/
	margin: 20px 5px 1px 1px; /*（上）（右）（下）（左）*/
	color: #494949; /*文字色*/
	background: #ffffff; /*背景色*/
	border-left: solid 4px #00245d; /*左線*/
 	border-bottom: solid 1px #d7d7d7; /*下線*/
}

h2 {
	font-size: 20px;
 	position: relative;
 	padding: 0.25em 0;
	z-index: -1;
}
h2:after {
 	content: "";
	display: block;
	height: 4px;
	background: -webkit-linear-gradient(to right, rgb(0,36,93), transparent);
	background: linear-gradient(to right, rgb(0,36,93), transparent);
}


/* 受託加工-問い合わせボタン */
a.btn-eee {
  margin-top: 10px;
  padding: 5px;
  color: #2b2b2b;
  border-radius: 5px;	/* 角丸指定 */
  background-color: #ffcccc;
  border-left: 1px solid #db6baf;
  border-right: 2px solid #C54392;
  border-top: 1px solid #ffd6d6;
  border-bottom: 3px solid #C54392;
}
a.btn-eee:hover {
  position: relative; top: 1px; left: 1px;   /* 少し下がる */
  color: #00245d;
  background: #fab9b9;
  border-left: 1px solid #ffffff;
  border-top: 1px solid #ffd6d6;
  border-bottom: 1px solid #C54392;
}
a.btn--shadow {
  box-shadow: 2px 2px 3px rgba(219, 219, 219, .3);
}


.review {
 	font-family: "Times New Roman";
	font-size: 26px;
	padding: 0em 0.4em; /* 文字の上下 左右の余白*/
	margin: 0px 0px 1px 1px; /*（上）（右）（下）（左）*/
	color: #494949; /*文字色*/
	background: #ffffff; /*背景色*/
	border-left: solid 3px #00245d; /*左線*/
 	/*border-bottom: solid 2px #b5b3b3; 下線*/
}


#page_top{
  width: 90px;
  height: 107px;
  position: fixed;
  right: 6;
  bottom: 3;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 10px;
  z-index: 20;
}
#page_top a{
  position: relative;
  display: block;
  width: 80px;
  height: 107px;
  text-decoration: none;
  outline: none;
}


#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 22px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 0;
  right: -3;
  left: 0;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 17px;
  color: #fff;
  position: absolute;
  top: 50px;
  bottom: 0;
  right: -3;
  left: 0;
  margin: auto;
  text-align: center;
}






#page_topRe{
  width: 90px;
  height: 78x;
  position: fixed;
  right: 6;
  bottom: 3;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 10px;
  z-index: 20;
}

#page_topRe a{
  position: relative;
  display: block;
  width: 80px;
  height: 78px;
  text-decoration: none;
outline: none;
}


#page_topRe a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 22px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -30px;
  bottom: 0;
  right: -3;
  left: 0;
  margin: auto;
  text-align: center;
}

#page_topRe a::after{
  content: 'PAGE TOP';
  font-size: 15px;
  color: #fff;
  position: absolute;
  top: 40px;

  right: -3;
  left: 0;
  margin: auto;
  text-align: center;
}


/* AOS animate 要素への重なりを下にする */
[data-aos] {
  pointer-events: none;
}
.aos-animate {
  pointer-events: auto;
}
.aos-init[data-aos][data-aos].aos-animate {
  transform: unset;
}


/*-- 追記　上の文章 (弊社亀岡工場は、７月に京都府より～) --*/
section{
    width: 938px;
    font-family: 'Yuji Syuku', serif;
    text-align: left;
    line-height: 1.8em;
    margin-top: 1em;
    margin-bottom: 1em;
}

section h4{
    text-align: center;
    font-family: 'Yuji Syuku', serif;
    font-size: x-large;
    padding-top: 5px;
    padding-bottom: 15px;
    color: #00245d;
}

/*--「お知らせ」ブロック --*/
#new {
    margin: 0;
    display: flex;          /*flexボックスを使う指定*/
    flex-wrap: wrap;        /*折り返す指定*/
    padding: 10px 20px;     /*上下、左右へのボックス内の余白*/
    /*height: auto; /*高さ制限*/
    height: 13vh;           /*高さ制限*/
    overflow-y: auto;       /* 行数が増えると縦方向のスクロールバーを表示 */
    overflow-x: hidden;     /* 横方向のスクロールバーを非表示 */
    background: #f0eeee;    /*背景色。iconクラスだけ適用した場合に出る色です。*/
    width: 938px;
}

/*「お知らせ」ブロック */
/*日付(dt)設定*/
#new dt {
    width: 10em;                    /*幅*/
    font-size: 0.8em;
    display: flex;                  /*flexボックスを使う指定*/
    justify-content: space-between; /*日付とアイコンをそれぞれ端に寄せる*/
    line-height: 1.9em;
}

/*-- 日付の横のマーク（共通設定）--*/
#new dt span {
    display: inline-block;  /*表示させる*/
    width: 1em;            /*幅。10文字(em)分。*/
    background: #999;   /*背景色*/
    color: #fff;        /*文字色*/
    font-size: 0.9em;       /*文字サイズを90%に。*/
    text-align: center;     /*文字をセンタリング*/
    border-radius: 3px;     /*角を少しだけ丸くする*/
    margin-right: 1.2em;    /*アイコンの右側に空けるスペース*/
    align-self: flex-start; /*高さを間延びさせない指定*/
    line-height: 1.8em;     /*行間を少し狭く*/
    position: relative;
    top: 0.1em; /*上下の配置バランスの微調整*/
}

/*-- 色がついたアイコンの設定。--*/
#new dt span.icon-bg1 {
    background: #82848a;    /*背景色*/
}

#new dt span.icon-blue {
    background: #00245d;    /*背景色*/
}

#new dt span.icon-gold {
    background: #d4bf74;    /*背景色*/
}

/*-- 記事(dd)設定 --*/
#new dd {
    /*font-family: 'Yuji Syuku', serif;*/
    font-size: 0.8em;
    width: calc(100% - 18em);   /*「14em」は上の「#new dt」のwidthの値です。*/
    text-align: left;
    line-height: 1.8em;
    margin-bottom: 0.7em;
}

#new dd p{
    line-height:1.8em;
    margin-bottom: 0 0.75em;
}

#new dd a{
    text-decoration: underline;
}
/****************/




/*   ------------丸い形で文字なし
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 5;
  bottom: 5;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
  opacity: 0.5;
  z-index: 20;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
------------   */



/*   ------------コメント------------   */

/* CSSの基本的な記載方法（セレクタの記載方法）
p, id, class
３つの指定方法

その１　タグ名で適用先を指定
タグ名 {･･･} のようにタグ名をそのまま書きます。

CSS
タグ名 {･･･} 

HTML
<タグ名>
</タグ名>

例：
CSS
p{color:orange} 

HTML
<p>デザインが適用される箇所</p>

===========
その２　id名で適用先を指定
#id名{･･･}のようにid名の前に#をつけます。

CSS
#id名{･･･}
↓
HTML
<div id="id名">
</div>

例：
CSS
#headline{color:orange}

HTML
<div id="headline">
デザインが適用される箇所
</div>

===========
その３　class名で適用先を指定
.class名{･･･}のように、クラス名の前に「.ドット(ピリオド)」をつけます。

CSS
.class名{･･･}

HTML
<div class="･･･">
デザインが適用される箇所
</div>

例:
CSS
.main {
  color: orange;
}

HTML
<div class="main">
デザインが適用される箇所
</div>

==============
適用先を複数指定するとき
◯◯,◯◯,◯◯ {･･･}　のように
タグやclass名、id名を半角コンマ,で区切ります。
タグ, class, id がいくつかあるときは、コンマ, で複数指定をしましょう。
複数の要素のデザインをまとめて変更することができます。

例：
CSS
#headline, h2 {
  color: orange;
}


HTML
<div id="headline">
同じデザインが適用される箇所
</div>


<h2>同じデザインが適用される箇所</h2>


==============
子孫セレクタ（絞り込み指定）
これは
「◯◯タグ内にある◯◯タグにだけデザインを適用させたい」
ときに使うものです。

その場合、◯◯ ◯◯ ◯◯ {･･･}　のように
タグやclass名、id名を半角スペース で区切ります。

例：
class=”main”タグの中のpタグの中のspanタグ内にのみデザインを適用したいとき

CSS
.main p span {
  color:orange;
}

HTML
<div class="main">
  <h2>これは見出しです。</h2>
  <p>これは<span class="light">「ここだけ適用」</span>です。</p>
  <p>
  <a href="https://････">ホームへ</a>
  戻ります。</p>
</div>


*/