@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などで游ゴシック体がかすれることに対する対策 */


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


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

body {
  margin: 0px; /* 外側余白 */
  padding: 0px; /* 内側余白 */
  background-color: white; /* 背景色 */
  color: black; /* 基本の文字色 */
  text-align: center /* ブラウザバグ防止、テキストを一旦中央へ */
}
#body {
  width: 960px; /* ページ全体の幅を固定 */
  margin-left: auto; /* rightとセットでページ全体をブラウザのセンターに */
  margin-right: auto; /* leftとセットでページ全体をブラウザのセンターに */
  text-align: left; /* テキストを左寄せに */
  font-size:62.5%; /* 通常の1em=16pxを→1em=10pxにする設定。当然文字が小さくなる */
  font-size:16px; 
}
#body {/* ページの縦幅はブラウザの高さに合わせて表示する設定 
  この設定を行わないと、ページ全体の表示が変になる事がある　*/
  min-height: 100vh;/* 100vh=ブラウザの画面の高さ */
  position: relative;/*←bodyを相対位置とする*/
  padding-bottom: 150px;/*←footer固定に高さが被るのを防ぐためにfooterの高さを入力*/
  box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}/* この後「フッター」にて追加設定を記述 */
html {
  overflow-y: scroll;/* 縦の短いページでもスクロールバーを常に表示する。これにより各ページが微妙に左右にズレるのを防ぐ */
}


/* 改行位置設定 */

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


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

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

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

h2 {/* 通常見出し文字大 */
  margin: 20px 10px 15px 10px; /* 時計回り */
  font-size: 1.3em; 
}
h3 {/* 通常見出し文字小 */
  margin: 20px 10px 15px 10px; /* 時計回り */
  font-size: 1.1em; 
}
h4 {/* 青文字見出し */
  margin-left: 15px 30px 15px 10px; /* 時計回り */
  font-size: 1.1em; 
  color: blue; 
}
p {/* 段落見出し設定 */
  margin: 10px 10px 10px 10px; /* 時計回り */
  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; 
  padding: 1px; /* ヘッダー内側余白 */
  background-color: lightskyblue; /* ヘッダー背景色 */
}
#top-message {/* 一番上のメッセージ。何故かidを使用してp#指定すると同じ表示にならないのでclassで設定 */
  margin: 20px 10px 10px 20px;
}

#Company-text, #page-title  {/* 社名文字とページ名文字部分 */
  margin: 0px; 
  padding-left: 27px; /* 左内側余白 */
}
#Campany-text {/* 「株式会社Ｇｏｏｄｚ」文字全体 */
  display: block; /* セルの要素をインラインからブロックにする(全体をボタンにする) */
  text-decoration: none; 
  color: black; 
  float: left; /* ロゴをテキストの右に回り込ませる */
  font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HGMaruGothicMPRO","HG丸ｺﾞｼｯｸM-PRO";
  margin: 0px 0px 0px 20px;/* 「株式会社Goodz」全体の位置 */
}

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

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

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

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


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

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

.footer-item { /* お問い合わせ・ご質問のテキスト部分 */
  clear: left; /* サンプル画像リストの回り込み解除 */
  padding: 0px 0px 0px 0px; 
  margin: 10px 0px -10px 10px;
  font-size: 0.9em;
}
.footer-item img {
  float: left; /* ロゴ画像の横にテキスト回り込み設定 */
  width: 200px;
  margin: 20px 10px 0px 10px;
}


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

footer {
  clear: left; 
  padding: 1px; 
}
footer {/* 縦に短いページでも表示がおかしくならない様にフッターを下部に固定する設定 */
  position: absolute;/*←bodyを絶対位置とする*/
  bottom: 0; /*下に固定*/
}
#footer-menu {
  margin-bottom: 15px;
  margin-left: 8px;
  font-size: 1.2em;  
}
a#Copyright {
  font-size: 1.2em;
}

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



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


/* --------------------
----- トップページ ------
-------------------- */
h1.OriginalDesign-Mask-midasi { /* 臨時のマスク用見出し設定幅 */
  margin: 15px 10px 5px 10px; /* 時計回り */
}
p.OriginalDesign-Mask {/* マスク画像とテキスト全体 */
  margin-top: 10px; 
  margin-bottom: 5px; 
  margin-left: 0px; 
  margin-right: 0px;
  font-size:1em; 
  font-weight: 600; 
}
.OriginalDesign-Mask-last {/* マスク画像の右のテキスト */
  clear: both; /* floatによる回り込みを解除bothする設定 */
  margin-bottom: 25px;
}
figure.OriginalDesign-Mask img {/* マスク画像の配置 */
  float: left; /* 画像を左揃えにしテキストを右に回り込ませる設定 */
  margin-top: 10px; 
  margin-right: 10px;
  margin-bottom: 15px; 
  margin-left: 5px; 
}

.small-lot-message {
  margin-top: 30px;
  margin-bottom: 50px; 
  font-size: 1.5em;
}

div.events {/* イベントリンク用。バナーとテキスト */
}
.events-banner {
  margin-left: 20px; 
}
.events-text {
  margin-left: 10px; 
  margin-top: 0px; 
}
.events-item {
  margin-left: 20px; 
}
.toppage-youtube iframe {/* 「製品例」ページのyoutubeリンク設定 */
  float: left; /* 各YouTube画像の回り込み設定 */
  margin: 20px; /* 各YouTube画像の外側周囲の余白 */
  width: 500px; /* 各YouTube画像の横幅 */
  height: 500px; /* 各YouTube画像の縦幅 */   
}

h2.toppage-top {
  clear: both;/* 直前のyoutubeリンクの回り込み設置を解除 */
}
ul.toppage {
  padding-left: 15px; 
  font-weight: 500; 
}
li.toppage {
  margin: 7px; 
}


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

p.small-lot-item1 {/* 画像下のテキストの設定 */
  margin: 0px 0px 0px 0px; /* 余白 */
}
p.small-lot-item2 {/* 画像下のテキストの設定 */
  margin: 0px 0px 60px 0px; /* 余白 */
}


/* --------------------
------ 製品例ページ -----
-------------------- */
.parent-locateitem-youtube {/* 「製品例のYouTubeリンクを横4つ並べてもはみ出さないようにする設定 */
  overflow: hidden;/* 内容がボックスに収まらない場合、収まらない部分は非表示となる。内容が収まらない場合にも、スクロールバーなどは表示されない */
}
.locateitem-youtube iframe {/* 「製品例」ページのyoutubeリンク設定 */
  float: left; /* 各YouTube画像の回り込み設定 */
  margin: 5px; /* 各YouTube画像の外側周囲の余白 */
  width: 230px; /* 各YouTube画像の横幅 */
  height: 130px; /* 各YouTube画像の縦幅 */   
}

.item img {/* アイテム画像 */
  float: left; /* 画像を左揃えにしテキストを右に回り込ませる設定 */
  margin-top: 10px; 
  margin-bottom: 10px; 
  margin-left: 20px; 
  margin-right: 20px; 
}
.item {/* アイテムテキスト */
  clear: both; /* floatによる回り込みを解除bothする設定 */
  font-size:1em; 
  font-weight: 600; 
}
p.clear-left { 
  clear: left; 
}


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

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

p.inquiry-mail {/* 「お問い合わせはこちら」の上下余白設定 */
  margin-top: 20px; 
  margin-bottom: 30px; 
  font-size: 1.2em; 
  font-weight: 600; 
}
p.inquiry-mail-note1 {
  margin-bottom: 14px; 
  font-size: 1em; 
  font-weight: 600; 
  color: red; 
}
p.inquiry-mail-note2 {
  margin-top: 20px; 
  margin-left: 14px; 
  margin-bottom: 10px; 
  font-size: 0.9em; 
  font-weight: 600; 
  color: black; 
}
p.inquiry-mail-note3 {
  margin-left: 20px; 
  margin-bottom: 25px; 
  font-size: 0.9em; 
  font-weight: 600; 
  color: maroon; 
}
p.inquiry-mail-note4 {
  margin-bottom: 30px; 
  font-size: 0.9em; 
  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: 100%; 
  font-family: Meiryo; /* メイリオを指定 */ 
  font-size: 16px; /* 全体のフォントサイズ */
}

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

#QandA dd {/* 「A」部分 */
  margin: 10px 20px 30px 47px; 
  line-height: 140%; 
  text-indent: -27px; 
}
#QandA dd:before {
  content: "A."; 
  margin-right: 4px; 
  font-weight: bold; 
}


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

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