@charset "utf-8";

/* ----- 各ページ共通部分 ----- */
/* ここからChromeなどで游ゴシック体がかすれることに対する対策 */
@font-face {
  font-family: "Yu Gothic"; 
  src: local("Yu Gothic Medium"); 
  font-weight: 100; 
}
@font-face {
  font-family: "Yu Gothic"; 
  src: local("Yu Gothic Medium"); 
  font-weight: 200; 
}
@font-face {
  font-family: "Yu Gothic"; 
  src: local("Yu Gothic Medium"); 
  font-weight: 300; 
}
@font-face {
  font-family: "Yu Gothic"; 
  src: local("Yu Gothic Medium"); 
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic"; 
  src: local("Yu Gothic Bold"); 
  font-weight: bold; 
}
@font-face {
  font-family: "Helvetica Neue"; 
  src: local("Helvetica Neue Regular"); 
  font-weight: 100; 
}
@font-face {
  font-family: "Helvetica Neue"; 
  src: local("Helvetica Neue Regular"); 
  font-weight: 200; 
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, "M+ 1p", sans-serif; 
}
/* ここまでChromeなどで游ゴシック体がかすれることに対する対策 */


/* ここからandroid版Chromeで10px以下のフォントが
勝手に大きくなってしまう事を防止する設定 */
body {
  text-size-adjust: 100%;　/* 文字の自動調整を制御するプロパティ */
  /* max-height: 100%; 上記text-size-adjustを採用する前の旧設定で今後は不要。「100％」で不具合が出る場合は「999999px」にしてみる事 */
  -webkit-text-size-adjust: 100%;/*Chrome,Safari*/
  -ms-text-size-adjust: 100%;/*EgdeMobile*/
  -moz-text-size-adjust: 100%;/*firefox*/
}
/* ここまでandroid版Chromeで10px以下のフォントが勝手に大きくなってしまう事を防止する設定とその他のブラウザ用の設定 */


/* ----------------------------------------
------------ ページ全体の設定 ----------------
---------------------------------------- */


/* ページ全体をブラウザのセンターに */

body {
  width: 100%; /* ページ全体の幅を固定 */
  margin: 0px; /* 外側余白 */
  padding: 0px; /* 内側余白 */
  background-color: white; /* 背景色 */
  color: black; /* 基本の文字色 */
  text-align: center /* ブラウザバグ防止、テキストを一旦中央へ */
}
#body {
  margin-left: auto; /* rightとセットでページ全体をブラウザのセンターに */
  margin-right: auto; /* leftとセットでページ全体をブラウザのセンターに */
  text-align: left; /* テキストを左寄せに */
  font-size:62.5%; /* 通常の1em=16pxを→1em=10pxにする設定。当然文字が小さくなる */
  font-size:16px;
}



#body {/* ”footer参照”　ページの縦幅はブラウザの高さに合わせて表示する設定 この設定を行わないと、ページ全体の表示が変になる事がある */
  min-height: 100vh;/* 100vh=ブラウザの画面の高さ */
  position: relative;/* ←bodyを相対位置とする */
  padding-bottom: 90px;/* ←footer固定に高さが被るのを防ぐためにfooterの高さを入力 */
  box-sizing: border-box;/* ←全て含めてmin-height:100vhに */
}/* この後「フッター」にて追加設定を記述 */


img { /* レスポンシブ対応設定。サイズ指定のない画像の最大幅指定  */
  max-width: 96%;/* 画面からはみ出さない様に最大割合を設定 */
  height: auto;
}
html {
  overflow-y: scroll;/* 縦の短いページでもスクロールバーを常に表示する。これにより各ページが微妙に左右にズレるのを防ぐ */
}


/* 改行位置設定 */

.br-pc {/* <br class-"br-pc">を無視する設定 */
  display: none;
}
.br-sp {/* <br class-"br-sp">を反映する設定 */
  display: block;
}


/* ---------- 大見出し設定 ----------*/

h1 {
  margin: 20px 10px 15px 10px; /* 時計回り */
}

/* テキスト見出し設定 */

h2 {/* 通常見出し文字大 */
  margin: 10px 10px 10px 10px; /* 時計回り */
  font-size: 0.9em; 
}
h3 {/* 通常見出し文字小 */
  margin: 20px 10px 15px 15px; /* 時計回り */
  font-size: 0.9em; 
}
h4 {/* 青文字見出し */
  margin: 5px 10px 5px 10px; /* 時計回り */
  font-size: 0.8em; 
  color: blue; 
}
p {/* 段落見出し設定 */
  margin: 5px 10px 5px 10px; /* 時計回り */
  font-size: 0.9em;
  font-weight: 500; 
}

/* ハイパーリンク(<a href="">)の全体設定 */

a:link {/*未訪問リンクの色設定*/
  color: darkblue; 
}
a:visited {/*訪問済みリンクの色設定*/
  color: purple; 
}
a:hover {/*マウスポインタをリンク上に合わせた時の色設定*/
  color: darkorange; 
}
a.link-non-underbar {/*リンク文字の下線無し設定(<a href="xxx" class="link-non-underbar">と記述で反映)*/
  text-decoration: none; 
}


/* --------------------
------ ヘッダー設定 -----
---------------------*/

header {/* ページタイトルの青い部分全体の設定 */
  margin-top: -15px; /* 青い部分全体 */
  margin-bottom: 0px;/* 青い部分全体 */
  padding: 1px; /* ヘッダー内側余白 */
  background-color: lightskyblue; /* ヘッダー背景色 */
}
#top-message {/* 一番上のメッセージ。何故かidを使用してp#指定すると同じ表示にならないのでclassで設定 */
  margin: 20px 0px -35px 10px;
  font-size: 0.6em;
  }

#Campany-text {/* 「株式会社Ｇｏｏｄｚ」文字全体 */
  display: block; /* セルの要素をインラインからブロックにする(全体をボタンにする) */
  text-decoration: none; 
  color: black; 
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HGMaruGothicMPRO","HG丸ｺﾞｼｯｸM-PRO";
  margin: 35px 0px 0px 10px;/* 「株式会社Goodz」全体の位置 */
}

#co-ltd-text {/* 「株式会社Goodz」内の「株式会社」文字部分 */
  margin: -2px 0px 0px 0px;/* 「株式会社Goodz」内の「株式会社」位置微調整。ブラウザにより誤差がある。 */
  font-size: 0.6em;
}
#goodz-text {/* 「株式会社Goodz」内の「Ｇｏｏｄｚ」文字部分 */
  margin: 0px 0px 0px -2px; /* 「株式会社Goodz」内の「Ｇｏｏｄｚ」位置微調整。ブラウザにより誤差がある。 */
  font-size: 1em;
}

#page-title {/* ページ名(トップページ等)部分 */
  margin: 0px 0px 15px 8px; /* 下のロゴ画像の位置を上げるのに使用 */
  padding: 0px 0px 0px 0px; /* 内側余白 */
  color: white; /* 白文字の為、背景色に注意 */
  font-size: 0.9em; 
}
#title-logo {/* ページタイトルのロゴ（とテキスト） */
  text-align: right; /* ロゴ画像の位置(右寄せ)  */
  margin: -55px 10px 0px 0px;/* ロゴ画像位置調整*/
}
#title-logo img { /* ロゴ画像*/
  margin: 0px 0px 0px 0px;/* ロゴ画像微調整*/
  padding: 0px 0px 0px 0px; /* 内側余白 */
  width: 15%; /* ロゴ画像の幅指定*/
}

/* ヘッダーメニュー */

#menu {
  margin-top: 0px; 
  margin-left: 0px; 
  font-size: 0.6em;/* ページリンクボタンの文字サイズ */
}
#menu th {
  width: 156px; /* ヘッダーメューの1セルの幅 */
  padding: 5px 1px 5px 1px; 
  background-color: #444; 
}
#menu a {
  display: block; /* セルの要素をインラインからブロックにする(全体をボタンにする) */
  text-decoration: none; /* テキストのアンダーライン設定 */
  color: #fff; 
  text-align: center; /* セル内の文字をセンタリング */
}


/* --------------------
------ フッター設定 -----
---------------------*/

/* ---------- 本当はフッターではないが ----------*/

.footer-item { /* お問い合わせ・ご質問のテキスト部分 */
  margin: 20px 10px 0px 10px;
  padding: 0px 0px 0px 0px; 
  font-size: 0.9em;
}
.footer-item img {
  float: left; /* 画像を左揃えにしテキストを右に回り込ませる設定 */
  width: 25%;
  margin: 0px 10px 0px 0px; 
}


/* ---------- ここから本当のフッター設定 ----------*/

footer {
  clear: both; /* floatによる回り込みを解除bothする設定 */
  padding: 1px; 
  font-size: 1.9em;
}
footer {/* ”body参照”　縦に短いページでも表示がおかしくならない様にフッターを下部に固定する設定 */
  position: absolute;/*←bodyを絶対位置とする*/
  bottom: 0; /*下に固定*/
}
#footer-menu {
  margin: 3px 5px 3px 5px;
  font-size: 0.55em;  
}
#Copyright {
  margin: 2px 5px 2px 5px;
  font-size: 0.4em;
}

/* ----------------------------------------
-----------ページ全体の設定 終了--------------
---------------------------------------- */



/* ----------------------------------------
-----------ここから各ページ設定---------------
------------------------------------------- */


/* --------------------
-------トップページ------
-------------------- */

h1.OriginalDesign-Mask-midasi { /* 臨時のマスク用設定幅 */
  margin: 20px 5px 5px 5px; /* 時計回り */
  font-size: 1.2em
}
p.OriginalDesign-Mask {/* マスクのテキスト全体 */
  margin-top: 0px; 
  margin-right: 5px;
  margin-bottom: 10px;
  margin-left: 5px; 
  font-size:1em; 
}
.OriginalDesign-Mask-last {/* マスクのメールリンクテキスト*/
  margin-top: 20px;
  margin-bottom: 30px;
}

.small-lot-message {
  margin-top: 25px; 
  margin-right: 5px;
  margin-bottom: 40px;
  margin-left: 5px; 
  font-size: 1.1em;
}

div.events {/* イベントリンク用。バナーとテキスト */
}
a.events-banner {
  margin-left: 15px; 
}
img.events-banner {
  width: 700px;
}
p.events-text {
  margin-left: 10px; 
  margin-top: 0px;
  font-size: 0.85em;
}
.events-item {/* 展示会イベントアイテムテキスト */
  clear: both; /* floatによる回り込みを解除bothする設定 */
  margin-left: 15px; 
  font-size: 0.7em; 
  font-weight: 600; 
}
.events-item img {/* 展示会イベントアイテム画像 */
  float: left; /* 画像を左揃えにしテキストを右に回り込ませる設定 */
  margin: 5px 0px 20px 0px;
}

/* ここから、youtubeリンクをレスポンシブ対応（端末の画面サイズに合わせて可変表示する設定） */
.toppage-youtube {
  clear: both; /* floatによる回り込みを解除bothする設定 */
  position: relative;/* 相対位置への配置 */
  padding-bottom: 110%;/* リンクの高さ指定 */
  height: 0;
  overflow: hidden;/* 内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない */
  margin: 10px 10px 10px 10px;
}
.toppage-youtube iframe {
  top: 0;
  left: 0;
  position: absolute;/* 絶対位置への配置 */
}
/* ここまで、youtubeリンクをレスポンシブ対応（端末の画面サイズに合わせて可変表示する設定） */

ul.toppage {
  padding: 0px 5px 5px 5px;
  font-size: 0.8em;
  font-weight: 500; 
}

li.toppage {
  margin: 20px; 
}

#development-flow, #physical-flow {/* これらの画像の巾のスマホ用設定） */
  width: 96%;
}

.Full-Graphic {/* フルサイズ画像の巾のスマホ用設定） */
  width: 96%;
}

/* -------------------
- 小ロット対応商品ページ -
------------------- */

.small-lot {
  margin-left: 3px;
}
img.small-lot-img1 {
  width: 22%;
}
img.small-lot-img2 {
  width: 5%;
}
p.small-lot-text1 {/* 画像下のテキストの設定(その項目の最終行に)  */
  margin: 0px 5px 0px 5px; /* 余白 */
  font-size: 0.9em;
}
p.small-lot-text2 {/* 画像下のテキストの設定(その項目の最終行に) */
  margin: 0px 5px 40px 5px; /* 余白 */
  font-size: 0.9em;
}
p.small-lot-text3 {/* 画像下のテキストの設定(下にまだ行があるが、少し話したい場合) */
  margin: 0px 5px 15px 5px; /* 余白 */
  font-size: 0.9em;
}


/* --------------------
------ 製品例ページ -----
-------------------- */

/* ここから、youtubeリンクをレスポンシブ対応（端末の画面サイズに合わせて可変表示する設定） */
.locateitem-youtube {
  position: relative;/* 相対位置への配置 */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;/* 内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない */
  margin: 10px 5px 15px 5px;
}
.locateitem-youtube iframe {
  top: 0;
  left: 0;
  position: absolute;/* 絶対位置への配置 */
  width: 100% !important;/* 最優先指示 */
  height: 100% !important;/* 最優先指示 */
}
/* ここまで、youtubeリンクをレスポンシブ対応（端末の画面サイズに合わせて可変表示する設定） */


.item {/* アイテムテキスト */
  margin: 5px 5px 5px 5px;
  font-size:0.75em; 
  font-weight: 600; 
}
.item img {/* アイテム画像 */
  float: left; /* 画像を左揃えにしテキストを右に回り込ませる設定 */
  margin: 20px 5px 15px 0px;  
  width: 45%;
  height: 45%;
}
p.info-text {
  clear: both;
  font-size: 0.8em;
}


/* --------------------
--- お問い合わせページ ---
-------------------- */

/* お問い合わせメール */

.inquiry-mail {/* 「お問い合わせはこちら」の上下余白設定 */
  margin-top: 10px; 
  margin-bottom: 10px; 
  font-weight: 600; 
}
p.inquiry-mail-note1 { 
  font-size: 0.9em; 
  font-weight: 600; 
  color: red; 
}
p.inquiry-mail-note2 {
  margin-top: 10px; 
  margin-bottom: 10px; 
  font-size: 0.9em; 
  font-weight: 600; 
  color: black; 
}
p.inquiry-mail-note3 {
  margin-bottom: 25px; 
  font-size: 0.9em; 
  font-weight: 600; 
  color: maroon; 
}
p.inquiry-mail-note4 {
  margin-bottom: 30px; 
  font-size: 1em; 
  font-weight: 600; 
  color: black; 
}

/* お問い合わせフォーム(作成中) */

div.inquiry-form {
}
form {
  margin-left: 10px; 
  width: 750px; /* ＝ラベル幅+入力フィールド幅+α */
/* フォームを囲う */
  padding: 1em; 
  border: 1px solid #444; 
  border-radius: 1em; /* 角を丸める */
}

/* フォーム間のスペース */

form div + div {
  margin-top: 1em; 
}
p.form-title {
  margin-left: 200px; 
}

/* ラベルの幅を揃える */

label {
  display: inline-block; 
  width: 220px; 
  text-align: right; 
}
input, textarea {/* すべてのテキストフィールドのフォント設定を一致させる。デフォルトで、textarea は等幅フォントが設定されている */
  font: 1em sans-serif; /* すべてのテキストフィールドを同じサイズにする */
  width: 500px; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; /* テキストフィールドのボーダーの外見を同一にする */
  border: 1.5px solid #999; 
}
input:focus, textarea:focus {/* 入力中のフォームを少し強調する */
  border-color: #444; 
}
textarea {/* 複数行のテキストフィールドをラベルにきちんと揃える */
  vertical-align: top; /* テキスト入力に十分な領域を与える */
  height: 5em; /* ユーザが textarea を垂直方向にリサイズできるようにする。これが動作しないブラウザもある */
  resize: vertical; 
}
.button { /* ボタンを他のテキストフィールドと同じ場所に置く */
  padding-left: 200px; /* label 要素と同じサイズ */
}
button { /* このマージンは、ラベルとテキストフィールドの間のスペースと
					おおよそ同じスペースを表す */
  margin-left: .5em; 
}


/* --------------------
------ ＦＡＱページ -----
-------------------- */

#QandA {
  width: 96%;
  margin: 5px;
  font-family: Meiryo; /* メイリオを指定 */ 
  font-size: 15px; /* 全体のフォントサイズ */
}

#QandA dt {/* 「Q」部分 */
  color: maroon; /* 「Q」タイトルの文字色 */
  margin: 5px 0px 5px 35px;
  line-height: 140%; 
  text-indent: -25px;  
}
#QandA dt:before {
  content: "Q."; 
  margin-right: 10px; 
  font-weight: bold; 
}

#QandA dd {/* 「A」部分 */
  margin: 5px 0px 25px 35px; 
  line-height: 140%; 
  text-indent: -25px; 
}
#QandA dd:before {
  content: "A."; 
  margin-right: 3px; 
  font-weight: bold; 
}


/* --------------------
----- 会社概要ページ ----
-------------------- */

.about {
  margin-top: 0px; 
  margin-bottom: 20px 
}
.about th {/* 会社概要部分にdiv="about"を設定。th見出しを指定 */
  width: 20%; 
  padding: 0px 5px 0px 5px; 
  background-color: gray; 
  color: #fff; 
  font-size: 0.9em;
  text-align:  center;/* 文字の揃え位置指定 */
}
.about td {/* 会社概要部分にdiv="about"を設定。tdをセルを指定 */
  width: 78%;
  padding: 10px 5px 10px 5px;
  font-size: 0.9em;
}